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

Change row color based on two template check boxes

6 Answers 231 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steve Hochreiter
Top achievements
Rank 1
Steve Hochreiter asked on 10 Oct 2008, 04:20 PM
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.

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 10 Oct 2008, 04:53 PM
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.
0
Steve Hochreiter
Top achievements
Rank 1
answered on 10 Oct 2008, 06:32 PM
Thank you, that is what I was missing.

Steve H.
0
Steve Hochreiter
Top achievements
Rank 1
answered on 14 Oct 2008, 06:54 PM
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.

 

0
Yavor
Telerik team
answered on 15 Oct 2008, 05:42 AM
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.
0
Steve Hochreiter
Top achievements
Rank 1
answered on 15 Oct 2008, 07:49 PM
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.

 

0
Yavor
Telerik team
answered on 20 Oct 2008, 08:33 AM
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.
Tags
Grid
Asked by
Steve Hochreiter
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Steve Hochreiter
Top achievements
Rank 1
Yavor
Telerik team
Share this question
or