Radgrid client-side filtering not working

[Brad Lewis]

I have a rad grid that populates and pages fine however when I try to filter based on controls in the filtertemplate the page postsback, but no filter is applied.
When debuging, the filterexpression is added to the mastertableview but the column has no filter applied. Using telerik version 2014.3.1209.45
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Layout/WebPortal.master" CodeBehind="CustomerNotes.aspx.vb" Inherits="Office.CustomerNotes" %>
<asp:Content ID="Content1" ContentPlaceHolderID="PageContentPlaceHolder" runat="server">

    <telerik:RadGrid runat="server" ID="grdNotes"  Width="1024" AllowSorting="true" DataSourceID="sdsNotes" AutoGenerateEditColumn="true" AutoGenerateColumns="false" AllowFilteringByColumn="true" 
                    ShowStatusBar="true" RegisterWithScriptManager="true" EnableLinqExpressions="false">
                    <MasterTableView DataKeyNames="ID" AllowSorting="true" AllowPaging="true" PageSize="30" TableLayout="Fixed" EditMode="InPlace" AllowAutomaticInserts="true" AllowFilteringByColumn="true">
                        <Columns>
                            <telerik:GridBoundColumn DataField="CustomerName" HeaderText="Customer Name" ReadOnly="true" AllowFiltering="true" AllowSorting="true" UniqueName="colCustomer">
                                <FilterTemplate>
                                    <telerik:RadComboBox ID="rcbCustomerName" runat="server" AppendDataBoundItems="true" DataSourceID="sdsCustomer" AutoPostBack="true" 
                                        DataTextField="Name" DataValueField="Name" OnClientSelectedIndexChanged="CustomerIndexChanged"
                                        SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("colCustomer").CurrentFilterValue%>'>
                                        <Items>
                                            <telerik:RadComboBoxItem Text="All" />
                                        </Items>
                                    </telerik:RadComboBox>
                                    <telerik:RadScriptBlock ID="rsbCustomer" runat="server">
                                        <script type="text/javascript">
                                            function CustomerIndexChanged(sender, args) {
                                                var tableView = $find("<%# TryCast(Container, GridItem).OwnerTableView.ClientID %>");
                                                tableView.filter("colCustomer", args.get_item().get_value(), Telerik.Web.UI.GridFilterFunction.EqualTo);
                                            }
                                        </script>
                                    </telerik:RadScriptBlock>
                                </FilterTemplate>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Note" HeaderText="Note" AllowSorting="true" AllowFiltering="false">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="NoteType" HeaderText="Note Type"  AllowSorting="true" AllowFiltering="true" UniqueName="colNoteType" >
                                <FilterTemplate>
                                    <telerik:RadComboBox ID="rcbNoteType" runat="server" AppendDataBoundItems="true" DataSourceID="sdsNoteType" DataTextField="Type" 
                                         DataValueField="Id" OnClientSelectedIndexChanged="NoteTypeIndexChanged" AutoPostBack="true"
                                         SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("colNoteType").CurrentFilterValue%>'>
                                        <Items>
                                            <telerik:RadComboBoxItem Text="All"  />
                                        </Items>
                                    </telerik:RadComboBox>
                                    <telerik:RadScriptBlock ID="rsbNoteType" runat="server">
                                        <script type="text/javascript">
                                            function NoteTypeIndexChanged(sender, args) {
                                                var tableView = $find("<%# TryCast(Container, GridItem).OwnerTableView.ClientID %>");
                                                tableView.filter("colNoteType", args.get_item().get_value(), Telerik.Web.UI.GridFilterFunction.EqualTo);
                                            }
                                        </script>
                                    </telerik:RadScriptBlock>

                                </FilterTemplate>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Name" HeaderText="Creator" ReadOnly="true" AllowSorting="true" AllowFiltering="true" UniqueName="colCreator">
                                <FilterTemplate>
                                    <telerik:RadComboBox ID="rcbCreator" runat="server" AppendDataBoundItems="true" DataSourceID="sdsCreator" DataTextField="Creator"
                                         DataValueField="Creator" AutoPostBack="true" OnClientSelectedIndexChanged="CreatorIndexChanged"
                                        SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("colCreator").CurrentFilterValue%>'>
                                        <Items>
                                            <telerik:RadComboBoxItem Text="All" />
                                        </Items>
                                    </telerik:RadComboBox>
                                    <telerik:RadScriptBlock ID="rsbCreator" runat="server">
                                        <script type="text/javascript">
                                            function CreatorIndexChanged(sender, args) {
                                                var tableView = $find("<%# TryCast(Container, GridItem).OwnerTableView.ClientID %>");
                                                tableView.filter("colCreator", args.get_item().get_value(), Telerik.Web.UI.GridFilterFunction.EqualTo);
                                            }
                                        </script>
                                    </telerik:RadScriptBlock>

                                </FilterTemplate>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="CreationDate" HeaderText="Creation Date" ReadOnly="true" DataType="System.DateTime" DataFormatString="{0:d}" AllowSorting="true" AllowFiltering="false"></telerik:GridBoundColumn>
                        </Columns>

                    </MasterTableView>
                </telerik:RadGrid>
    <asp:SqlDataSource runat="server" ID="sdsCreator" SelectCommand="SELECT DISTINCT c.id as ID,c.Name AS Creator FROM cis.CustomerToDoList ctl INNER JOIN cis.Creators c ON c.ID = ctl.CreatorID INNER JOIN cis.Creators c2 ON c2.ID = ctl.AssigneeID INNER JOIN cis.CustomerList cl ON cl.CustomerNo = ctl.CustomerNo WHERE Complete=0 AND ctl.DateDeleted IS NULL ORDER BY c.Name"  />
    <asp:SqlDataSource runat="server" ID="sdsNoteType" SelectCommand="Select id,type from cis.customernotetype order by type"/>
    <asp:SqlDataSource runat="server" id="sdsCustomer" SelectCommand="SELECT DISTINCT cl.CustomerNo,cl.Name FROM cis.CustomerToDoList ctl INNER JOIN cis.Creators c ON c.ID = ctl.CreatorID INNER JOIN cis.Creators c2 ON c2.ID = ctl.AssigneeID INNER JOIN cis.CustomerList cl ON cl.CustomerNo = ctl.CustomerNo WHERE Complete=0 AND ctl.DateDeleted IS NULL ORDER BY name" />
    <asp:SqlDataSource runat="server" ID="sdsNotes" SelectCommand="SELECT cn.id AS ID,cn.Note,cnt.Type AS NoteType,c.Name,cn.CreationDate,cl.Name AS CustomerName FROM cis.CustomerNotes cn INNER JOIN cis.customernotetype cnt ON cn.notetype = cnt.id INNER JOIN cis.CustomerList cl ON cl.CustomerNo = cn.CustomerNo INNER JOIN cis.Creators c ON c.ID = cn.CreatorID WHERE cl.Inactive=0"/>
