Change row color based on two template check boxes

[Steve Hochreiter]

Hi,
I have two template check boxes in the row and header of the grid.
I have been able to change the row color on the server side with this code:
        
        CheckBox chkApprove = (CheckBox)sender;
        CheckBox chkDeny = (CheckBox)chkApprove.NamingContainer.FindControl("chkDeny");
        GridDataItem current = (GridDataItem)chkApprove.NamingContainer;
        if (chkApprove.Checked)
        {
            current.CssClass = "ApproveRow";
            chkDeny.Checked = false;
        }
        else
        {
            if (current.ItemIndex % 2 == 0)
            {
                current.CssClass = "GridRow_WebBlue";
            }
            else
            {
                current.CssClass = "GridAltRow_WebBlue";
            }
        }

This is the style sheet info:

.ApproveRow

td
{

 

 

background-color: #A7CDB0 !important;
}

 

I want to do this on the client side to avoid the server delay.
This code will change the check boxes but will not change the row color:

 function ApproveClick(index,ApproveChkID,DenyChkID) 
 { 
    //alert("In approveclick " + index + " " + ApproveChkID + " " + DenyChkID);
    var grid= $find("<%=radAbsence.ClientID %>");   
    var gridRow=grid.get_masterTableView().get_dataItems()[index];  
    var chkApprove=document.getElementById(ApproveChkID); 
    var chkDeny=document.getElementById(DenyChkID); 
    if(chkApprove.checked==true)
    {  
        chkDeny.checked = false;
        alert("chkApprove checked");
        grid.get_masterTableView().get_dataItems()[index].className= "ApproveRow";
        //alert(" approve index: " + index);
    }
    else
    {
        //alert("chkApprove unchecked");
        //deselect row
        grid.get_masterTableView().get_dataItems()[index].set_selected = false;
        if (index % 2 == 0)
        {
            grid.get_masterTableView().get_dataItems()[index].className = "GridRow_WebBlue";
        }
        else
        {
            grid.get_masterTableView().get_dataItems()[index].className = "GridAltRow_WebBlue";
        }
    }

 }

Can you see what is missing, why the row color is not changing?
Steve H.

[Dimo]

Hello Steve,

Please use


grid.get_masterTableView().get_dataItems()[index].get_element().className = ".....";

instead of

grid.get_masterTableView().get_dataItems()[index].className = ".....";


This is because get_dataItems() returns client objects, however, you need DOM elements to set CSS classes to.


Kind regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Steve Hochreiter]

Thank you, that is what I was missing.

Steve H.

[Steve Hochreiter]

I am trying to persist the selections made on the client side.  When I sort or page I lose the selections.  I followed the article to persist the client selections, but I also want to set the checkboxes I have in the row.

I'm having difficulty in getting a reference to the check boxes from the RowCreated function.  Can you tell me what the syntax is for referencing a check box in a template column using the args?

function

 

radAbsence_RowCreated(sender, args)
{
var strID = args.getDataKeyValue("Id");
//the following does not work:
var chkApprove=args.get_gridDataItem("chkApprove");
var chkDeny=args.get_gridDataItem("chkDeny");
//neither does this:
//var chkApprove=args.get_gridDataItem().get_element()["chkApprove"];
//var chkDeny=args.get_gridDataItem().get_element()["chkDeny"]);
alert("strID: " + strID + " chkApprove.checked: " + chkApprove.checked + " chkDeny.checked: " + chkDeny.checked);
if (selectedApprove[strID])
{
args.get_gridDataItem().get_element().className = "ApproveRow";
chkApprove.checked = true;
}
if (selectedDeny[strID])
{
args.get_gridDataItem().get_element().className = "DenyRow";
chkDeny.checked = true;
}
}

Thank you in advance,
Steve H.

 

[Yavor]

Hi Steve,

You can first reference the relevant cell, via the unique name of the template column. Then, using the FindControl method, or the Controls collection you can reference all the controls nested in the cell.
I hope this information helps.

Regards,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Steve Hochreiter]

Another follow up question:
I can access the cell and see the contents of it, but cannot get the reference to the checkbox in the template.
Portion of grid:

 

<telerik:GridTemplateColumn HeaderText="Approve" UniqueName="Approve" DataType="System.Boolean">
<HeaderStyle Width="70px" />
<ItemStyle Width="70px" />
<ItemTemplate>
<asp:CheckBox ID="chkApprove" runat="server" CssClass="darkText" AutoPostBack="True" OnCheckedChanged="ApproveCheckChanged"/>
</ItemTemplate>
<HeaderTemplate>
<asp:CheckBox ID="chkApproveAll" runat="server" CssClass="darkText" Text="Approve" AutoPostBack="True" OnCheckedChanged="ApproveAllCheckChanged"

 

 

ToolTip="Check this to approve all rows in the grid." />
</HeaderTemplate>
</telerik:GridTemplateColumn>

 

 

var grid= $find("<%=radAbsence.ClientID %>");
var masterTable = grid.get_masterTableView();
var items = masterTable.get_dataItems();
var cellApprove = masterTable.getCellByColumnUniqueName(items[i],"Approve");

 

alert(

"cellApprove: " + cellApprove.innerHTML);

 

alert(

"cellApprove.childNodes[0].checked: " + cellApprove.childNodes[0].checked);

The above statement comes back undefined.
If I use the findControl method I get that it is not an available method.

 

[Yavor]

Hi Steve,

Since the checkbox autopostsback, you can handle the logic on the server, rather than on the client.
Let me know how this goes.

All the best,
Yavor
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.