Question

I am using the Kendo Hierarchical Datasource for a Kendo UI Treeview. On a click event, I want to leave only the checked roms in the datasource.

I tried

    $('#treeview')
         .getKendoTreeView()
         .dataSource
         .filter({ 
                  field: "checked", 
                  operator: "eq", 
                  value: true });

But to no avail.

Do I have the correct field?

Also, for bonus points, how do I remove the filter?

Was it helpful?

Solution

checked is the correct field if you have defined it as so in the template :

$("#treeview").kendoTreeView({
    checkboxes: { template: "<input type='checkbox' name='checkedNodes' #= item.isChecked ? 'checked' : '' # value='#= item.id #' />" },
    dataSource: [{ 
        id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
            { id: 2, text: "about.html", expanded: true, isChecked: false, spriteCssClass: "folder" },
            { id: 3, text: "index.html", expanded: true, isChecked: true, spriteCssClass: "folder" }
        ]
     }]
});

in my case, it is named isChecked (see item.isChecked in my code).

But, in order to filter correctly, be careful : filter only acts on the current level (see for example this question).

And for your bonus question, to remove the filter, simply apply the following code :

$('#treeview')
     .data("kendoTreeView")
     .dataSource
     .filter({ });

(same as before on all levels on your hierarchy!).


Edit

Here is some fiddle in order to play with the filter : http://jsfiddle.net/scaillerie/RHh67/ .

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top