This is a migrated thread and some comments may be shown as answers.

Adding dropdown to grid header columns

4 Answers 434 Views

Grid

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

answered on 24 Aug 2012, 06:06 AM

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.

answered on 24 Aug 2012, 02:22 PM

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

Accepted

answered on 28 Aug 2012, 07:47 AM

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

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.