Combobox Filter Column Issue

[Stephen]

Hi,

I am using two Comboxes in FilterTemplates in my grid in the following code. The filtering for "Priority" works just as intended, no issues or anything. It is the filtering for the  "visdrop" column that I am having trouble with. That data is bool and when I select True/False, it does in fact filter correctly. But when I try to select the "blank" option in the Combobox to remove the filter, the filter remains and the Combobox returns to its previous selection. What am I missing?

The Code:

<telerik:RadGrid ID="_rgProjectNews" runat="server" AllowPaging="True" OnNeedDataSource="rgProjectNews_NeedDataSource"
        CssClass="mainInnerContent" OnItemCommand="rgProjectNews_ItemCommand" OnItemDataBound="rgProjectNews_ItemDataBound"
        Skin="Office2007" AllowFilteringByColumn="true">
        <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="None" ClientDataKeyNames="Id">
            <Columns>
                <telerik:GridTemplateColumn AllowFiltering="false" UniqueName="TemplateEditColumn"
                    HeaderStyle-Width="25px">
                    <ItemTemplate>
                        <asp:ImageButton ID="_imgEdit" runat="server" ImageUrl="~/Theme/Img/Icons/page_edit.png"
                            ToolTip="Edit" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="Id" DataType="System.Int32" HeaderText="Id" SortExpression="Id"
                    UniqueName="Id" Visible="false">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="subject" HeaderText="Subject" SortExpression="subject"
                    UniqueName="subject" FilterControlWidth="95%">
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn UniqueName="visdrop" HeaderText="Visible" HeaderStyle-Width="50px">
                    <FilterTemplate>
                        <telerik:RadComboBox ID="_filtVisible" Width="50px" SelectedValue='<%# Container.OwnerTableView.GetColumn("VisibleCol").CurrentFilterValue %>'
                            runat="server" OnClientSelectedIndexChanged="VisibleIndexChangedStatus">
                            <Items>
                                <telerik:RadComboBoxItem Text="" Value="" />
                                <telerik:RadComboBoxItem Text="Yes" Value="True" />
                                <telerik:RadComboBoxItem Text="No" Value="False" />
                            </Items>
                        </telerik:RadComboBox>
                        <telerik:RadScriptBlock ID="_scriptT" runat="server">

                            <script type="text/javascript">
                                function VisibleIndexChangedStatus(sender, args) {
                                    var tableView = $find("<%# Container.OwnerTableView.ClientID %>");
                                    tableView.filter("VisibleCol", args.get_item().get_value(), "EqualTo");
                                }
                            </script>

                        </telerik:RadScriptBlock>
                    </FilterTemplate>
                    <ItemTemplate>
                        <telerik:RadComboBox ID="_cbVis" runat="server" Width="50px" SelectedValue='<%# Eval("Visible") %>'
                            OnSelectedIndexChanged="CbVisSelectedIndexChanged" AutoPostBack="True">
                            <Items>
                                <telerik:RadComboBoxItem Text="Yes" Value="True" />
                                <telerik:RadComboBoxItem Text="No" Value="False" />
                            </Items>
                        </telerik:RadComboBox>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="Visible" HeaderText="Visible" UniqueName="VisibleCol"
                    Display="false">
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn HeaderText="Priority" UniqueName="Priority" HeaderStyle-Width="75px">
                    <FilterTemplate>
                        <telerik:RadComboBox ID="_filtPriority" Width="70px" SelectedValue='<%# Container.OwnerTableView.GetColumn("PriorityReal").CurrentFilterValue %>'
                            runat="server" OnClientSelectedIndexChanged="SelectedIndexChangedStatus">
                            <Items>
                                <telerik:RadComboBoxItem Text="" Value="" />
                                <telerik:RadComboBoxItem Text="Urgent" Value="1" />
                                <telerik:RadComboBoxItem Text="High" Value="2" />
                                <telerik:RadComboBoxItem Text="Normal" Value="3" />
                            </Items>
                        </telerik:RadComboBox>
                        <telerik:RadScriptBlock ID="_scriptS" runat="server">

                            <script type="text/javascript">
                                function SelectedIndexChangedStatus(sender, args) {
                                    var tableView = $find("<%# Container.OwnerTableView.ClientID %>");
                                    tableView.filter("PriorityReal", args.get_item().get_value(), "EqualTo");
                                }
                            </script>

                        </telerik:RadScriptBlock>
                    </FilterTemplate>
                    <ItemTemplate>
                        <telerik:RadComboBox ID="cbPriority" Width="70px" SelectedValue='<%# Eval("Priority") %>'
                            runat="server" OnSelectedIndexChanged="PrioritySelectedIndexChanged" AutoPostBack="True">
                            <Items>
                                <telerik:RadComboBoxItem Text="Urgent" Value="1" />
                                <telerik:RadComboBoxItem Text="High" Value="2" />
                                <telerik:RadComboBoxItem Text="Normal" Value="3" />
                            </Items>
                        </telerik:RadComboBox>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="Priority" HeaderText="PriorityReal" UniqueName="PriorityReal"
                    Display="false">
                </telerik:GridBoundColumn>
                <telerik:GridDateTimeColumn DataField="LastModified" DataFormatString="{0:dd/MM/yyyy h:mm tt}"
                    HeaderText="Last Modified" HeaderStyle-Width="76px" UniqueName="LastModified"
                    AllowFiltering="false">
                </telerik:GridDateTimeColumn>
                <telerik:GridTemplateColumn UniqueName="deleteColumn" Groupable="False" HeaderStyle-Width="25px"
                    AllowFiltering="false">
                    <ItemTemplate>
                        <asp:ImageButton ID="_imgBtnDelete" CommandArgument='<%# Eval("Id") %>' CommandName="Delete"
                            OnClientClick="return confirm('Are you sure you want to delete this record?');"
                            ImageUrl="~/Theme/Img/Icons/cross.png" ToolTip="Delete" runat="server"></asp:ImageButton>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="place" UniqueName="place2" Visible="False">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings ClientEvents-OnRowDblClick="RowDblClick">
        </ClientSettings>
    </telerik:RadGrid>

