ClientEvents.OnRowDataBound - how to change row background colour?

[Steve White]

Trying to change the colour of the grid row during the client-side databind event:

                function OnGridRowDataBound(oGrid, args) {
                    var dataItem = args.get_dataItem();
                    var status = dataItem.Attributes["Status"];
                    if (status == "Locked") {
                        var rowElement = dataItem.get_element();
                        rowElement.style.backgroundColor = "red";
                    }
                }

Gives me dataItem.get_element() is not a function.

Can you let me know how I can do this?

thanks,
Steve

[Fiko]

Hello Steve,

In your case you need to use this approach:

• Attach a handler to the OnRowDataBound client-side event of the embedded grid:
  

  protected void Page_Load(object sender, EventArgs e)
  {
      RadFileExplorer1.Grid.ClientSettings.ClientEvents.OnRowDataBound = "OnGridRowDataBound";
  }

• Implement the handler as follows:
  
  <script type="text/javascript">

      function OnGridRowDataBound(oGrid, args)

      {

          var value = args.get_dataItem()["Status"];

   

          if (value == "Locked")

          {

              args.get_item().get_cell("Status").style.backgroundColor = "red";

          }

      }

  </script>
  

I hope this helps.

Kind regards,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Steve White]

Thanks Fiko, this worked perfectly for the cell.

How would I change the whole row? I've tried get_item().get_row(), but this doesn't work.

[Fiko]

Hi Steve,

The solution in this case is to use this code :

args.get_item().get_element().style.backgroundColor = "red";

instead of this one:

args.get_item().get_cell("Status").style.backgroundColor = "red";

This will change the background-color of the row.

I hope this helps.

Kind regards,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Steve White]

Fiko -

Thanks for following up, this worked perfectly for the row.

[rob]

rock on. works great. I've been trying to find this post for 3 hours!

[Vinh]

Hi,

I just tried on 2012.Q1 and it doesn't work.  When I debug the value of var is undefine.

protected void Page_Load(object sender, EventArgs e)
 {
            ...
            RadFileExplorer1.Grid.ClientSettings.ClientEvents.OnRowDataBound = "OnGridRowDataBound";
            ...
}

function OnGridRowDataBound(oGrid, args) {
                var value = args.get_dataItem()["Downloaded"];

                if (value == "Yes") {
                    args.get_item().get_cell("Downloaded").style.backgroundColor = "red";
                }
            }

[Pero]

Hello Vinh,

Since Q1 2012, the only way to access the additional (custom) attributes of the data item, is through its Attributes property. Here is an example of how to access the value of the Downloaded attribute:

var dataItem = args.get_dataItem();
var value = dataItem.Attributes["Downloaded"];

if (value == "Yes")
{
    args.get_item().get_cell("Owner").style.backgroundColor = "red";
}

Kind regards,
Pero
the Telerik team