Showing and hiding filters on button press from programmatically created RadGrid

[Douglas]

I am creating a RadGrid programmatically in VB.Net and have set the AllowFilteringByColumn  = True and setup a CommandItemTemplate that contains a RadButton.

You can see the rendered grid in the attached Grid.png and the error I am getting in the Telerik.Web.UI.WebResource.axd. It looks like a problem with creating multiple filter items. Error description - "description "Sys.WebForms.PageRequestManagerServerErrorException: Multiple controls with the same ID 'FilterTextBox_CustomerNum' were found. FindControl requires that controls have unique IDs."" 

CustomerNum is the first column in the grid

Building the grid

Private Sub SetFilters(ByVal grid As RadGrid)

    grid.MasterTableView.AllowFilteringByColumn = gridConfiguration.EnableHeaderFiltering
    If gridConfiguration.EnableHeaderFiltering Then
        grid.MasterTableView.CommandItemTemplate = New RadGridCommandItemFilterTemplate
    End If

End Sub

CommandItemTemplate 

Friend Class RadGridCommandItemFilterTemplate
    Implements ITemplate

    Public showHideFilter As RadButton

    Public Sub New()
        MyBase.New()
    End Sub

    Public Sub InstantiateIn(ByVal container As Control) Implements ITemplate.InstantiateIn

        showHideFilter = New RadButton With {.ID = "showHideFilter", .Text = "Show / Hide Filters",
                                             .CommandName = "ShowHideFilters", .OnClientCheckedChanged = "showHideFilters()"}
        container.Controls.Add(showHideFilter)

    End Sub

End Class

Aspx

    <telerik:RadScriptManager ID="ScriptManager" runat="server">
    </telerik:RadScriptManager>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigureGrid">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfigureGrid" LoadingPanelID="AjaxLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadGrid runat="server" ID ="ConfigureGrid" GridLines="None" AutoGenerateColumns="false" Skin="WebBlue"/>

    <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel" runat="server"/>

    <asp:SqlDataSource ID="PrimaryDataSource" runat="server"/>
</form>

<script type="text/javascript">

    function showFilterItem() {
        var grid = $find("<%=ConfigureGrid.ClientID%>");
        if (grid) {
            grid.get_masterTableView().showFilterItem();
        }
    }

    function hideFilterItem() {
        var grid = $find("<%=ConfigureGrid.ClientID%>");
        if (grid) {
            grid.get_masterTableView().hideFilterItem();
        }
    }

    function showHideFilters() {
        var radButton = document.getElementById("showHideFilter");
        if (radButton) {
            if (radButton.checked) {
                showFilterItem();
            }
            else {
                hideFilterItem();
            }
        }
    }
</script>

[Princy]

Hi Douglas,

Such an error comes when you are trying to assign same ID for different controls. Please double check your columns declarations and see whether you are defining same IDs to some controls. Check if you are creating filter controls with same ID ( as the error indicates ). Provide your full code snippet if this doesn't help.

Thanks,
Princy

[Douglas]

Hi Princy,

The underlying query is returning 3 columns (Customer Num, Account & Parent) and I am creating columns on those names, with any spaces removed.

When I click the button the error occurrs as below

Error: Sys.WebForms.PageRequestManagerServerErrorException: Multiple controls with the same ID 'FilterTextBox_CustomerNum' were found. FindControl requires that controls have unique IDs.

I am not specifically creating the filter columns but using the grid.MasterTableView.AllowFilteringByColumn property.

[Douglas]

Attached is part of the DOM for the filters.

I did a search of the entire DOM for FilterTextBox_ and only found a single instance for each of the columns

[Princy]

Hi Douglas,

Please make sure all your columns have UniqueName generated. Please provide your full code snippet for further help.

Thanks,
Princy