madcapnmckay / knockout-ui Goto Github PK

First, LOVE your UI Tree. It's what I was trying to write.

When I run in IE9 in IE8 mode, I'm getting the following errors on the debug console -

SCRIPT5007: Unable to get value of the property 'length': object is null or undefined
ui-tree.js, line 56 character 20
SCRIPT5007: Unable to get value of the property 'children': object is null or undefined
ui-tree.js, line 485 character 4

It works fine when in IE9 mode.

Suggestions?

When you start typing in the text box in a dropdown and the menu displayes, use the arrow key to move down to one of the options. The text displayed in the text box is actually the value of the item, not the label of the item.

I tried the dropdown control with the latest version of Knockout it did not seem to like it. Thats a pity because that's about the only UI plugin I know that works with Knockout and looks fantastic.

From your Tree example, if you add a "New Page" to an existing folder, the icon should display as a page. Currently it displays as a folder icon.

When combining the dropdown plugin with existing options plugin, if one is bound to an observable array of objects, rather than an array of strings, the "optionsText" is not honoured on the selection.

However, it correctly displays the optionsText in the autocomplete dropdown. Probably minor, I am going to dig in to see if I can narrow it down, but wanted to let you know before I started.

So a binding like this:

<select id="states" data-bind="options: states, optionsText: 'stateCode', value: selectedState, optionsCaption: 'Select a State', dropdown: {}">
</select>

Where each "state" object looks like this:

{stateCode: "Tennessee", anotherProp: "value" }

Hi Man,

I am exploring your UI Widgts and I really love them . They perform exceptionally well. But I found some minor issue I think the issue is bit logical. On treeview right now there is no way I can not distinguish between a Right Click and Left Click,. On Right Click on Node I want to show some advanced options and on left click on the Node I want to display details against that Node.

To Made few changes in ui-tree.js to make it working :

1. In ui-tree.js on Line No 97, I did few changes
   /*Original Script */
   this.selectNode = function () {
   var selected = this.viewModel.selectedNode(), that = this;

            if (selected !== undefined && selected.isRenaming()) {
                $('.rename > .node input', viewModel.tree).blur();
            }
            this.saveState();

            if (selected === undefined || (selected !== undefined && selected !== this)) {

                that.viewModel.handlers.selectNode(this, function () {
                    if (selected !== undefined) {
                        selected.isSelected(false);
                        selected.isRenaming(false);
                    }
                    that.isSelected(true);
                    that.viewModel.selectedNode(that);
                    that.saveState();
                });
            }
        }.bind(this);

/* End */

/Modified Script/
this.selectNode = function (event) {
var selected = this.viewModel.selectedNode(), that = this;

            if (selected !== undefined && selected.isRenaming()) {
                $('.rename > .node input', viewModel.tree).blur();
            }
            this.saveState();

            if (selected === undefined || (selected !== undefined && selected !== this)) {

                that.viewModel.handlers.selectNode(event,this, function () {
                    if (selected !== undefined) {
                        selected.isSelected(false);
                        selected.isRenaming(false);
                    }
                    that.isSelected(true);
                    that.viewModel.selectedNode(that);
                    that.saveState();
                });
            }
        }.bind(this);

/* End */

If I am missing something, using which I won't be requiring to change the above. Anyways , I wanted to let you about this.

Thanks Man.. Keep up the Good Work

Hi!
I think it is very usable to get Knockout-UI via nuget. Can you add it there?

Really like the work you have done! Have you got any suggestions as to which is the best approach to use knockout templating to template the menu (and items) for the autocomplete box?

I've managed to do it in javascript by using the jquery autocomplete _renderMenu method (similar to how you did renderItem) however it means that we put more html in our javascript than we would like. Would like to put our template into the html and get the autocomplete binding to override the renderMenu and apply the template

var countriesViewModel = function() {
            this.source = [{label:'France', value:{name:'France',region:'EU'}},{label:UK', value:{name:UK',region:'EU'}},{label:'China', value:{name:'China',region:'Asia'}},{label:'Japan', value:{name:'Japan',region:'Asia'}}];
                       this.renderMenu = function(ul, items) {
                      ul.append('<li>EU Countries</li>');
                      var euCountries = items.filter(function() {....});
                      $.each(euCountries, function(index,item){
                       ul.append('<li>' + item.value.name + '</li>');
                       });
                      ul.append('<li>Asian Countries</li>');
                      var asianCountries = items.filter(function() {....});
                      $.each(asianCountries, function(index,item){
                       ul.append('<li>' + item.value.name + '</li>');
                       });
                       }
            this.autocompleteConfig = function() {
                return this;
            }.bind(this);
        };

Cheers!

Can you guys please add live previews for the examples?

I am unable to load the tree when json data is passed to children object in the model. Why is that?

When
-children: [] and dynamically assign when json data received tree fails.

When
children: [
// { name: "Annabelle", id : '1', isOpen : true,isChecked:true, children : [
// { name: "Arnie", cssClass : 'page', id : '5',isChecked:true, children : [] },
// { name: "Anders", cssClass: 'page', id: '6', isChecked: true, children: [] },
// { name: "Apple", cssClass: 'page', id: '7', isChecked: true, children: [] }
// ]
// }
this works like charm. Why dynamic assignment is not bieng done. Please help