[Solved] Client Side Select Item & Highlight

[Felipe Saldana]

I am running into an issue and want to see if there is a standard way to do this.

I want to select a grid item on the client and keep the the styles defined in the grid.  I have the following event called when a checkbox is clicked in the grid.

           function selectRow(id, rowIndex) {

               var grid = $find("<%= gvProperties.ClientID %>");

               var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();

               //grid.get_masterTableView().selectItem(rowControl, true);
               grid.get_masterTableView().selectItem(rowControl);


               rowControl.style.backgroundColor='#c7c7c7';

               return true;

The rowControl.style.background gets set correctly but I really want to use what is defined in SelectedItemStyle.  My main question is when the checkbox is unclicked I want to use what is set for the ItemStyle or the AlternateItemStyle.

How do I know what kind of item (regular or Alternate) I have?

Also, why doesn't the 'selectItem' method already already highlight the row using the SelectedItemStyle?

Thanks.

[Shinu]

Hi Felipe,

I guess you are trying to deselect the Grid row on unchecking the CheckBox. If so, try out the following code snippet and see whether it helps.

ASPX:

<telerik:GridTemplateColumn UniqueName="TempCol" DataField="Discontinued" HeaderText="TempCol" >
                  <ItemTemplate>
                      <asp:CheckBox ID="CheckBox1"  runat="server" />
                  </ItemTemplate>
                </telerik:GridTemplateColumn>

CS:

 protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;
            CheckBox chkbx = (CheckBox)item["TempCol"].FindControl("CheckBox1");
            chkbx.Attributes.Add("OnClick", "Select('" + item.ItemIndex + "');");
        }
   }

JS:

<script type="text/javascript" >
 function Select(rowIndex)
  {

     var grid = $find("<%= RadGrid1.ClientID %>");
      var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
     grid.get_masterTableView().deselectItem(rowControl);
  }
</script>

Thanks
Shinu

[Felipe Saldana]

Thanks for the help.

My question is mainly about the styles (background color) of rows staying consistent with ItemStyle,AlternateItemStyle, SelectedItemStyle  when Items are selected/deslected.

[Iana Tsolova]

Hi Felipe,

In order to check if a grid row is Item or AlternatringItem, you can get its HTML TableRow element on the client and see if its className is rgRow or rgAltRow correspondingly.
However I suggest that you check our this help topic and directly modify the Skin you are using as per your needs.

Check it out and let me know how it goes.

Greetings,
Iana
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.