Kendo Grid filter generate dropdown based on the data in the grid in ASPX page

2 posts, 0 answers
    MUDIAM avatar
    2 posts
    Member since:
    Sep 2020

    Posted 24 Sep 2020 Link to this post


    I am using Kendo Grid for the first time. The existing page already has the kendo UI grid, I am trying to add a filter dropdown to one of the existing columns. I want the dropdown to show the unique list of values from the grid itself. 

    <asp:Content ID="Content1" ContentPlaceHolderID="MyPage" runat="server">

            function RefreshTables() {

                var viewType = document.getElementById('<%=hfEmployeeTypeId.ClientID%>').value
                var myChartModel ={
                    id: "myChartId",
                    fields: {
                        PatientId: {
                            type: "number"
                        PatientName: {
                            type: "string"
                        DoctorFullName: {
                            type: "string"
                        Impression: {
                            type: "string"

                    sortable: true,
                    dataSource: {
                        schema: {
                            model: myChartModel
                    pageable: {
                        pageSize: 20,
                        pageSizes: true
                    filterable: {
                        extra: false
                    columns: getColumns(viewType),
                    resizable: true

                if ($("#gvMyChart").data("kendoGrid")) {
            function getColumns(viewType) {
                var Columns = [{
                    width: 1,
                    field: "PatientId"
                }, {
                    width: 180,
                    field: "PatientName",
                    title: "Patient Name",
                    attributes: { style: "text-decoration: none;color: White;white-space: nowrap;" },
                    template: "<a href='javascript:openPatientSummaryWindow(#=PatientId#)'>#=PatientName#</a>",
                    filterable: false
                }, {
                    width: 180,
                    field: "ReferringDoctorDescription",
                    title: "Referring Doctor",
                    filterable: true
                }, {
                    field: "Impression",
                    title: "Impression",
                    filterable: false

    return Columns;


    <asp:Content ID="Content2" ContentPlaceHolderID="MyTableContent" runat="server">
        <asp:GridView ID="gvMyChart" runat="server" DataSourceID="dsMyCharts"
            GridLines="None" Enabled="True" Visible="True" AutoGenerateColumns="False"
            Width="100%" OnDataBound="gvMyChart_DataBound" CssClass="GridViewStyle" ClientIDMode="Static">
                <asp:BoundField HeaderText="PatientId" DataField="PatientId" />
                <asp:BoundField HeaderText="Patient Name" DataField="PatientName" />            
                <asp:BoundField HeaderText="Referring Doctor" DataField="ReferringDoctorDescription" SortExpression="ReferringDoctorDescription" />
                <asp:BoundField HeaderText="Impression" DataField="Impression" SortExpression="Impression" />

            <FooterStyle CssClass="GridViewFooterStyle" />
            <RowStyle CssClass="GridViewRowStyle" />
            <PagerStyle CssClass="GridViewPagerStyle" />
            <AlternatingRowStyle CssClass="GridViewAlternatingRowStyle" />
            <HeaderStyle CssClass="GridViewHeaderStyle" />
        <asp:ObjectDataSource ID="dsMyCharts" runat="server" TypeName="MyLibrary.MyPage"
            OldValuesParameterFormatString="original_{0}" SelectMethod="GetMyCharts">
                <asp:ControlParameter ControlID="ddlPractices" Name="LocationIds" PropertyName="SelectedValue" />
                <asp:Parameter Name="user" Type="Object" />
        <asp:HiddenField ID="hfEmployeeTypeId" runat="server" Value=""></asp:HiddenField>


    So, how to create a dropdown filter for ReferringDoctorDescription field and have the dropdown show the values from the result of the column?

  2. Alex Hajigeorgieva
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 28 Sep 2020 Link to this post

    Hello, Mudiam,

    We have an example that demonstrates how to create a filterable.ui in the Kendo UI Grid here that you can use as a starting point:

    If the grid data source has all of its data locally, you can loop it and provide it to the data source data of the DropDownList. I have updated the official demo to utilize the data source and extract the unique cities:

        field: "City",
        width: 130,
        filterable: {
            ui: cityFilter
    function cityFilter(element) {
        var grid = $("#grid").data("kendoGrid");
        var uniqueCities = removeDuplicates(grid.dataSource.view(), "City");
              dataSource: uniqueCities,
              optionLabel: "--Select Value--"
    function removeDuplicates(items, field) {
          var getter = function(item){return item[field]},
              result = [],
              index = 0,
              seen = {};
          while (index < items.length) {
            var item = items[index++],
                text = getter(item);
            if(text !== undefined && text !== null && !seen.hasOwnProperty(text)){
              seen[text] = true;
          return result;

    Kind Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Back to Top