Need to Change RadGrid EditItemTemplate's Filter to Drop-Down List

6 posts, 0 answers
  1. Tonya
    Tonya avatar
    19 posts
    Member since:
    Jul 2014

    Posted 05 Dec 2018 Link to this post

    I added an editable grid on my page, based on forum posts I found on this site (see attached images). The grid works as expected; however, the filtering & sorting do not.

    In edit mode, the grid has a few drop-down lists using <EditItemTemplate>. Unfortunately, the default filter for these columns ends up being a textbox instead of a drop-down list. How can I change them? Also, these fields lose their sorting capability - the column headers can't be clicked, like the other columns in the grid.

    If I change the tag from <EditItemTemplate> to <FilterTemplate> the filter becomes a drop-down list; but, then the fields are no longer listed on the edit screen (see attached image). 

    How can I implement a grid that has both capabilities - a drop-down for editing & for filtering?

     

    This is how I've implemented things...

    ASPX page

    <telerik:RadGrid ID="RadGrid2" RenderMode="Lightweight" runat="server" AutoGenerateColumns="false" AllowSorting="True" AllowPaging="True" ShowStatusBar="true" OnItemDataBound="RadGrid2_ItemDataBound" AllowFilteringByColumn="True" >

        <MasterTableView Name="PlantTypeGrid" DataKeyNames="ID" CommandItemDisplay="Top" ShowFooter="false" >
            <HeaderStyle Font-Bold="true"/>
            <Columns>
                <telerik:GridEditCommandColumn ButtonType="FontIconButton" />
                <telerik:GridCheckBoxColumn DataField="Active" HeaderText="Active" />
                <telerik:GridBoundColumn DataField="Description" HeaderText="Description" AllowFiltering="false" />
                <telerik:GridTemplateColumn HeaderText="Process Unit Category" UniqueName="ProcessUnitCategoryID" AllowFiltering="true" >
                    <EditItemTemplate>
                        <telerik:RadDropDownList runat="server" ID="ddlProcessUnitCatTelerik" AppendDataBoundItems="true" >
                        </telerik:RadDropDownList>
                    </EditItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridButtonColumn ConfirmText="Delete this Plant Type?" ConfirmDialogType="RadWindow" ConfirmTitle="Delete" CommandName="Delete" ButtonType="FontIconButton" />
            </Columns>
        </MasterTableView>
        <PagerStyle Mode="NextPrevAndNumeric" />
      </telerik:RadGrid>

    VB Page

    Private Sub BuildPlantTypeGrid()
        Dim myCollection As EMSLookupItems = Nothing
        myCollection = _lookupMgr.GetPlantTypes(-1, -1)
        If Not myCollection.Count = 0 Then
            RadGrid2.DataSource = myCollection.Items
        Else
            RadGrid2.DataSource = ""
        End If
    End Sub

    Protected Sub RadGrid2_ItemDataBound(ByVal sender As Object, ByVal e As GridItemEventArgs)

        If TypeOf e.Item Is GridEditableItem Then
            If e.Item.IsInEditMode Then
                Dim item As GridEditableItem = CType(e.Item, GridEditableItem)
                Dim mySubCollection As EMSLookupItems = Nothing
                Dim ddlProcessUnitCatTelerik As RadDropDownList = CType(item.FindControl("ddlProcessUnitCatTelerik"), RadDropDownList)
                ddlProcessUnitCatTelerik.Width = Unit.Pixel(300)

                If Not ddlProcessUnitCatTelerik Is Nothing Then
                    mySubCollection = _lookupMgr.GetLookupValues("PROCESS_UNIT_CATEGORIES")
                    If Not mySubCollection.Count = 0 Then
                        ddlProcessUnitCatTelerik.DataSource = mySubCollection.Items
                        ddlProcessUnitCatTelerik.DataValueField = "ID"
                        ddlProcessUnitCatTelerik.DataTextField = "Description"
                    Else
                        ddlProcessUnitCatTelerik.DataSource = ""
                    End If
                    ddlProcessUnitCatTelerik.DataBind()
                    ddlProcessUnitCatTelerik.Items.Insert(0, "Please Select...")
                End If
            End If
        End If
    End Sub

     

  2. Attila Antal
    Admin
    Attila Antal avatar
    203 posts

    Posted 10 Dec 2018 Link to this post

    Hi Tonya,

    RadGrid will only have one filter regardless whether it is editing an item or not. You can use filter template if you would like to change the built-in filter controls, and that change applies in all scenarios.

    When using GridTemplateColumns, there are three different Templates that you can set. 


    Once Template is used, whether it is for filtering, editing or displaying data, the functionalities must be implemented by the developer manually. 

    Here are couple of online demos that you can check out and test. 

    I hope the suggestions from above will help get a better understanding on working with Template Columns.

    Please let us know if you have any questions.

    Kind regards,

    Attila Antal
    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.
  3. Tonya
    Tonya avatar
    19 posts
    Member since:
    Jul 2014

    Posted 10 Dec 2018 in reply to Attila Antal Link to this post

    Attila-

    Thanks! Now I'm 90% there!

    I understand now that I needed to add <ItemTemplate> & <FilterTemplate> to my code, to get the value to show on the page & to change the filter from a textbox filter to a drop-down. Now, my problem is that the drop-down for the filter is not being populated (see attached pic).

    I'm populating the drop-downs for my edit screen in the RadGrid2_ItemDataBound code (as shown in my original post). However, this only affects items inside the grid. Since the filter is outside the rows, I'm not sure how to access it to populate it.

    All of the examples I've seen show the drop-down filters get populated by using <asp:SqlDataSource>. Can this not be done in the VB code?

     

    ASPX page

    <telerik:RadGrid ID="RadGrid2" RenderMode="Lightweight" runat="server" AutoGenerateColumns="false" AllowSorting="True" AllowPaging="True" ShowStatusBar="true" OnItemDataBound="RadGrid2_ItemDataBound" AllowFilteringByColumn="True" >

     

    <telerik:GridTemplateColumn HeaderText="Process Unit Category" UniqueName="ProcessUnitCategoryID" AllowFiltering="true" >
        <ItemTemplate>
            <%# Eval("ProcessUnitCategoryID")%>
        </ItemTemplate>
        <EditItemTemplate>
            <telerik:RadDropDownList runat="server" ID="ddlProcessUnitCatTelerik" AppendDataBoundItems="true" >
            </telerik:RadDropDownList>
        </EditItemTemplate>
        <FilterTemplate>
            <telerik:RadDropDownList runat="server" ID="ddlProcessUnitCatFilter" AppendDataBoundItems="true"  >
            </telerik:RadDropDownList>
        </FilterTemplate>
    </telerik:GridTemplateColumn>

     

  4. Tonya
    Tonya avatar
    19 posts
    Member since:
    Jul 2014

    Posted 10 Dec 2018 in reply to Tonya Link to this post

    Here's the missing pic
  5. Tonya
    Tonya avatar
    19 posts
    Member since:
    Jul 2014

    Posted 10 Dec 2018 in reply to Tonya Link to this post

    Hopefully the jpg will get posted this time.
  6. Attila Antal
    Admin
    Attila Antal avatar
    203 posts

    Posted 13 Dec 2018 Link to this post

    Hi Tonya,

    I am wondering how is the data bound to RadDropDownList in the FilterTemplate? It is not happening automatically, so you will need to handle that too.

    Kind regards,
    Attila Antal
    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.
Back to Top