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

[Julian]

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

 

 

[Stefan]

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

[Julian]

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

[Julian]

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

[Stefan]

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