[Solved] Reading more than one grid column with jquery in the same function

[IQworks]

Hi,
    I am trying to mouseover or hover over a name from one column, and, I need the ID (key) of that row which is in another column.
    I have a grid that looks like this .... 

 <%= Html.Telerik().Grid(Model)
              .Name("CompanyGrid")

              .Columns(columns =>
                {
                    columns.Add(o => o.cCompanyName).Width(185).Title((string)Resources.BCAResources.coxCompany)
                     .HtmlAttributes(new { @class = "ihover cName"});
                    columns.Add(o => o.cPhone).Title((string)Resources.BCAResources.stdPhone).Width(75);
                    columns.Add(o => o.cGroupCode).Title((string)Resources.BCAResources.coxGroupCode).Width(100);
                    columns.Add(o => o.cEmail).Format(Html.Mailto("{0}", "{0}")).Encoded(false).Width(150);
                    columns.Add(o => o.cDateUpdated).Format("{0:MM/dd/yyyy}").Width(85)
                          .Title((string)Resources.BCAResources.stdUpdated);
                    columns.Add(o => o.cCompanyNo).Format(Html.ActionLink((String)Resources.BCAResources.stdEdit, "Index", "Work", new { workindex = 2, OtherParms = "{0}" }, null).ToString()).Encoded(false).Title("").Width(32).Filterable(false);
                    columns.Add(o => o.cCompanyNo).Format(Html.ActionLink((String)Resources.BCAResources.stdDelete, "CompanyDelete", new { Id = "{0}" }, null).ToString()).Encoded(false).Title("").Width(50).Filterable(false);
                    columns.Add(o => o.cCompanyNo).Width(0)
                        .HeaderHtmlAttributes(new { style = "display:none" })
                        .HtmlAttributes(new { @class = "cId", style = "display:none" });
                })
               .DataBinding(dataBinding => dataBinding.Ajax().Select("_AjaxBindingCompany", "Company"))
               .Pageable()
               .Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
               .Scrollable(scrolling => scrolling.Height(253))
               .Filterable()
                       %>

    Using mouseover , I can access the name with its class ".cName" from any row, but even with the class ".cId" of the key field cCompanyNo, this key keeps comming back as the key of the very first row only. I cannot use the "this" keyword on the key because "this" is for the element (column) moused over ? 

 $(".cName").mouseover(function() {
         alert("the name " + $(this).html());
      alert("and the key is :" + $(".cId").html());
     });

 
   I have tried several variations but I cannot seem to get the key of the moused over row ?

  thanks as always for your time

  

[IQworks]

Hi, 
     It seems like even iterating through the DOM would not help because there is nothing unique to grab hold of ? Or, maybe I iterated wrong. 
     I will just wait to see if there is a "Telerik" way of doing this before I continue to research more.
thanks again.

[Georgi Krustev]

Hello IQworks,

The problem seems to be in the selector, which you are using. The best approach is to find the nearest TR to the hovered element and search in it the required cell. You can try this code snippet which should do the trick:

$(".cName").mouseover(function(e, element) {
     var row = $(element).closest('tr').find('.cId');
     });

For more information review this link.

All the best,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[IQworks]

Hi Georgi,

   Thanks for the lead !  The following worked well for me (.cName is the first column, .cId is column with the value I need for a key).....   

     $(document).ready(function() {
     $(".cName").mouseover(function(e,element) {
     var row = $(this).nextAll('.cId').html(); // works
     alert("and the key allt :" +row);
     });
 });

 I had to remove the "display:none" in the .HtmlAttributes  (see above Grid code) ....

columns.Add(o => o.cCompanyNo).Width(0)
                        .HeaderHtmlAttributes(new { style = "display:none" })
                        .HtmlAttributes(new { @class = "cId});

 This is the DOM of my Row ....

<tr>
<td class="ihover cName skmTooltipHost" tooltip="in there">asd - j</td>
<td>kalsj</td>
<td>ask</td>
<td><a href="mailto:[e-mail]">[e-mail]</a></td>
<td>03/01/2010</td>
<td><a href="/Work?workindex=2&amp;OtherParms=1">Edit</a></td>
<td><a href="/Company/CompanyDelete/1">Delete</a></td>
<td class="t-last cId">1</td>
</tr>

  Thanks again !