Need Help on Multi Checkbox Filtering Using RadComboBox inside a RadGrid

1 posts, 0 answers
  1. Barry
    Barry avatar
    2 posts
    Member since:
    Jul 2017

    Posted 02 Aug 2017 Link to this post

    Hello Telerik Team,

    <Reposting this thread from ComboBox forum to this Grid forum, as I thought it is more appropriate to put it here.>

    Original link: http://www.telerik.com/forums/need-help-on-radcombobox-multi-checkbox-filtering-not-working

     

    I can't seem to make multiple checkbox filtering work on a RadComboBox inside a RadGrid using a Filter Template.

    I have been working on the examples given on the thread below for several days already..

    http://www.telerik.com/forums/how-to-persist-dropdownlist-selected-index-and-value-on-postback-from-radgrid-filtertemplate#GW3MyQLmVEmy8XzsmrHzeQ

    Particularly, I used Eyup's sample solution of RadGridFilterComboClientAndServerDataBinding and modified the DataSource to have advance data binding, as I need to populate my RadComboBox in the code behind. But this sample code only supported single item filtering..

    So I used the code coming from SearchMultipleValues.aspx and SearchMultipleValues.aspx.cs to implement the multi checkbox filtering. This code can be found on Eyup's post below, inside RadGridFilterMultipleChecked.zip:

    http://www.telerik.com/support/code-library/multi-selection-radcombobox-for-filtering-grid#2351833

    Please check my combined aspx code and code behind below.
    ASPX Code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadGridFilterComboClientAndServer.aspx.cs" Inherits="RadGridFilterComboClientAndServer" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=2012.3.1308.35, PublicKeyToken=121fae78165ba3d4, Culture=neutral" %>
    <%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
        Namespace="System.Web.UI" TagPrefix="asp" %>
      
    <!DOCTYPE html>
      
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <script type="text/javascript">
                //Put your JavaScript code here.
            </script>
            <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
            </asp:ScriptManager>
            <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" CellSpacing="0"
                GridLines="None" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource" AllowFilteringByColumn="true"
                OnItemDataBound="RadGrid1_ItemDataBound" OnPreRender="RadGrid1_PreRender" OnItemCommand="RadGrid1_ItemCommand">
                <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
                    <Columns>
                        <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                            FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                            ReadOnly="True" SortExpression="OrderID" UniqueName="OrderIDClient">
                            <FilterTemplate>
                                <telerik:RadComboBox ID="RadComboBoxClientInner" Height="100px" AppendDataBoundItems="true"
                                    SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("OrderIDClient").CurrentFilterValue %>'
                                    OnDataBinding="RadComboBoxes_DataBinding" DataTextField="TextFieldName" DataValueField="ValueFieldName"
                                    runat="server" OnClientSelectedIndexChanged="CountryIndexChanged">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="All" />
                                    </Items>
                                </telerik:RadComboBox>
                                <telerik:RadScriptBlock ID="RadScriptBlock3" runat="server">
                                    <script type="text/javascript">
                                        function CountryIndexChanged(sender, args) {
                                            var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            tableView.filter("OrderIDClient", args.get_item().get_value(), "EqualTo");
                                        }
                                    </script>
                                </telerik:RadScriptBlock>
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                            FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                            ReadOnly="True" SortExpression="OrderID" UniqueName="OrderIDServer">
                            <FilterTemplate>
                                <telerik:RadComboBox ID="RadComboBoxServerInner" Height="100px" AppendDataBoundItems="true"
                                    SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("OrderIDServer").CurrentFilterValue %>'
                                    OnDataBinding="RadComboBoxes_DataBinding" DataTextField="TextFieldName" DataValueField="ValueFieldName"
                                    OnSelectedIndexChanged="RadComboBoxServerInner_SelectedIndexChanged"
                                    runat="server" AutoPostBack="true">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="All" />
                                    </Items>
                                </telerik:RadComboBox>
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                        <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
                            FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                            SortExpression="OrderDate" UniqueName="OrderDate">
                        </telerik:GridDateTimeColumn>
                        <telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
                            FilterControlAltText="Filter Freight column" HeaderText="Freight"
                            SortExpression="Freight" UniqueName="Freight">
                        </telerik:GridNumericColumn>
                        <telerik:GridBoundColumn DataField="ShipName"
                            FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
                            SortExpression="ShipName" UniqueName="ShipName">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ShipCountry"
                            FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
                            SortExpression="ShipCountry" UniqueName="ShipCountry">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Quantity"
                            FilterControlAltText="Filter Quantity column" HeaderText="Quantity"
                            SortExpression="Quantity" UniqueName="Quantity">
                            <FilterTemplate>
                                <telerik:RadComboBox ID="RadComboBoxQuantity" DataTextField="Quantity"
                                    DataValueField="Quantity" Height="100px" AppendDataBoundItems="true" CheckBoxes="true"
                                    runat="server" EmptyMessage="Select Quantity" Skin="Metro" Filter="Contains" OnDataBinding="RadComboBoxQuantity_DataBinding">
                                </telerik:RadComboBox>
                                <asp:ImageButton ID="ImageButton1" runat="server" AlternateText="Filter" ToolTip="Filter by Quantity" OnClick="ImageButton1_Click" ImageUrl="~/worldSearch.png" />
                            </FilterTemplate>
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </form>
    </body>
    </html>

     

    Code Behind:

     

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
      
    public partial class RadGridFilterComboClientAndServer : System.Web.UI.Page
    {
        bool isFiltered = false;
      
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            RadGrid1.DataSource = GetGridSource();
        }
        protected void RadComboBoxServerInner_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
        {
            GridFilteringItem filterItem = (sender as RadComboBox).NamingContainer as GridFilteringItem;
            filterItem.OwnerTableView.GetColumn("OrderIDServer").CurrentFilterValue = e.Value;
            filterItem.FireCommandEvent("Filter", new Pair("EqualTo", "OrderIDServer"));
        }
        private DataTable GetGridSource()
        {
            DataTable dataTable = new DataTable();
      
            DataColumn column = new DataColumn();
            column.DataType = Type.GetType("System.Int32");
            column.ColumnName = "OrderID";
            dataTable.Columns.Add(column);
      
            column = new DataColumn();
            column.DataType = Type.GetType("System.DateTime");
            column.ColumnName = "OrderDate";
            dataTable.Columns.Add(column);
      
            column = new DataColumn();
            column.DataType = Type.GetType("System.Decimal");
            column.ColumnName = "Freight";
            dataTable.Columns.Add(column);
      
            column = new DataColumn();
            column.DataType = Type.GetType("System.String");
            column.ColumnName = "ShipName";
            dataTable.Columns.Add(column);
      
            column = new DataColumn();
            column.DataType = Type.GetType("System.String");
            column.ColumnName = "ShipCountry";
            dataTable.Columns.Add(column);
      
            column = new DataColumn();
            column.DataType = Type.GetType("System.String");
            column.ColumnName = "Quantity";
            dataTable.Columns.Add(column);
      
            DataColumn[] PrimaryKeyColumns = new DataColumn[1];
            PrimaryKeyColumns[0] = dataTable.Columns["OrderID"];
            dataTable.PrimaryKey = PrimaryKeyColumns;
      
            for (int i = 0; i <= 80; i++)
            {
                DataRow row = dataTable.NewRow();
                row["OrderID"] = i + 1;
                row["OrderDate"] = DateTime.Now;
                row["Freight"] = (i + 1) + (i + 1) * 0.1 + (i + 1) * 0.01;
                row["ShipName"] = "Name " + (i + 1);
                row["ShipCountry"] = "Country " + (i + 1);
                row["Quantity"] = "Quantity " + (i + 1);
      
                dataTable.Rows.Add(row);
            }
      
            return dataTable;
        }
        protected void RadComboBoxes_DataBinding(object sender, EventArgs e)
        {
            RadComboBox combo = sender as RadComboBox;
            combo.DataSource = Enumerable.Range(1, 6).Select(
                x => new { ValueFieldName = x, TextFieldName = "ID " + x });
        }
      
        protected void RadComboBoxQuantity_DataBinding(object sender, EventArgs e)
        {
            RadComboBox combo = sender as RadComboBox;
            combo.DataSource = GetGridSource();
            combo.DataTextField = "Quantity";
        }
      
        protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
        {
            GridFilteringItem filterItem = (sender as ImageButton).NamingContainer as GridFilteringItem;
            RadComboBox combo = filterItem.FindControl("RadComboBoxQuantity") as RadComboBox;
      
            List<string> expressions = new List<string>();
            List<string> quantity = new List<string>();
            foreach (RadComboBoxItem item in combo.CheckedItems)
            {
                quantity.Add(item.Text);
                expressions.Add("(it[\"Quantity\"].ToString().Contains(\"" + item.Text + "\"))");
            }
            isFiltered = true;
            string value = string.Join("OR", expressions.ToArray());
            ViewState["QuantityFilterValue"] = string.IsNullOrEmpty(value) ? value : "(" + value + ")";
            ViewState["Quantity"] = quantity;
        }
      
        protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
        {
            if (e.CommandName == RadGrid.FilterCommandName)
            {
                isFiltered = true;
            }
        }
      
        protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridFilteringItem)
            {
                RadComboBox combo = (e.Item as GridFilteringItem).FindControl("RadComboBoxQuantity") as RadComboBox;
      
                if (ViewState["Quantity"] != null)
                {
                    foreach (string quantity in (List<string>)ViewState["Quantity"])
                    {
                        combo.FindItemByText(quantity).Checked = true;
                    }
                }
            }
        }
      
        protected void RadGrid1_PreRender(object sender, System.EventArgs e)
        {
            if (isFiltered)
            {
                string[] expressions = RadGrid1.MasterTableView.FilterExpression.Split(new string[] { "AND" }, StringSplitOptions.None);
                List<string> columnExpressions = new List<string>(expressions);
                foreach (string expression in columnExpressions)
                {
                    if (expression.Contains("[\"Quantity\"]"))
                    {
                        columnExpressions.Remove(expression);
                        break;
                    }
                }
                string finalExpression = string.Join("AND", columnExpressions.ToArray());
                string quantityFilterValue = (string)ViewState["QuantityFilterValue"];
                if (!string.IsNullOrEmpty(quantityFilterValue))
                {
                    if (!string.IsNullOrEmpty(finalExpression))
                    {
                        finalExpression += " AND ";
                    }
                    finalExpression += quantityFilterValue;
                }
                RadGrid1.MasterTableView.FilterExpression = finalExpression;
                RadGrid1.MasterTableView.Rebind();
            }
        }
    }

     

    I added a new column, "Quantity", which will be filtered using multi checkbox filtering. This is our focus which is not working.. This column is populated inside the GetGridSource(). Filter values are binded to the RadComboBox using RadComboBoxQuantity_DataBinding event, setting it to the same data source of the RadGrid. (I know I should bind distinct values here, but just for the purpose of an example I haven't updated the code yet.)

    Selecting several items from the combobox and clicking ImageButton1, multi checkbox filtering does not work..

    Note: I put Filter="Contains" in the RadComboBox property as I read somewhere here and in the documentation that this will enable the textfield in the combo box so the user can type, which I also need.

    I am currently stuck using Telerik.Web.UI, Version=2012.3.1308.35. Would anyone know why the multi checkbox filtering does not work?

    Any help is appreciated.. Thank you in advance.

Back to Top