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

5 posts, 0 answers
  1. Julian
    Julian avatar
    62 posts
    Member since:
    Apr 2015

    Posted 24 Jul 2017 Link to this post

    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

     

     

  2. Stefan
    Admin
    Stefan avatar
    3076 posts

    Posted 26 Jul 2017 Link to this post

    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.
  3. Julian
    Julian avatar
    62 posts
    Member since:
    Apr 2015

    Posted 26 Jul 2017 Link to this post

    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

  4. Julian
    Julian avatar
    62 posts
    Member since:
    Apr 2015

    Posted 26 Jul 2017 Link to this post

    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

  5. Stefan
    Admin
    Stefan avatar
    3076 posts

    Posted 28 Jul 2017 Link to this post

    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.
Back to Top