Filtering Grid Using Same Data

[Bill]

I have a simple grid and want to have a dropdown filter for the column Project.  I do not want to make a separate call to get data for this dropdown.  Can I use the unique values from the grid to populate the filter?

@(Html.Kendo().Grid(Model)
            .Name("ByProjectAndReviewerGrid")
            .Deferred(true)
            .ToolBar(tools => tools.Excel())
            .Excel(excel => excel
                .FileName("ByProjectAndReviewer.xlsx")
                .AllPages(true)
            )
            //.Events(events => events.DataBound("databound"))
            .Columns(columns =>
            {
                columns.Bound(p => p.Project).Title("Project").Width(400);
                columns.Bound(p => p.Reviewer).Title("Reviewer").Width(300);
                columns.Bound(p => p.ReleasePercent).Title("Release %").Filterable(false).Width(150);
                columns.Bound(p => p.DoNotReleasePercent).Title("Do Not Release %").Filterable(false).Width(150);
                columns.Bound(p => p.RejectPercent).Title("Reject %").Filterable(false).Width(150);
                columns.Bound(p => p.Release).Title("Release").Filterable(false).Width(150);
                columns.Bound(p => p.DoNotRelease).Title("Do Not Release").Filterable(false).Width(150);
                columns.Bound(p => p.Reject).Title("Reject").Filterable(false).Width(150);
                columns.Bound(p => p.TotalReviewed).Title("Total Reviewed").Filterable(false).Width(150);
            })
            .HtmlAttributes(new { style = "height: 650px;" })
            .NoRecords()
            .AutoBind(false)
            .Sortable()
            .Filterable()
            .Scrollable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .ServerOperation(false)
                .Read(read => read.Action("ByProjectAndReviewer_Read", "Reporting"))
                )
        )

[Tsvetomir]

Hi Bill,

The Kendo UI Grid column expose the filterable.ui functionality which alwlos for customizing the filter menu. This could be seen in action in the following live demo: 

https://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization

I have noticed that the Grid is server-bound, but a data source has been configured for Ajax binding. Have in mind that such configuration could result in unexpected behavior. I would recommend not passing the Model to the Grid directly, but rather provide the type that will be passed to the Grid like in this example. 

With that in hand, all of the records within the grid could be accessed in the filterable.ui function. What you can do is to access the field of interest and extract the unique values, afterward, pass them to the data source of the DropDownList. Here is an example:

columns.Bound(p => p.UnitPrice).Title("Unit Price").Width(130).Filterable(filterable => filterable.UI("unitPriceFilter").Extra(false));

<script>
    function unitPriceFilter(element) {
        var grid = $("#Grid").getKendoGrid();
        var allRecords = grid.dataSource.data().toJSON();
        var unitPriceFieldCollection = [];

        for (var i = 0; i < grid.dataSource.total(); i++) {
            unitPriceFieldCollection.push(allRecords[i].UnitPrice);
        }

        var unique = unitPriceFieldCollection.filter(function (itm, i, a) {
            return i == unitPriceFieldCollection.indexOf(itm);
        });

        element.kendoDropDownList({
            dataSource: {
                data: unique
            },
            optionLabel: "--Select Value--"
        });
    }
</script>

Let me know in case additional assistance is needed.


Kind regards,
Tsvetomir
Progress Telerik

[Bill]

Thanks, worked great!