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

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

    Posted 24 Sep 2020 Link to this post

    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?

  2. Alex Hajigeorgieva
    Admin
    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:

    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

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

Back to Top