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

Hierarchical Grid - Detail Grid rows not filtering on expanded row event correctly

4 Answers 419 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Julian
Top achievements
Rank 1
Julian asked on 24 Jul 2017, 08:40 PM

Ok I have a hierarchical grid. One of the columns return in my SQL for both the Master Grid and Detail Grid is projectRoleId. I want to filter out roles that do not match the expanded rows projectRoleId. Currently , by following the kendo hierarchical grid example, I'm using the filter on the detailGrid like this:

filter: {
field: "projectRoleId", operator: "eq", value: e.data.projectRoleId
}

However all rows are still showing when I expand the master row.

 

This image shows the data returned to the Master Grid and Detail Grids. 

http://imgur.com/9rJ0FVj

 

// INITIALIZE / CREATE UI ELEMENTS //
function initHierarchicalGrid() {
    var hierGrid = $("#kgProjectGroupCapacityPlanning").kendoGrid({
        dataSource: new kendo.data.DataSource({
            transport: {
                read: function (options) {
                    $.ajax(getHierarchicalGrid(options));
                }
            },
            pageSize: 6,
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            schema: {
                data: function (data) {
                    var res = JSON.parse(data.d);
                    return res;
                },
                model: getHierGridModel(),
                total: function (response) {
                    var res = JSON.parse(response.d);
                    return res.length;
                }
            }
        }),
                     
         
        //height: 600,
        toolbar: setToolbarOptions(),
        sortable: true,
        pageable: true,
        //detailInit: function(e) {
        //  e.detailRow.find(".grid").kendoGrid({ dataSource: e.data });
        //},
        detailInit: detailInit,
        detailExpand: function(e) {
            console.log(e.masterRow, e.detailRow);
        },
        dataBound: function () {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
 
        },
        columns: [
            { field: "projectRoleId", visible: false, width: "110px" },
            { field: "rolename", width: "110px" },
            { field: "monthOne", title: "1/2017", width: "100px" }
        ]
        //detailTemplate: "<div>ProjectRoleId: #: projectRoleId #</div><div>RoleName: #: rolename #</div><div>Month One: #: monthOne #</div>"
    }).data("kendoGrid");
 
    $('#btnCollapseAll').click(collapseAll);
    $('#btnExpandAll').click(expandAll);
 
}
 
function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: new kendo.data.DataSource({
            transport: {
                read: function(options) {
                    $.ajax(getDetailRows(options,e.data.projectRoleId));
                }
            },
            schema: {
                data: function (data) {
                    var res = JSON.parse(data.d);
                    return res;
                },
                model: getDetailGridModel(),
                total: function (response) {
                    var res = JSON.parse(response.d);
                    return res.length;
                }
            },
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            pageSize: 10,
            filter: {
                 field: "projectRoleId", operator: "eq", value: e.data.projectRoleId
            }
        }),
        scrollable: false,
        sortable: true,
        pageable: true,
        columns: [
            { field: "projName", width: "110px" },
            { field: "sectorname", title: "Sector", width: "110px" },
            { field: "name", title: "Customer", width: "200px" },
            { field: "status", title: "Status", width: "100px" },
            { field: "monthOne", title: "1/2017", width: "100px" }
        ]
    });
}

 

JavaScript ajax calls: 

// READ
    function getDetailRows(options,projectRoleId) {
 
        var paramData = {
            userId: userId,
            projectRoleId: projectRoleId
        };
        return {
            url: "ProjectGroupCapacityPlanningDashboard.aspx/GetDetailRowsForGrid",
            data: JSON.stringify(paramData),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            type: "POST",
            success: function(result) {
                options.success(result);
            }, // notify the data source that the request succeeded
            error: function(result) {
                pageHelper.processAjaxError(result, notification);
                options.error(result);
            } // notify the data source that the request failed                                   
        }
    }
 
 
    function getHierarchicalGrid(options) {
 
        var paramData = { userId: userId };
        return {
            url: "ProjectGroupCapacityPlanningDashboard.aspx/GetHierRowsForGrid",
            data: JSON.stringify(paramData),
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            type: "POST",
            success: function(result) {
                 options.success(result);
            },
            error: function (result) {
                pageHelper.processAjaxError(result, notification);
                options.error(result);
            } // notify the data source that the request failed                                   
        }
    }

 

This must be a simple fix I am hoping as my example is pretty similar to the one Telerik uses.

 

Thanks,

 

julian kish

 

 

4 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 26 Jul 2017, 08:17 AM
Hello Julian,

Thank you for the provided information.

Based on the provided code and the picture of the data it seems that in the detail Grid the projectRoleId is a string. Please check if filtering the id field of the Child Grid will achieve the desired result, as based on the provided picture this is the field which has the same numerical values as the projectRoleId field of the parent Grid.

Still, as the operator is set to equal this should return no data in the Child Grid, so I can assume that there is a part of the code which we are overlooking at this moment.

If my observation was not correct, please share with as a small runnable example reproducing the issue and I will gladly assist.

Regards,
Stefan
Progress Telerik
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
Julian
Top achievements
Rank 1
answered on 26 Jul 2017, 01:34 PM

Stefan, 

 

My apologies in my haste of pasting the data in excel i misaligned the columns! 

Here is a screenshot of the actual data from the stored proc calls.

http://imgur.com/Euurp1Y

0
Julian
Top achievements
Rank 1
answered on 26 Jul 2017, 04:02 PM

I have resolved this issue. I had serverFiltering set to true but this prevents clientSide filtering. 

Via your own docs:

 

serverFiltering Boolean (default: false)
If set to true, the data source will leave the filtering implementation to the remote service. By default, the data source performs filtering client-side.
By default, the filter is sent to the server following jQuery's conventions.
For example, the filter { logic: "and", filters: [ { field: "name", operator: "startswith", value: "Jane" } ] } is sent as:
filter[logic]: and
filter[filters][0][field]: name
filter[filters][0][operator]: startswith
filter[filters][0][value]: Jane

0
Stefan
Telerik team
answered on 28 Jul 2017, 06:57 AM
Hello Julian,

I'm glad to hear that the issue is resolved.

Also, thank you for sharing the solution with the Kendo UI community, it is highly appreciated.

Let me know if you need additional information on this matter.

Regards,
Stefan
Progress Telerik
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.
Tags
Grid
Asked by
Julian
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Julian
Top achievements
Rank 1
Share this question
or