Adding dropdown to grid header columns

[Asok]

Hello,

I want to add ComboBox to RAD Grid header columns. For e.g. I have many columns in RAD Grid and each column header will have a dropdown with items. On selecting the drop down the grid column get populated with the data related to the field column from database. Please see the attached image to get more idea on my request.

Is this possible? Please advise.

Thank you,
Asok

[Shinu]

Hi Asok,

You can define a custom class to override the default filtering in RadGrid.

C#:

public class MyCustomFilteringColumn : GridTemplateColumn
{
 public DataTable GetDataTable(string queryString)
 {
            string ConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
            SqlConnection MySqlConnection = new SqlConnection(ConnString);
            SqlDataAdapter MySqlDataAdapter = new SqlDataAdapter();
            MySqlDataAdapter.SelectCommand = new SqlCommand(queryString, MySqlConnection);

            DataTable myDataTable = new DataTable();
            MySqlConnection.Open();
            try
            {
                MySqlDataAdapter.Fill(myDataTable);
            }
            finally
            {
                MySqlConnection.Close();
            }

            return myDataTable;
  }
protected override void SetupFilterControls(TableCell cell)
        {
            RadComboBox rcBox = new RadComboBox();
            rcBox.ID = "DropDownList1";
            rcBox.AutoPostBack = true;
            rcBox.DataTextField = this.DataField;
            rcBox.DataValueField = this.DataField;
            rcBox.SelectedIndexChanged += rcBox_SelectedIndexChanged;
            DataTable table = GetDataTable(string.Format("SELECT DISTINCT {0} FROM {1}", this.DataField, "Customers"));
            DataRow row = table.NewRow();
            row[this.DataField] = "";
            table.Rows.InsertAt(row, 0);
            rcBox.DataSource = table;
            cell.Controls.Add(rcBox);
        }

        protected override void SetCurrentFilterValueToControl(TableCell cell)
        {
            if (!(this.CurrentFilterValue == ""))
            {
                ((RadComboBox)cell.Controls[0]).Items.FindItemByText(this.CurrentFilterValue).Selected = true;
            }
        }

        protected override string GetCurrentFilterValueFromControl(TableCell cell)
        {
            string currentValue = ((RadComboBox)cell.Controls[0]).SelectedItem.Value;
            this.CurrentFilterFunction = (currentValue != "")? GridKnownFunction.EqualTo : GridKnownFunction.NoFilter;
            return currentValue;
        }

