I have a Radio Button in header template of Rad grid columns. When user selects the radiobutton that particular column should be highlighted remaining should be greyed out.
<telerik:GridTemplateColumn DataField="BR" UniqueName="BR" HeaderStyle-Font-Bold="true" DataType="System.Double" HeaderText="BR" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>
<asp:RadioButton ID="rbBR" Text="Board Repair" runat="server" OnCheckedChanged="rbBR_CheckedChanged" AutoPostBack="true" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lbBR" runat="server" Text= '<%# DataBinder.Eval(Container.DataItem,"BR") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
Please let me know how to accomplish this.
<telerik:GridTemplateColumn DataField="BR" UniqueName="BR" HeaderStyle-Font-Bold="true" DataType="System.Double" HeaderText="BR" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>
<asp:RadioButton ID="rbBR" Text="Board Repair" runat="server" OnCheckedChanged="rbBR_CheckedChanged" AutoPostBack="true" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lbBR" runat="server" Text= '<%# DataBinder.Eval(Container.DataItem,"BR") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
Please let me know how to accomplish this.
6 Answers, 1 is accepted
0

Princy
Top achievements
Rank 2
answered on 23 Apr 2014, 12:42 PM
Hi Neetha,
Please try the following JavaScript code snippet to achieve your scenario.
ASPX:
JavaScript:
Thanks,
Princy.
Please try the following JavaScript code snippet to achieve your scenario.
ASPX:
...
<
HeaderTemplate
>
<
asp:RadioButton
ID
=
"OrderID"
Text
=
"OrderID"
runat
=
"server"
onclick
=
"highlightcolumn(this);"
/>
</
HeaderTemplate
>
...
JavaScript:
<script type=
"text/javascript"
>
function
highlightcolumn(sender) {
var
columnName = sender.value;
var
OrderGrid = $find(
"<%=radgrdOrders.ClientID %>"
);
var
MasterTable = OrderGrid.get_masterTableView();
var
DataColumn = MasterTable.get_columns();
for
(
var
i = 0; i < DataColumn.length; i++) {
if
(DataColumn[i].get_uniqueName() == columnName) {
var
DataRow = MasterTable.get_dataItems();
for
(
var
j = 0; j < DataRow.length; j++) {
MasterTable.getCellByColumnUniqueName(DataRow[j], DataColumn[i].get_uniqueName()).bgColor =
"Yellow"
;
}
}
else
{
var
DataRow = MasterTable.get_dataItems();
for
(
var
j = 0; j < DataRow.length; j++) {
MasterTable.getCellByColumnUniqueName(DataRow[j], DataColumn[i].get_uniqueName()).bgColor =
"Gray"
;
}
}
}
}
</script>
Thanks,
Princy.
0

