[Solved] RadGrid - Set row background color client side

[David]

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

[David]

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

     }         

}

[Shinu]

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

[David]

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?

[Shinu]

Hi,

Here is how I applied the CSS class which works as expected.
CSS:

.ClassA
      {
          background-color: #FFFF99 ;
      }
      .ClassB
      {
           background-color: #FFFFCC ;
      }

Thanks,
Shinu

[David]

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.

[Princy]

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.

[David]

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();
          }
      }

[Jayesh Goyani]

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

[David]

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