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

Filtering Grid Using Same Data

2 Answers 53 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bill
Top achievements
Rank 1
Bill asked on 21 Mar 2019, 12:19 PM

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"))
                )
        )

2 Answers, 1 is accepted

Sort by
0
Accepted
Tsvetomir
Telerik team
answered on 25 Mar 2019, 11:57 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Bill
Top achievements
Rank 1
answered on 27 Mar 2019, 12:57 PM
Thanks, worked great!
Tags
Grid
Asked by
Bill
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Bill
Top achievements
Rank 1
Share this question
or