Neetha
Top achievements
Rank 1
answered on 23 Apr 2014, 03:27 PM
Hi Princy,
this is not working.
function highlightcolumn(sender) {
var columnName = sender.value;
var OrderGrid = $find("<%=RadGrid1.ClientID %>");
var MasterTable = OrderGrid.get_masterTableView();
var DataColumn = MasterTable.get_columns();
for (var i = 0; i < DataColumn.length; i++) {
if (DataColumn[i].get_uniqueName() === columnName) {
var DataRow = MasterTable.get_dataItems();
for (var j = 0; j < DataRow.length; j++) {
MasterTable.getCellByColumnUniqueName(DataRow[j], DataColumn[i].get_uniqueName()).bgColor = "Yellow";
}
}
else {
var DataRow1 = MasterTable.get_dataItems();
for (var j = 0; j < DataRow1.length; j++) {
MasterTable.getCellByColumnUniqueName(DataRow1[j], DataColumn[i].get_uniqueName()).bgColor = "Gray";
}
}
}
}
<telerik:GridTemplateColumn DataField="Field Service" UniqueName="FieldService" HeaderStyle-Font-Bold="true" DataType="System.Double" HeaderText="Field Service" >
<HeaderTemplate>
<asp:RadioButton ID="rbFS" Text="Field Service" runat="server" OnCheckedChanged="rbFS_CheckedChanged" AutoPostBack="true" onclick="highlightcolumn(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lbFS" runat="server" Text= '<%# DataBinder.Eval(Container.DataItem,"Field Service") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
protected void rbFS_CheckedChanged(object sender, EventArgs e)
{
GridHeaderItem headerItem = (GridHeaderItem)RadGrid1.MasterTableView.GetItems(GridItemType.Header)[0];
RadioButton rbFS = (RadioButton)headerItem.FindControl("rbFS");
if (rbFS.Checked == true)
{
RadioButton rbTotal = (RadioButton)headerItem.FindControl("rbTotal");
rbTotal.Checked = false;
RadioButton rbBR= (RadioButton)headerItem.FindControl("rbBR");
rbBR.Checked = false;
RadioButton rbOm = (RadioButton)headerItem.FindControl("rbOmron");
rbOm.Checked = false;
RadioButton rbPar = (RadioButton)headerItem.FindControl("rbParker");
rbPar.Checked = false;
RadioButton rbSMC = (RadioButton)headerItem.FindControl("rbSMC");
rbSMC.Checked = false;
RadioButton rbYV = (RadioButton)headerItem.FindControl("rbYV");
rbYV.Checked = false;
RadioButton rbYM = (RadioButton)headerItem.FindControl("rbYM");
rbYM.Checked = false;
RadioButton rbMfg = (RadioButton)headerItem.FindControl("rbMfg");
rbMfg.Checked = false;
GetData("Field Service");
GetQuarterData("Field Service");
GetGridData("Field Service", 1);
}
}
Please let me know what needs to be changed? if not this can be added in checkedChanged event too. I have 7 columns in this grid with radio buttons in header
this is not working.
function highlightcolumn(sender) {
var columnName = sender.value;
var OrderGrid = $find("<%=RadGrid1.ClientID %>");
var MasterTable = OrderGrid.get_masterTableView();
var DataColumn = MasterTable.get_columns();
for (var i = 0; i < DataColumn.length; i++) {
if (DataColumn[i].get_uniqueName() === columnName) {
var DataRow = MasterTable.get_dataItems();
for (var j = 0; j < DataRow.length; j++) {
MasterTable.getCellByColumnUniqueName(DataRow[j], DataColumn[i].get_uniqueName()).bgColor = "Yellow";
}
}
else {
var DataRow1 = MasterTable.get_dataItems();
for (var j = 0; j < DataRow1.length; j++) {
MasterTable.getCellByColumnUniqueName(DataRow1[j], DataColumn[i].get_uniqueName()).bgColor = "Gray";
}
}
}
}
<telerik:GridTemplateColumn DataField="Field Service" UniqueName="FieldService" HeaderStyle-Font-Bold="true" DataType="System.Double" HeaderText="Field Service" >
<HeaderTemplate>
<asp:RadioButton ID="rbFS" Text="Field Service" runat="server" OnCheckedChanged="rbFS_CheckedChanged" AutoPostBack="true" onclick="highlightcolumn(this);" />
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lbFS" runat="server" Text= '<%# DataBinder.Eval(Container.DataItem,"Field Service") %>'></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
protected void rbFS_CheckedChanged(object sender, EventArgs e)
{
GridHeaderItem headerItem = (GridHeaderItem)RadGrid1.MasterTableView.GetItems(GridItemType.Header)[0];
RadioButton rbFS = (RadioButton)headerItem.FindControl("rbFS");
if (rbFS.Checked == true)
{
RadioButton rbTotal = (RadioButton)headerItem.FindControl("rbTotal");
rbTotal.Checked = false;
RadioButton rbBR= (RadioButton)headerItem.FindControl("rbBR");
rbBR.Checked = false;
RadioButton rbOm = (RadioButton)headerItem.FindControl("rbOmron");
rbOm.Checked = false;
RadioButton rbPar = (RadioButton)headerItem.FindControl("rbParker");
rbPar.Checked = false;
RadioButton rbSMC = (RadioButton)headerItem.FindControl("rbSMC");
rbSMC.Checked = false;
RadioButton rbYV = (RadioButton)headerItem.FindControl("rbYV");
rbYV.Checked = false;
RadioButton rbYM = (RadioButton)headerItem.FindControl("rbYM");
rbYM.Checked = false;
RadioButton rbMfg = (RadioButton)headerItem.FindControl("rbMfg");
rbMfg.Checked = false;
GetData("Field Service");
GetQuarterData("Field Service");
GetGridData("Field Service", 1);
}
}
Please let me know what needs to be changed? if not this can be added in checkedChanged event too. I have 7 columns in this grid with radio buttons in header
0