</asp:Content>

[Angel Petrov]

Hello Brad,

From the provided code I noticed that the DataFields of the columns differ from the DataValueFields of the RadComboBoxes used as filter. Note that in order for the filter to apply they should be identical.

Please modify the code logic according to the above and let us know of the results.

Regards,
Angel Petrov
Telerik

 

 

[Brad Lewis]

The Radgrid still doesn't filter.

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Layout/WebPortal.master" CodeBehind="CustomerNotes.aspx.vb" Inherits="CIS.WebUI.Office.CustomerNotes" %>
<asp:Content ID="Content1" ContentPlaceHolderID="PageContentPlaceHolder" runat="server">

    <telerik:RadGrid runat="server" ID="grdNotes"  Width="800" AllowSorting="true" DataSourceID="sdsNotes" AutoGenerateEditColumn="true" AutoGenerateColumns="false" AllowFilteringByColumn="true"
                    ShowStatusBar="true" RegisterWithScriptManager="false" EnableLinqExpressions="false" AllowAutomaticUpdates="true">
                    <MasterTableView DataKeyNames="ID" AllowSorting="true" AllowPaging="true" PageSize="30" TableLayout="Fixed"
                        EditMode="InPlace" AllowAutomaticInserts="true" AllowFilteringByColumn="true" CommandItemDisplay="Top">
                        <Columns>
                            <telerik:GridBoundColumn DataField="CustomerName" HeaderText="Customer Name" ReadOnly="true" AllowFiltering="true" AllowSorting="true" UniqueName="colCustomer">
                                <FilterTemplate>
                                    <telerik:RadComboBox ID="rcbCustomerName" runat="server" AppendDataBoundItems="true" DataSourceID="sdsCustomer" AutoPostBack="true"
                                        DataTextField="CustomerName" DataValueField="CustomerName" OnClientSelectedIndexChanged="CustomerIndexChanged"
                                        SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("colCustomer").CurrentFilterValue%>'>
                                        <Items>
                                            <telerik:RadComboBoxItem Text="All" Value="" />
                                        </Items>
                                    </telerik:RadComboBox>
                                    <telerik:RadScriptBlock ID="rsbCustomer" runat="server">
                                        <script type="text/javascript">
                                            function CustomerIndexChanged(sender, args) {
                                                var tableView = $find("<%# TryCast(Container, GridItem).OwnerTableView.ClientID %>");
                                                tableView.filter("colCustomer", args.get_item().get_value(), Telerik.Web.UI.GridFilterFunction.EqualTo);
                                            }
                                        </script>
                                    </telerik:RadScriptBlock>
                                </FilterTemplate>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Note" HeaderText="Note" AllowSorting="true" AllowFiltering="false">
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn DataField="NoteType" HeaderText="Note Type"  AllowSorting="true" AllowFiltering="true" UniqueName="NoteType" >
                                <ItemTemplate>
                                    <%# Eval("NoteType") %>
                                </ItemTemplate>
                                <EditItemTemplate>
                                    <%--sdsNoteType--%>
                                    <telerik:RadComboBox ID="rcbNoteTypeChange" runat="server" DataSourceID="sdsNoteType" DataTextField="NoteType"
                                         DataValueField="NoteType" SelectedValue='<%# Bind("NoteID") %>' />
                                </EditItemTemplate>
                                <FilterTemplate>
                                    <telerik:RadComboBox ID="rcbNoteType" runat="server" AppendDataBoundItems="true" DataSourceID="sdsNoteType" DataTextField="NoteType"
                                         DataValueField="NoteType" OnClientSelectedIndexChanged="NoteTypeIndexChanged" AutoPostBack="true"
                                         SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("NoteType").CurrentFilterValue%>'>
                                        <Items>
                                            <telerik:RadComboBoxItem Text="All" Value="" />
                                        </Items>
                                    </telerik:RadComboBox>
                                    <telerik:RadScriptBlock ID="rsbNoteType" runat="server">
                                        <script type="text/javascript">
                                            function NoteTypeIndexChanged(sender, args) {
                                                var tableView = $find("<%# TryCast(Container, GridItem).OwnerTableView.ClientID %>");
                                                tableView.filter("NoteType", args.get_item().get_value(), Telerik.Web.UI.GridFilterFunction.EqualTo);
                                            }
                                        </script>
                                    </telerik:RadScriptBlock>
                                </FilterTemplate>

                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="Creator" HeaderText="Creator" ReadOnly="true" AllowSorting="true" AllowFiltering="true"
                                UniqueName="colCreator" ItemStyle-Width="150" HeaderStyle-Width="150">
                                <FilterTemplate>
                                    <telerik:RadComboBox ID="rcbCreator" runat="server" AppendDataBoundItems="true" DataSourceID="sdsCreator" DataTextField="Creator"
                                         DataValueField="Creator" AutoPostBack="true" OnClientSelectedIndexChanged="CreatorIndexChanged"
                                        SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("colCreator").CurrentFilterValue%>'>
                                        <Items>
                                            <telerik:RadComboBoxItem Text="All" Value="" />
                                        </Items>
                                    </telerik:RadComboBox>
                                    <telerik:RadScriptBlock ID="rsbCreator" runat="server">
                                        <script type="text/javascript">
                                            function CreatorIndexChanged(sender, args) {
                                                var tableView = $find("<%# TryCast(Container, GridItem).OwnerTableView.ClientID %>");
                                                tableView.filter("colCreator", args.get_item().get_value(), Telerik.Web.UI.GridFilterFunction.EqualTo);
                                            }
                                        </script>
                                    </telerik:RadScriptBlock>
                                </FilterTemplate>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="CreationDate" HeaderText="Creation Date" ReadOnly="true" DataType="System.DateTime" DataFormatString="{0:d}" AllowSorting="true" AllowFiltering="false"></telerik:GridBoundColumn>
                        </Columns>

                    </MasterTableView>
                </telerik:RadGrid>
    <asp:SqlDataSource runat="server" ID="sdsCreator" SelectCommand="SELECT DISTINCT c.id as CreatorID,c.Name AS Creator FROM cis.CustomerNotes cn INNER JOIN cis.Creators c ON c.ID = cn.CreatorID INNER JOIN cis.CustomerList cl ON cl.CustomerNo = cn.CustomerNo ORDER BY c.Name" />
    <asp:SqlDataSource runat="server" ID="sdsNoteType" SelectCommand="Select id AS NoteID,type AS NoteType from cis.customernotetype order by type" />
    <asp:SqlDataSource runat="server" id="sdsCustomer" SelectCommand="SELECT DISTINCT cl.CustomerNo,cl.Name AS CustomerName FROM cis.CustomerNotes cn INNER JOIN cis.Creators c ON c.ID = cn.CreatorID INNER JOIN cis.CustomerList cl ON cl.CustomerNo = cn.CustomerNo ORDER BY CustomerName"/>
    <asp:SqlDataSource runat="server" ID="sdsNotes" OnUpdating="sdsNotes_Updating"
        SelectCommand="SELECT cn.id AS ID,cn.Note,cnt.Type AS NoteType,cnt.ID AS NoteID,c.Name AS Creator,cn.CreationDate,cl.Name AS CustomerName FROM cis.CustomerNotes cn INNER JOIN cis.customernotetype cnt ON cn.notetype = cnt.id INNER JOIN cis.CustomerList cl ON cl.CustomerNo = cn.CustomerNo INNER JOIN cis.Creators c ON c.ID = cn.CreatorID WHERE cl.Inactive=0"
        UpdateCommand="UPDATE cis.CustomerNotes set Note=@note,NoteType=@NoteID where ID=@ID"">
    </asp:SqlDataSource>
</asp:Content>

[Angel Petrov]

Hello Brad,

Using the provided code I have assembled a sample web site and was able to reproduce the problem. It was caused by the fact that the AutoPostBack property of the filter combos was set to true. In such cases the combo will initiate the postback before the table view filter command.

Please set the AutoPostBack property of the combos to false and test the page again. Additionally in the current thread I am attaching the sample web site used for testing.

Regards,
Angel Petrov
Telerik