Highlighting the radgrid column based on radiobutton check in the header template

[Neetha]

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.

[Princy]

Hi Neetha,

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.

[Neetha]

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

[Princy]

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:

<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.

[Neetha]

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.

[Princy]

Hi Neetha,

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

[Neetha]

Worked. Thanks