Princy
Top achievements
Rank 2
answered on 24 Apr 2014, 04:07 AM
Hi Neetha,
Please have a look into the sample code snippet which works fine at my end. From your code I noticed that you are using server side OnCheckedChanged event and you are setting AutoPostBack as true, please remove that from your code.
ASPX:
JavaScript:
Let me know if you have any concern.
Thanks,
Princy.
Please have a look into the sample code snippet which works fine at my end. From your code I noticed that you are using server side OnCheckedChanged event and you are setting AutoPostBack as true, please remove that from your code.
ASPX:
<
telerik:RadGrid
ID
=
"radgrdOrders"
runat
=
"server"
DataSourceID
=
"SqlDataSource1"
AutoGenerateColumns
=
"false"
>
<
MasterTableView
>
<
Columns
>
<
telerik:GridTemplateColumn
DataField
=
"OrderID"
UniqueName
=
"OrderID"
HeaderStyle-Font-Bold
=
"true"
DataType
=
"System.Double"
HeaderText
=
"BR"
HeaderStyle-HorizontalAlign
=
"Center"
ItemStyle-HorizontalAlign
=
"Center"
>
<
HeaderTemplate
>
<
asp:RadioButton
ID
=
"OrderID"
Text
=
"OrderID"
runat
=
"server"
onclick
=
"highlightcolumn(this);"
/>
</
HeaderTemplate
>
<
ItemTemplate
>
<
asp:Label
ID
=
"lbBR"
runat
=
"server"
Text='<%# DataBinder.Eval(Container.DataItem,"OrderID") %>'></
asp:Label
>
</
ItemTemplate
>
</
telerik:GridTemplateColumn
>
<
telerik:GridTemplateColumn
DataField
=
"CustomerID"
UniqueName
=
"CustomerID"
HeaderStyle-Font-Bold
=
"true"
DataType
=
"System.Double"
HeaderText
=
"BR"
HeaderStyle-HorizontalAlign
=
"Center"
ItemStyle-HorizontalAlign
=
"Center"
>
<
HeaderTemplate
>
<
asp:RadioButton
ID
=
"CustomerID"
Text
=
"CustomerID"
runat
=
"server"
onclick
=
"highlightcolumn(this);"
/>
</
HeaderTemplate
>
<
ItemTemplate
>
<
asp:Label
ID
=
"lbBR"
runat
=
"server"
Text='<%# DataBinder.Eval(Container.DataItem,"CustomerID") %>'></
asp:Label
>
</
ItemTemplate
>
</
telerik:GridTemplateColumn
>
<
telerik:GridTemplateColumn
DataField
=
"EmployeeID"
UniqueName
=
"EmployeeID"
HeaderStyle-Font-Bold
=
"true"
DataType
=
"System.Double"
HeaderText
=
"BR"
HeaderStyle-HorizontalAlign
=
"Center"
ItemStyle-HorizontalAlign
=
"Center"
>
<
HeaderTemplate
>
<
asp:RadioButton
ID
=
"EmployeeID"
Text
=
"EmployeeID"
runat
=
"server"
onclick
=
"highlightcolumn(this);"
/>
</
HeaderTemplate
>
<
ItemTemplate
>
<
asp:Label
ID
=
"lbBR"
runat
=
"server"
Text='<%# DataBinder.Eval(Container.DataItem,"EmployeeID") %>'></
asp:Label
>
</
ItemTemplate
>
</
telerik:GridTemplateColumn
>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
JavaScript:
<script type=
"text/javascript"
>
function
highlightcolumn(sender) {
var
columnName = sender.value;
var
OrderGrid = $find(
"<%=radgrdOrders.ClientID %>"
);
var
MasterTable = OrderGrid.get_masterTableView();
var
DataColumn = MasterTable.get_columns();
for
(
var
i = 0; i < DataColumn.length; i++) {
if
(DataColumn[i].get_uniqueName() == columnName) {
var
DataRow = MasterTable.get_dataItems();
for
(
var
j = 0; j < DataRow.length; j++) {
MasterTable.getCellByColumnUniqueName(DataRow[j], DataColumn[i].get_uniqueName()).bgColor =
"Yellow"
;
}
}
else
{
var
DataRow = MasterTable.get_dataItems();
for
(
var
j = 0; j < DataRow.length; j++) {
MasterTable.getCellByColumnUniqueName(DataRow[j], DataColumn[i].get_uniqueName()).bgColor =
"Gray"
;
}
}
}
}
</script>
Let me know if you have any concern.
Thanks,
Princy.
0

Neetha
Top achievements
Rank 1
answered on 24 Apr 2014, 02:29 PM
Hi Princy,
If i remove AutoPostback=true then my radiobutton checkedchanged event is not working. Could you please let me know to handle this at server side in the checkedchanged event instead of Javascript function or any alternative. I have some other functionalities in this event which cannot be moved to client side.
Thanks.
If i remove AutoPostback=true then my radiobutton checkedchanged event is not working. Could you please let me know to handle this at server side in the checkedchanged event instead of Javascript function or any alternative. I have some other functionalities in this event which cannot be moved to client side.
Thanks.
0
Accepted

Princy
Top achievements
Rank 2
answered on 25 Apr 2014, 05:19 AM
Hi Neetha,
You can set the background color for a column, by checking if its radio-button is checked as follows:
ASPX:
C#:
Thanks,
Princy
You can set the background color for a column, by checking if its radio-button is checked as follows:
ASPX:
<
HeaderTemplate
>
<
asp:RadioButton
ID
=
"rbBR"
Text
=
"Board Repair"
runat
=
"server"
OnCheckedChanged
=
"rbBR_CheckedChanged"
AutoPostBack
=
"true"
/>
</
HeaderTemplate
>
<
ItemTemplate
>
<
asp:Label
ID
=
"lbBR"
runat
=
"server"
Text='<%# DataBinder.Eval(Container.DataItem,"BR")%>'> </
asp:Label
>
</
ItemTemplate
>
C#:
protected
void
rbBR_CheckedChanged(
object
sender, EventArgs e)
{
RadioButton headerCheckBox = (sender
as
RadioButton);
if
(headerCheckBox.Checked)
{
foreach
(GridDataItem dataItem
in
RadGrid1.MasterTableView.Items)
{
Label lbl = (Label)dataItem.FindControl(
"lbBR"
);
lbl.BackColor = Color.Yellow;
}
}
}
Thanks,
Princy
0

Neetha
Top achievements
Rank 1
answered on 25 Apr 2014, 06:36 PM
Worked. Thanks