Cascading Grid FIlters

[Eddie]

I want to take the JQuery kendo grid I have and its 3 filters, and make them cascading filters. I have Year, Make, Model filters, when a user filters the dataSource on Year, I want the only options in Make to be the available Make's after the Year filter is applied to the dataSource. Have this functionality work in any order. I have accomplished this by applying the same dataSource from the grid to each of the 3 columns filter.dataSource. However, this shows every year, every make, and every model that is available in the filter dropdown. see http://dojo.telerik.com/AyEca/2. The reason this is working to my understanding is that I am manipulating the dataSource when I apply a filter which is updating the column filter dataSource as well, giving me only filter options that exist in the current filtered dataSource of the grid.

 

However, my dataSource is 4,000 large, with multiple years, makes, and models. So the user would see somewhere around 500 2004 before they would see a 2005 filter option. This obviously for usability does not work as a final solution. What I have done is found this query which allows me to get the filtered dataSource.

 

What I want to do is grab the years, makes, and models out of each of those and create a array of data that is unique and sorted and apply that to their respected column filter datasource. Is this possible, how would I accomplish this? Also is there a another simpler way to create cascading filters that only have unique and sorted filter options. Here is my current code.

 

 

[Eddie]

Init = function () {

    var dataSource = new kendo.data.DataSource(
    {
        transport: {
            read: {
                url: "/ResidualValue/MappingRulesRead",
                dataType: "json"
            }
        },
        schema: {
            data: function(response) {
                return response.Data;
            },
            model:
            {
                fields: {
                    Year: { type: "number" }
                }
            }
        },
        sort: [
            { field: "TypeName", dir: "desc" },
            { field: "Year", dir: "desc" }
        ]
    });

    $("#RuleGrid").kendoGrid({
        dataSource: dataSource,
        columns: [
            {
                headerAttributes: {
                    "class": "k-grid-rules",
                    "id": "Year"
                },
                attributes: {
                    "class": "text-center k-grid-rules"
                },
                field: "Year",
                filterable: {
                    multi: true,
                    //dataSource: dataSource
                }
            }, {
                headerAttributes: {
                    "class": "k-grid-rules",
                    "id": "Type"
                },
                attributes: {
                    "class": "text-center k-grid-rules"
                },
                field: "TypeName",
                title: "Type",
                filterable: {
                    multi: true,
                    //dataSource: dataSource
                }
            }, {
                headerAttributes: {
                    "class": "k-grid-rules",
                    "id": "Make"
                },
                attributes: {
                    "class": "text-center k-grid-rules"
                },
                field: "MakeName",
                title: "Make",
                filterable: {
                    multi: true,
                    //dataSource: dataSource
                }
            }, {
                headerAttributes: {
                    "class": "k-grid-rules",
                    "id": "Model"
                },
                attributes: {
                    "class": "text-center k-grid-rules"
                },
                field: "Model",
                title: "My Model",
                filterable: {
                    multi: true,
                    //dataSource: dataSource
                },
                width: 200
            }, {
                headerAttributes: {
                    "class": "k-grid-rules",
                    "id": "IronModel"
                },
                attributes: {
                    "class": "text-center k-grid-rules"
                },
                field: "MapToModel",
                title: "Iron Model",
                filterable: {
                    multi: true,
                    //dataSource: dataSource
                },
                width: 200
            }, {
                command: { text: "Delete", click: IronGuides.ResidualValues.EquipmentMapping.DeleteModal },
                title: "",
                headerAttributes: {
                    "class": "k-grid-rules",
                    "id": "Delete"
                },
                attributes: {
                    "class": "text-center k-grid-rules"
                }
            }
        ],
        autoBind: true,
        sortable: true,
        reszieable: true,
        filterable: {
            extra: false,
            operators: {
                string: {
                    eq: "Equal to",
                    neq: "Not equal to"
                },
                number: {
                    eq: "Equal to",
                    neq: "Not equal to"
                }
            }
        },
        dataBound: IronGuides.ResidualValues.EquipmentMapping.Grid.DataBound
    });
};

DataBound = function () {
    //This sets dataGroup as a non-paged filtered DataSource.
    var dataSource = this.dataSource;
    var filters = dataSource.filter();
    var allData = dataSource.data();
    var query = new kendo.data.Query(allData);
    var dataGroup = query.filter(filters).data;

    InitFilters(dataGroup);
};
InitFilters = function (data) {
    var dataSource = new kendo.data.DataSource(
    {
        schema: {
            data: data,
            model:
            {
                fields: {
                    Year: { type: "number" }
                }
            }
        },
        sort: [
            { field: "TypeName", dir: "desc" },
            { field: "Year", dir: "desc" }
        ]
    });
    var grid = $("#RuleGrid").data("kendoGrid");
    var yearFilterMultiCheck = grid.thead.find("[data-field=Year]").data("kendoFilterMultiCheck");
    var makeFilterMultiCheck = grid.thead.find("[data-field=MakeName]").data("kendoFilterMultiCheck");
    var modelFilterMultiCheck = grid.thead.find("[data-field=Model]").data("kendoFilterMultiCheck");

    //This is trying to set the data of the dataSource of the filter
    yearFilterMultiCheck.dataSource.data(data);
    //this is trying to set the dataSource but there is no setDataSource like there is on the grid
    makeFilterMultiCheck.setDataSource(dataSource);
    modelFilterMultiCheck.setDataSource(dataSource);

};

[Georgi Krustev]

Hello Eddie,

Based on the given information I understand that you would like to cascade the datasources of the three filter menus. For this task, I would suggest you use separate data sources for each filter menu. Thus you will be able to bind them appropriately, without affecting the grid. Basically, the first filter menu should show all distinct years (different than the grid) and the other filter menus should show related results to the chosen years.

As a starting point, you can check this how-to demo that shows how to access and manipulate the MultiCheckFilter widget. What you will need to do is to connect the three menus and decide from a business perspective, which menu should be parent and which the children.

Please note that such implementations are custom and as such fall out of the scope of the entitled support service. If you need further assistance, then I would suggest you contact our professional services.

Regards,
Georgi Krustev
Telerik