        private void rcBox_SelectedIndexChanged(object sender, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
        {
            ((GridFilteringItem)(((RadComboBox)sender).Parent.Parent)).FireCommandEvent("Filter", new Pair());
        }
    }

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

Thanks,
Shinu.

[Asok]

Hello Shinu,

Thank you for your response. However my requirement is to filter the column based on filtering the header column which is dropdown.
All the header columns will be dropdown and I cannot set the datafield initially. The datafield of the column will be the value selected from the header dropdown. My code is below.

ASPX:

<telerik:RadGrid AllowSorting="True" ID="grdTrucks" AllowPaging="True" runat="server"
                Skin="Office2007" AllowMultiRowEdit="false" GridLines="None" AutoGenerateColumns="False"
                ShowDesignTimeSmartTagMessage="False" Width="99%" AllowMultiRowSelection="true"
                PageSize="50" EnableLinqExpressions="false"
                OnNeedDataSource="grdTrucks_NeedDataSource" OnPageIndexChanged="grdTrucks_PageIndexChanged"
                OnSortCommand="grdTrucks_SortCommand" AllowFilteringByColumn="True"
                onitemdatabound="grdTrucks_ItemDataBound" EnableHeaderContextMenu="true">
                <GroupingSettings CaseSensitive="false" />
                <MasterTableView TableLayout="Auto" DataKeyNames="Id" CommandItemDisplay="Top" ClientDataKeyNames="Id" AllowFilteringByColumn="true">
                    <CommandItemTemplate>
                        <telerik:RadToolBar ID="grdTrucksToolBar" runat="server" OnClientButtonClicking="onToolBarClientButtonClicking"
                            Skin="Office2007" Width="100%">
                            <Items>
                                <telerik:RadToolBarButton CausesValidation="true" CommandName="EditSelected" Value="1" ImageUrl="~/icons/edit.png">
                                </telerik:RadToolBarButton>
                                <telerik:RadToolBarButton CausesValidation="true" CommandName="InitInsert" Value="2" ImageUrl="~/icons/Add.png">
                                </telerik:RadToolBarButton>
                                <telerik:RadToolBarButton CausesValidation="false" CommandName="DeleteSelected" Value="3" ImageUrl="~/icons/delete.png">
                                </telerik:RadToolBarButton>
                                <telerik:RadToolBarButton CommandName="RebindGrid" CausesValidation="true" Value="4" ImageUrl="~/icons/refresh.png">
                                </telerik:RadToolBarButton>
                                <telerik:RadToolBarButton CommandName="ExportToExcel" ImageUrl="~/icons/excel.jpg"></telerik:RadToolBarButton>
                            </Items>
                        </telerik:RadToolBar>
                    </CommandItemTemplate>
                    <Columns>
                        <telerik:GridBoundColumn DataField="Id" HeaderText="Id" Display="False" SortExpression="Id"
                            UniqueName="Id">
                            <HeaderStyle Width="0px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn UniqueName="TemplateHeaderColumn1" FilterControlWidth="70px">
                            <HeaderTemplate>
                                <telerik:RadComboBox ID="ddlColumn1" runat="server" Skin="Office2007" Width="95px">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="Nick Name" Value="a.nickName" runat="server" />
                                        <telerik:RadComboBoxItem Text="Days on Lot" Value="DATEDIFF(CURDATE(),e.datePurchased)AS daysOnLot" runat="server" />
                                        <telerik:RadComboBoxItem Text="Stock Number" Value="a.stockNumber" runat="server" />
                                        <telerik:RadComboBoxItem Text="Manufacturer" Value="c.manufacturer" runat="server" />
                                        <telerik:RadComboBoxItem Text="Model" Value="d.model" runat="server" />
                                        <telerik:RadComboBoxItem Text="VIN" Value="CASE WHEN (a.vin IS NULL OR a.vin='') THEN ' ' ELSE a.vin END AS vin" runat="server" />
                                        <telerik:RadComboBoxItem Text="Sale Type" Value="b.name AS typeOfSale" runat="server" />
                                    </Items>
                                </telerik:RadComboBox>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:Label ID="lblColumn1" runat="server" Width="95px"></asp:Label>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn UniqueName="TemplateHeaderColumn2" FilterControlWidth="50px">
                            <HeaderTemplate>
                                <telerik:RadComboBox ID="ddlColumn2" runat="server" Skin="Office2007" Width="75px" OnSelectedIndexChanged="ToggleSelectedState" AutoPostBack="true">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="Nick Name" Value="a.nickName" runat="server" />
                                        <telerik:RadComboBoxItem Text="Days on Lot" Value="DATEDIFF(CURDATE(),e.datePurchased)AS daysOnLot" runat="server" />
                                        <telerik:RadComboBoxItem Text="Stock Number" Value="a.stockNumber" runat="server" />
                                        <telerik:RadComboBoxItem Text="Manufacturer" Value="c.manufacturer" runat="server" />
                                        <telerik:RadComboBoxItem Text="Model" Value="d.model" runat="server" />
                                        <telerik:RadComboBoxItem Text="VIN" Value="CASE WHEN (a.vin IS NULL OR a.vin='') THEN ' ' ELSE a.vin END AS vin" runat="server" />
                                        <telerik:RadComboBoxItem Text="Sale Type" Value="b.name AS typeOfSale" runat="server" />
                                    </Items>
                                </telerik:RadComboBox>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:Label ID="lblColumn2" runat="server" Width="75px"></asp:Label>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn UniqueName="TemplateHeaderColumn3" FilterControlWidth="50px">
                            <HeaderTemplate>
                                <telerik:RadComboBox ID="ddlColumn3" runat="server" Skin="Office2007" Width="75px" OnSelectedIndexChanged="ToggleSelectedState" AutoPostBack="true">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="Nick Name" Value="a.nickName" runat="server" />
                                        <telerik:RadComboBoxItem Text="Days on Lot" Value="DATEDIFF(CURDATE(),e.datePurchased)AS daysOnLot" runat="server" />
                                        <telerik:RadComboBoxItem Text="Stock Number" Value="a.stockNumber" runat="server" Selected="true" />
                                        <telerik:RadComboBoxItem Text="Manufacturer" Value="c.manufacturer" runat="server" />
                                        <telerik:RadComboBoxItem Text="Model" Value="d.model" runat="server" />
                                        <telerik:RadComboBoxItem Text="VIN" Value="CASE WHEN (a.vin IS NULL OR a.vin='') THEN ' ' ELSE a.vin END AS vin" runat="server" />
                                        <telerik:RadComboBoxItem Text="Sale Type" Value="b.name AS typeOfSale" runat="server" />
                                    </Items>
                                </telerik:RadComboBox>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:Label ID="lblColumn3" runat="server" Width="75px"></asp:Label>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn UniqueName="TemplateHeaderColumn4" FilterControlWidth="70px">
                            <HeaderTemplate>
                                <telerik:RadComboBox ID="ddlColumn4" runat="server" Skin="Office2007" Width="95px" OnSelectedIndexChanged="ToggleSelectedState" AutoPostBack="true">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="Nick Name" Value="a.nickName" runat="server" />
                                        <telerik:RadComboBoxItem Text="Days on Lot" Value="DATEDIFF(CURDATE(),e.datePurchased)AS daysOnLot" runat="server" />
                                        <telerik:RadComboBoxItem Text="Stock Number" Value="a.stockNumber" runat="server" />
                                        <telerik:RadComboBoxItem Text="Manufacturer" Value="c.manufacturer" runat="server" Selected="true" />
                                        <telerik:RadComboBoxItem Text="Model" Value="d.model" runat="server" />
                                        <telerik:RadComboBoxItem Text="VIN" Value="CASE WHEN (a.vin IS NULL OR a.vin='') THEN ' ' ELSE a.vin END AS vin" runat="server" />
                                        <telerik:RadComboBoxItem Text="Sale Type" Value="b.name AS typeOfSale" runat="server" />
                                    </Items>
                                </telerik:RadComboBox>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:Label ID="lblColumn4" runat="server" Width="95px"></asp:Label>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn UniqueName="TemplateHeaderColumn5" FilterControlWidth="40px">
                            <HeaderTemplate>
                                <telerik:RadComboBox ID="ddlColumn5" runat="server" Skin="Office2007" Width="65px" OnSelectedIndexChanged="ToggleSelectedState" AutoPostBack="true">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="Nick Name" Value="a.nickName" runat="server" />
                                        <telerik:RadComboBoxItem Text="Days on Lot" Value="DATEDIFF(CURDATE(),e.datePurchased)AS daysOnLot" runat="server" />
                                        <telerik:RadComboBoxItem Text="Stock Number" Value="a.stockNumber" runat="server" />
                                        <telerik:RadComboBoxItem Text="Manufacturer" Value="c.manufacturer" runat="server" />
                                        <telerik:RadComboBoxItem Text="Model" Value="d.model" runat="server" Selected="true" />
                                        <telerik:RadComboBoxItem Text="VIN" Value="CASE WHEN (a.vin IS NULL OR a.vin='') THEN ' ' ELSE a.vin END AS vin" runat="server" />
                                        <telerik:RadComboBoxItem Text="Sale Type" Value="b.name AS typeOfSale" runat="server" />
                                    </Items>
                                </telerik:RadComboBox>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:Label ID="lblColumn5" runat="server" Width="65px"></asp:Label>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn UniqueName="TemplateHeaderColumn6" FilterControlWidth="50px">
                            <HeaderTemplate>
                                <telerik:RadComboBox ID="ddlColumn6" runat="server" Skin="Office2007" Width="75px" OnSelectedIndexChanged="ToggleSelectedState" AutoPostBack="true">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="Nick Name" Value="a.nickName" runat="server" />
                                        <telerik:RadComboBoxItem Text="Days on Lot" Value="DATEDIFF(CURDATE(),e.datePurchased)AS daysOnLot" runat="server" />
                                        <telerik:RadComboBoxItem Text="Stock Number" Value="a.stockNumber" runat="server" />
                                        <telerik:RadComboBoxItem Text="Manufacturer" Value="c.manufacturer" runat="server" />
                                        <telerik:RadComboBoxItem Text="Model" Value="d.model" runat="server" />
                                        <telerik:RadComboBoxItem Text="VIN" Value="CASE WHEN (a.vin IS NULL OR a.vin='') THEN ' ' ELSE a.vin END AS vin" runat="server" Selected="true" />
                                        <telerik:RadComboBoxItem Text="Sale Type" Value="b.name AS typeOfSale" runat="server" />
                                    </Items>
                                </telerik:RadComboBox>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:Label ID="lblColumn6" runat="server" Width="75px"></asp:Label>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn UniqueName="TemplateHeaderColumn7" FilterControlWidth="60px">
                            <HeaderTemplate>
                                <telerik:RadComboBox ID="ddlColumn7" runat="server" Skin="Office2007" Width="85px" OnSelectedIndexChanged="ToggleSelectedState" AutoPostBack="true">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="Nick Name" Value="a.nickName" runat="server" />
                                        <telerik:RadComboBoxItem Text="Days on Lot" Value="DATEDIFF(CURDATE(),e.datePurchased)AS daysOnLot" runat="server" />
                                        <telerik:RadComboBoxItem Text="Stock Number" Value="a.stockNumber" runat="server" />
                                        <telerik:RadComboBoxItem Text="Manufacturer" Value="c.manufacturer" runat="server" />
                                        <telerik:RadComboBoxItem Text="Model" Value="d.model" runat="server" />
                                        <telerik:RadComboBoxItem Text="VIN" Value="CASE WHEN (a.vin IS NULL OR a.vin='') THEN ' ' ELSE a.vin END AS vin" runat="server" />
                                        <telerik:RadComboBoxItem Text="Sale Type" Value="b.name AS typeOfSale" runat="server" Selected="true" />
                                    </Items>
                                </telerik:RadComboBox>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:Label ID="lblColumn7" runat="server" Width="85px"></asp:Label>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridTemplateColumn HeaderText="Status" SortExpression="stat" UniqueName="stat" DataField="stat" FilterControlWidth="50px">
                            <FilterTemplate>
                                <telerik:RadComboBox ID="RadComboBoxStatus" DataTextField="stat" DataSource='<%#fillStatusDDL()%>'
                                    DataValueField="stat" Height="200px" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("stat").CurrentFilterValue %>'
                                    runat="server" OnClientSelectedIndexChanged="StatusIndexChanged" Width="60px">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="All" />
                                    </Items>
                                </telerik:RadComboBox>
                                <telerik:RadScriptBlock ID="RadScriptBlock8" runat="server">
                                    <script type="text/javascript">
                                        function StatusIndexChanged(sender, args) {
                                            var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
                                            tableView.filter("stat", args.get_item().get_value(), "EqualTo");
                                        }
                                    </script>
                                </telerik:RadScriptBlock>
                            </FilterTemplate>
                            <ItemTemplate>
                                <asp:Label ID="lbl_Status" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "stat") %>'></asp:Label>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="Stat" ReadOnly="True" Visible="False" SortExpression="Stat"
                            UniqueName="Stat">
                            <HeaderStyle Width="0px" />
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings>
                    <ClientEvents OnRowContextMenu="RowContextMenu"></ClientEvents>
                    <Selecting AllowRowSelect="true" />
                </ClientSettings>
                <PagerStyle Mode="NextPrevAndNumeric" />
            </telerik:RadGrid>

So here if I select "nick name" in column 1, the entire columns holds nickname value from database, If I select nickname in column 3 then entire column 3 holds nick name value from database. The user can select any drop down value from header and that value replaces the column from database.

Thank you,
Asok

[Eyup]

Hello Asok,

I have already replied to your support ticket, however, I will repeat the post here so others with relative issues could check the discussion.

Please note that the requested functionality could be very tricky and it is not a supported and out-of-scope scenario. Nevertheless, I could suggest you two ways to try to achieve your desired behavior.

One possible approach is to create your entire RadGrid programmatically on Page_Init and re-structure it on posbacks according to the comboboxes' selections:
Programmatic Creation
Changing the Grid Structure Dynamically on Postback

An alternative approach would be to initially load the grid with the datafields content and then on combo items selected event swap the columns order accordingly. Please check the attached application and try to make best avail out of it.

I hope this will prove helpful.

Regards,
Eyup
the Telerik team

[Asok]

Hi Eyup,

Thank you so much for resolving my issue. You are so wonderful!!!

Kindest Regards,
Asok