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

 

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. 

• FilterTemplate: controls in this template will be used for filtering and will be there whether or not editing the item. Also see Filter Template and Custom Columns
• ItemTemplate: Controls or data in this template will be displayed by the grid (when items is not in edit mode)
• EditItemTemplate: Controls in this template will be used for editing the selected row

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. 

• RadGrid - Telerik ASP.NET Grid
• RadGrid - Filter Templates
• Grid - Custom Sorting
• Grid - Column Types
• Grid - Combo in Grid
• ComboBox - Grid Filtered by Combo
• Grid - DropDownTree in Grid

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

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

 

 

Here's the missing pic

Hopefully the jpg will get posted this time.

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