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
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
4 Answers, 1 is accepted
0

Shinu
Top achievements
Rank 2
answered on 24 Aug 2012, 06:06 AM
Hi Asok,
You can define a custom class to override the default filtering in RadGrid.
C#:
Also check the following demo which implements the same.
Grid / Filtering Template Columns
Thanks,
Shinu.
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());
}
}
Grid / Filtering Template Columns
Thanks,
Shinu.
0

Asok
Top achievements
Rank 1
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:
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
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
0
Accepted
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
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.
0

Asok
Top achievements
Rank 1
answered on 28 Aug 2012, 12:10 PM
Hi Eyup,
Thank you so much for resolving my issue. You are so wonderful!!!
Kindest Regards,
Asok
Thank you so much for resolving my issue. You are so wonderful!!!
Kindest Regards,
Asok