This is a migrated thread and some comments may be shown as answers.

Kendo UI datasource filter in detail template not working

3 Answers 630 Views
Grid
This is a migrated thread and some comments may be shown as answers.
christine
Top achievements
Rank 1
christine asked on 25 Jan 2017, 12:03 AM

i created a testing grid (hierarchial grid) to be applied in our project. problem is that the datasource filter didn't apply the matching id (employee's id column to subordinate's ReportingTo column).

 

<body>
    <div id="testGrid"></div
  <script>
    var employee = [{
       empID: 1, lastName: "Sarsonas", firstName: "Christine", ReportingTo: 0
    },
    {
        empID: 2, lastName: "Sarsonas", firstName: "Alyssa", ReportingTo: 0,
    }
];
 
var subordinate = [
    {
        empID: 10, lastName: "Hatake", firstName: "Kakashi", ReportingTo: 1
    },
    {
        empID: 11, lastName: "Maito", firstName: "Gai", ReportingTo: 1
    }
];
 
 
$("#testGrid").kendoGrid({
    columns: [
        { title: "Emp ID", field: "empID" },
        { title: "Last Name", field: "lastName" },
        { title: "First Name", field: "firstName" },
        { title: "Reporting To", field: "ReportingTo" }
    ],
    dataSource: { data: employee },
    detailInit: detailInit
    ,dataBound: function() {
        this.expandRow(this.tbody.find("tr.k-master-row"));
    }
});
 
 
function detailInit(e) {
    console.log(e.data.empID);
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            data: subordinate,
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            pageSize: 10,
            filter: { field: "ReportingTo", operator: "eq", value: e.data.empID }
        },
        scrollable: false,
        sortable: true,
        pageable: true,
        columns: [
            { title: "Emp ID", field: "empID" },
            { title: "Last Name", field: "lastName" },
            { title: "First Name", field: "firstName" },
            { title: "Reporting To", field: "ReportingTo" }
        ]
    });
}
 
    </script>
  </body>

3 Answers, 1 is accepted

Sort by
0
christine
Top achievements
Rank 1
answered on 25 Jan 2017, 07:52 AM
what seems to be the problem? please help.
thank you in advance
0
Boyan Dimitrov
Telerik team
answered on 26 Jan 2017, 04:00 PM

Hello,

The problem is that there is serverFiltering set to true, but the grid is populated with array (local data). In this case the filter should be on the client-side (not on the server). Please refer to the http://dojo.telerik.com/OboYA sample. 

Regards,
Boyan Dimitrov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
christine
Top achievements
Rank 1
answered on 27 Jan 2017, 12:26 AM
Thank you for your help sir.
I appreciate it very much.
Tags
Grid
Asked by
christine
Top achievements
Rank 1
Answers by
christine
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or