ClientEvents.OnRowDataBound - how to change row background colour?

8 posts, 1 answers
  1. Steve White
    Steve White avatar
    26 posts
    Member since:
    Sep 2009

    Posted 12 Jan 2010 Link to this post

    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
  2. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 15 Jan 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Steve White
    Steve White avatar
    26 posts
    Member since:
    Sep 2009

    Posted 15 Jan 2010 Link to this post

    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.
  5. Answer
    Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 20 Jan 2010 Link to this post

    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.
  6. Steve White
    Steve White avatar
    26 posts
    Member since:
    Sep 2009

    Posted 20 Jan 2010 Link to this post

    Fiko -

    Thanks for following up, this worked perfectly for the row.
  7. rob
    rob avatar
    4 posts
    Member since:
    Jan 2011

    Posted 07 Jun 2011 Link to this post

    rock on. works great. I've been trying to find this post for 3 hours!
  8. Vinh
    Vinh avatar
    24 posts
    Member since:
    Jul 2010

    Posted 09 Mar 2012 Link to this post

    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";
                    }
                }

  9. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 14 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017