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

[MUDIAM]

Hi,

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


        function RefreshTables() {

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

            $("#gvMyChart").kendoGrid({
                sortable: true,
                dataSource: {
                    schema: {
                        model: myChartModel
                    }
                },
                pageable: {
                    pageSize: 20,
                    pageSizes: true
                },
                filterable: {
                    extra: false
                },
                columns: getColumns(viewType),
                resizable: true
            });


            if ($("#gvMyChart").data("kendoGrid")) {
                $("#gvMyChart").data("kendoGrid").hideColumn("PatientId");
            }
        }
        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;
            
        }

    </script>
</asp:Content>

<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">
        <Columns>
            <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" />

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

</asp:Content>

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

[Alex Hajigeorgieva]

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:

https://demos.telerik.com/kendo-ui/grid/filter-menu-customization

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:

https://dojo.telerik.com/@bubblemaster/uLepIBIR

{
    field: "City",
    width: 130,
    filterable: {
        ui: cityFilter
    }
},

function cityFilter(element) {
    var grid = $("#grid").data("kendoGrid");
    var uniqueCities = removeDuplicates(grid.dataSource.view(), "City");
      element.kendoDropDownList({
          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)){
          result.push(item.City);
          seen[text] = true;
        }
      }
      return result;
}

Kind Regards,
Alex Hajigeorgieva
Progress Telerik