[Princy]

Hello Stephen,

I tried the same scenario and worked as expected in my end. For filtering TemplateColumn you must set the DataField in TemplateColumn.
This ensures that the control properly retrieves the data on which the filtering pattern will be applied.
aspx:

<telerik:GridTemplateColumn UniqueName="visdrop" HeaderText="Visible" DataField="visdrop" HeaderStyle-Width="50px">
  <FilterTemplate>
      <telerik:RadComboBox ID="_filtVisible" Width="50px" SelectedValue='<%# Container.OwnerTableView.GetColumn("VisibleCol").CurrentFilterValue %>'
runat="server" OnClientSelectedIndexChanged="VisibleIndexChangedStatus">

       <Items>

         <telerik:RadComboBoxItem Text="" Value="" />

         <telerik:RadComboBoxItem Text="Yes" Value="True" />

         <telerik:RadComboBoxItem Text="No" Value="False" />

       </Items>
       </telerik:RadComboBox>
    <telerik:RadScriptBlock ID="_scriptT" runat="server">
       <script type="text/javascript">
         function VisibleIndexChangedStatus(sender, args)
          {

 var tableView = $find("<%# Container.OwnerTableView.ClientID %>");

 tableView.filter("VisibleCol", args.get_item().get_value(), "EqualTo");
          }
      </script>
    </telerik:RadScriptBlock>
 </FilterTemplate>

<ItemTemplate>

    <telerik:RadComboBox ID="_cbVis" runat="server" Width="50px" SelectedValue='<%# Eval("Visible") %>'

      OnSelectedIndexChanged="CbVisSelectedIndexChanged" AutoPostBack="True">

         <Items>

              <telerik:RadComboBoxItem Text="Yes" Value="True" />

              <telerik:RadComboBoxItem Text="No" Value="False" />

          </Items>

  </telerik:RadComboBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

Also check the following demo which explains the same.
Grid / Filtering Template Columns.

Thanks,
Princy.

[Stephen]

Sorry, I should have replied to this a while ago. I did indeed find the solution. Its different than what you stated, but you led me in the right direction.
Here is the working grid with correct filtering:

<telerik:RadGrid ID="_rgProjectNews" runat="server" AllowPaging="True" OnNeedDataSource="rgProjectNews_NeedDataSource"
        CssClass="mainInnerContent" OnItemCommand="rgProjectNews_ItemCommand" OnItemDataBound="rgProjectNews_ItemDataBound"
        Skin="Office2007" AllowFilteringByColumn="true">
        <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="None" ClientDataKeyNames="Id">
            <Columns>
                <telerik:GridTemplateColumn AllowFiltering="false" UniqueName="TemplateEditColumn"
                    HeaderStyle-Width="25px">
                    <ItemTemplate>
                        <asp:ImageButton ID="_imgEdit" runat="server" ImageUrl="~/Theme/Img/A2bIcons/EditViewDetails.png"
                            ToolTip="Edit" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="Id" DataType="System.Int32" HeaderText="Id" SortExpression="Id"
                    UniqueName="Id" Visible="false">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="subject" HeaderText="Subject" SortExpression="subject"
                    UniqueName="subject" FilterControlWidth="95%">
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn UniqueName="Visible" DataField="Visible" HeaderText="Visible" HeaderStyle-Width="50px">
                    <FilterTemplate>
                        <telerik:RadComboBox ID="_filtVisible" Width="50px" SelectedValue='<%# Container.OwnerTableView.GetColumn("Visible").CurrentFilterValue %>'
                            runat="server" OnClientSelectedIndexChanged="VisibleIndexChangedStatus">
                            <Items>
                                <telerik:RadComboBoxItem Text="" Value="" />
                                <telerik:RadComboBoxItem Text="Yes" Value="True" />
                                <telerik:RadComboBoxItem Text="No" Value="False" />
                            </Items>
                        </telerik:RadComboBox>
                        <telerik:RadScriptBlock ID="_scriptT" runat="server">

                            <script type="text/javascript">
                                function VisibleIndexChangedStatus(sender, args) {
                                    var tableView = $find("<%# Container.OwnerTableView.ClientID %>");
                                    var filterVal = args.get_item().get_value();
                                    if (filterVal == "") {
                                        tableView.filter("Visible", filterVal, "NoFilter");
                                    }
                                    else {
                                        tableView.filter("Visible", filterVal, "EqualTo");
                                    }
                                }
                            </script>

                        </telerik:RadScriptBlock>
                    </FilterTemplate>
                    <ItemTemplate>
                        <telerik:RadComboBox ID="_cbVis" runat="server" Width="50px" SelectedValue='<%# Eval("Visible") %>'
                            OnSelectedIndexChanged="CbVisSelectedIndexChanged" AutoPostBack="True">
                            <Items>
                                <telerik:RadComboBoxItem Text="Yes" Value="True" />
                                <telerik:RadComboBoxItem Text="No" Value="False" />
                            </Items>
                        </telerik:RadComboBox>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings ClientEvents-OnRowDblClick="RowDblClick">
        </ClientSettings>
    </telerik:RadGrid>

Notice :
1. You have to split the javascript for the filter into two if-statements so you can set "NoFilter" .
2. You can reduce the amount of GridBoundColumns by setting the DataField of the Template Column and using Eval('').