RadGrid - Set row background color client side

10 posts, 1 answers
  1. David
    David avatar
    14 posts
    Member since:
    Feb 2013

    Posted 15 Mar 2013 Link to this post

    I have a RadGrid that is based on the client edit with batch server update example code. I would like to change the background color of the row when the SelectedIndexChanged event fires in the RadComboBox in the currently edited cell of the grid row. I need to do this as a client side action. The currently edited row will be an ItemTemplate as the client edit with batch server update code doesn't use the EditItemTemplate when editing rows.

    <telerik:RadComboBox ID="RadComboBankerRole" 
     runat="server"
     OnItemsRequested="RadComboBankerRole_ItemsRequested"
     OnClientSelectedIndexChanged="RadComboBankerRole_SelectedIndexChanged"/>

    function RadComboBankerRole_SelectedIndexChanged(sender, eventArgs) 
    {
        //  Set row background color css class if selected value not string.Empty.
        //  Bonus points if you can apply different css class based on row index mod 2 ("zebra striped rows")
    }
  2. David
    David avatar
    14 posts
    Member since:
    Feb 2013

    Posted 18 Mar 2013 Link to this post

    Hi Telerik, does anyone have any possible solutions to this?

    I am setting the row color in the ItemDataBound event handler of the grid as follows:

    private void SetRowColor(GridDataItem item)
            {
                const string noRoleCssClass = "rgRow rgRowNoBankerRole";
                const string noRoleAltCssClass = "rgRow rgRowNoBankerRoleAlt";
      
                Label lblBankerRoleID = (Label)item.FindControl("lblBankerRoleID");
                if (lblBankerRoleID != null)
                {
                    int bankerRoleId = 0;
                    int.TryParse(lblBankerRoleID.Text, out bankerRoleId);
                    if (bankerRoleId == 0)
                    {
                        //  No banker role selected set row color
                        item.CssClass = (item.RowIndex % 2 == 0) ? noRoleCssClass : noRoleAltCssClass;
                    }
                }
            }

    The problem is that when the user edits the row on the client side the row color is not set because no postback has occurred so all the rows are colored correctly when the grid is bound but subsequent client side grid editing is not setting the row colors correctly.

    I can't perform the action server side in the SelectedIndexChanged event of the RadCombo because performing a postback causes problems with the client edit with batch server update code. Bascially I need to achieve the following in terms of JavaScript. Forgive the psuedo code below as I really don't know what commands are required to achieve this at the moment.

    function RadComboBankerRole_SelectedIndexChanged(sender, eventArgs) 
    {
          var item = eventArgs.get_item();
          var gridRow =  sender.Parent(); //Somehow get senders parent? 
          if(item.get_text() = "0")  
           {
              gridRow.SetBackColor = "CssClassA"; //Somehow set row backcolor
         }
         else 
                 {
              gridRow.SetBackColor = "CssClassB";
         }         
    }


  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Mar 2013 Link to this post

    Hi,

    JS:
    function OnClientSelectedIndexChanged(sender, args) {
            var item = args.get_item();
            var masterTable = $find('<%= RadGrid1.ClientID %>').get_masterTableView();
                var row = masterTable.get_dataItems();
              if (item.get_text() == "0")
            {
                row[0].addCssClass("ClassA");
             }
                 else
             {
              row[0].addCssClass("ClassB");
             }
        }

    Thanks,
    Shinu
  5. David
    David avatar
    14 posts
    Member since:
    Feb 2013

    Posted 25 Mar 2013 Link to this post

    Thank you for your reply. I'm not seeing any row color change when using the following code based on the sample code you provided.

    function RadComboBankerRole_SelectedIndexChanged(sender, args) {
                //  Change the color of the row depending on whether or not a banker role has been assigned
                var item = args.get_item();
                var masterTable = $find('<%= TelerikDealGrid.ClientID %>').get_masterTableView();
                var row = masterTable.get_dataItems();
                if (item.get_text() == "0"
                {
                    row[0].addCssClass("rgRow rgRowNoBankerRole");
                }
                else {
                    row[0].addCssClass("rgRow");
                }
            }

    /* Color the grid row when no banker role is selected */
    .rgRowNoBankerRole 
    {
        background-color: #FFFFCC;
    }
      
    .rgRowNoBankerRoleAlt 
    {
        background-color: #FFFF99;
    }

    I've debugged the code and the masterTable and row variables are correctly instantiated. Do you have any suggestions about possible reasons the row color is not changing?
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 26 Mar 2013 Link to this post

    Hi,

    Here is how I applied the CSS class which works as expected.
    CSS:
    .ClassA
          {
              background-color: #FFFF99 ;
          }
          .ClassB
          {
               background-color: #FFFFCC ;
          }

    Thanks,
    Shinu
  7. David
    David avatar
    14 posts
    Member since:
    Feb 2013

    Posted 02 Apr 2013 Link to this post

    Thanks for your reply. This code only sets the background color of the first row in the grid.

    row[0].addCssClass("ClassA");

    I need to know the index of the row that contains the RadCombo which fired the OnClientSelectedIndexChanged event.
  8. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 03 Apr 2013 Link to this post

    Hi,

    Please try the following code snippet.

    C#:
    protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem data = (GridDataItem)e.Item;
            RadComboBox comboBox1 = (RadComboBox)data.FindControl("RadCombobox1");
            comboBox1.OnClientSelectedIndexChanged = "function (button,args){Selected('" + data.ItemIndex + "','"+comboBox1.ClientID+"');}";
        }
    }

    JavaScript:
    <script type="text/javascript">
        function Selected(rowIndex, id) {
            var combo= document.getElementById(id);
            var masterTable = $find('<%= RadGrid1.ClientID %>').get_masterTableView();
                var row = masterTable.get_dataItems();
                if (combo.control.get_text() == "2")
            {
                row[rowIndex].addCssClass("ClassA");
             }
                 else
             {
                 row[rowIndex].addCssClass("ClassB");
             }
        }
    </script>

    Thanks,
    Princy.
  9. David
    David avatar
    14 posts
    Member since:
    Feb 2013

    Posted 03 Apr 2013 Link to this post

    Thanks Princy. That code works well with the exception that .addCssClass doesn't clear any existing classes that have been applied to the row. Therefore with multiple selections from the RadCombo you end up with "rgRow ClassA ClassB". I've tried the following but it's still not working. Do you have any recommendations?

    function Selected(rowIndex)
          {
              var masterTable = $find('<%= RadGrid1.ClientID %>').get_masterTableView();
              var row = masterTable.get_dataItems();
              var combo = masterTable.get_dataItems()[rowIndex].findControl('TestRadCombo');
              var item = combo.get_text();
              row[rowIndex].get_styles().EnabledStyle[1] = row[rowIndex].get_styles().EnabledStyle[1].replace("ClassA", "");
              row[rowIndex].get_styles().EnabledStyle[1] = row[rowIndex].get_styles().EnabledStyle[1].replace("ClassB", "");
              if (item == "Test 1") {
                  row[rowIndex].get_styles().EnabledStyle[1] += " ClassA";
                  row[rowIndex].updateCssClass();
              }
              else {
                  row[rowIndex].get_styles().EnabledStyle[1] += "ClassB";
                  row[rowIndex].updateCssClass();
              }
          }
  10. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 04 Apr 2013 Link to this post

    Hello,

    Please check below forum for add and remove cssclass by using jquery.

    http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-highlight-cell-on-mouseover.aspx

    Thanks.
    Jayesh Goyani
  11. David
    David avatar
    14 posts
    Member since:
    Feb 2013

    Posted 04 Apr 2013 Link to this post

    Thanks for your reply. The following works fine for me.

    function RadComboBankerRole_SelectedIndexChanged(rowIndex, id) 
            {
                //  Change the color of the row depending on whether or not a banker role has been assigned
                var combo = document.getElementById(id);
                var masterTable = $find('<%= TelerikDealGrid.ClientID %>').get_masterTableView();
                var row = masterTable.get_dataItems();
                row[rowIndex].removeCssClass("rgRowNoBankerRole");
                row[rowIndex].removeCssClass("rgRowNoBankerRoleAlt");
                if (combo.control.get_text() == "0") {
                    if (rowIndex % 2 == 0) 
                    {
                        row[rowIndex].addCssClass("rgRowNoBankerRole");
                    }
                    else 
                    {
                        row[rowIndex].addCssClass("rgRowNoBankerRoleAlt");
                    }
                }
            }


Back to Top
UI for ASP.NET Ajax is Ready for VS 2017