CODEWITHSUNDEEP
javascripthtmlkendo-uinodeskendo-treeview
user123
user123

Reputation: 850

How to fill the grid based on treeview node(checkbox-selection)?

I am doing a project using Kendo UI controls. In project left side "treeview" and right side "kendogrid" are placed.

Here my requirement is to filter the grid based on treeview nodes, and need to do multi-selection.

For example:eg:10249,10248 Based on this nodes filter the grid.

Here is my fiddle: http://jsfiddle.net/RHh67/7/

Here is tried code:

var tree= $("#treeview").kendoTreeView({
    checkboxes: {
        checkChildren: true
    },

    dataSource: [{
        id: 1, text: "My Project", expanded: true, spriteCssClass: "rootfolder", items: [
            {
                id: 2, text: "OrderID", expanded: true, spriteCssClass: "folder", items: [
                { id: 3, text: "10248"  },
                { id: 4, text: "10249"  },
                { id: 5, text: "10250" },
                { id: 6, text: "10251" },
                { id: 7, text: "10252" }
            ]
        }]
    }]
}).data("kendoTreeView");

tree.dataSource.bind("change", function (e) {
    var ds = $("#grid").data("kendoGrid").dataSource;
    ds.filter([
        {"logic":"or",
            "filters":[
                {
                    "field":"OrderId",
                    "operator":"eq",
                }
            ]}
    ]);
});

Can any one help me find where exactly I am wrong?

Upvotes: 0

Views: 1458

Answers (1)

OnaBai
OnaBai

Reputation: 40887

The handler for change on the tree should do:

  1. Get selected checkboxes.
  2. Build a filter condition for ticked checkboxes.
  3. Apply filter to the DataSource.

Something like:

$("#treeview").on("change", function (e) {
    var selected = $('#treeview :checked').closest('li');
    var ds = grid.dataSource;
    var filter = {
        logic  : "or",
        filters: []
    };
    $.each(selected, function (idx, elem) {
        var item = tree.dataItem(elem);
        if (parseInt(item.text)) {
            console.log("item.text", item.text);
            filter.filters.push({
                field   : "OrderID",
                operator: "eq",
                value   : parseInt(item.text)
            });
        }
    });
    console.log("filter", filter);
    ds.filter(filter);
});

Running here

Upvotes: 5

Related Questions