Q1 2010.1.222 - jQuery Mouseover gets first Grid row only

[IQworks]

Hi,
     I have this grid with ID="cName", and this jQuery. When I mouseover the CompanyName cells of the Grid rows, the mouseover jQuery only picks up the First row. Nothing happens when i mousover the other rows ?  I cannot figure out how to grab the correct row on mouseover.  

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<BCAnalytics.Models.CompanyVM>>" %>

  <%if (false)
  {%>
  <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
 <% }%>
 <script type="text/javascript">
     /*MOUSE OVER */
     $("#cName").mouseover(function(e) {
         alert("innera " + $("#cName").attr("innerHTML"));
      });

     $("#cName").mouseleave(function(e) {
         alert("leaving " + $("#cName").attr("innerHTML"));
    });


</script>
<style type="text/css">
/*with the ":hover" ( ".?:? {}" is called a pseudo-class),
  the text turns blue on hover.
  without the ":hover" (".ihover" a regular class) , the text just shows up in the
  grid as blue for cCompanyName */
.ihover:hover
{
color:Blue;
}


</style>
   <h3><%= Html.ActionLink((String)Resources.BCAResources.stdClose, "Index", "Work", new { workindex = 0 }, null)%>
   <br />
   <i style="color:Red;"><%=Session["iqResult"]%> </i> </h3>

        <%= Html.Telerik().Grid(Model)
              .Name("CompanyGrid")
              .Columns(columns =>
                {

                    columns.Add(o => o.cCompanyName).Width(185).Title((string)Resources.BCAResources.coxCompany)
                        .HtmlAttributes(new{@class="ihover", id="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);

                })
               .Selectable()
               .DataBinding(dataBinding => dataBinding.
                    Ajax().Select("_AjaxBindingCompany", "Company"))
               .Pageable()
               .Sortable(sort => sort.SortMode(GridSortMode.MultipleColumn))
               .Scrollable(scrolling => scrolling.Height(253))
               .Filterable()%>


       <p><%= Html.ActionLink((String)Resources.BCAResources.coxCreateNewCompany, "Index", "Work", new { workindex = 2, OtherParms = "Create" }, null)%></p>

  Thanks for any help on this

[IQworks]

 I also tried it like this ....
Attributes ...

   columns.Add(o => o.cCompanyName).Width(185).Title((string)Resources.BCAResources.coxCompany)
                        .HtmlAttributes(new { @class = "ihover", id = "cName", onmouseover = "JavaScript:mover()" });

javascript ....

  /* this works when you hover over EACH row, but still just shows the first row
        company name */
     function mover() {
     alert("inner " + document.getElementById('cName').innerHTML);
     }

 
It still just shows me the company name of the FIRST row no matter which row executes "mover" ?

thanks

[IQworks]

Hi, 
  I think the issue is that the "ID" needs to be unique ?  But how do I code that in my column add HTMLAtributes ?
thanks

[Atanas Korchev]

Hello IQworks,

Yes, the id attribute of HTML elements must be unique. The grid does not guarantee this uniqueness so you must do it your self. Ideally you can pass the hovered element:

Width(185).Title((string)Resources.BCAResources.coxCompany)  
                        .HtmlAttributes(new { @class = "ihover cName", onmouseover = "JavaScript:mover(this)" });

function mover(element) {  
     alert("inner " + element.innerHTML);  
     }

Regards,
Atanas Korchev
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]

 Thanks Atanas,
  Yes, that does answer the try I made using javascript !
  My initial attempt to use jQuery is what I am trying to accomplish .... (I need to use jQuery for further processing of a specific routine)

 <script type="text/javascript">
     /*MOUSE OVER */
     $("#cName").mouseover(function(e) {
         alert("innera " + $("#cName").attr("innerHTML"));
      });

     $("#cName").mouseleave(function(e) {
         alert("leaving " + $("#cName").attr("innerHTML"));
    });


</script>

And the column is specified as this ...

  columns.Add(o => o.cCompanyName).Width(185).Title((string)Resources.BCAResources.coxCompany)
                       .HtmlAttributes(new { @class = "ihover", id = "cName"});

And this is what I see in the html  (example of two rows) .....

<td class="ihover" id="cName">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 class="t-last"><a href="/Company/CompanyDelete/1">Delete</a></td>
</tr>

<tr class="t-alt">
<td class="ihover" id="cName">k</td>
<td>k</td>
<td>k</td>
<td><a href="mailto:k">k</a></td><td>01/01/2010</td>
<td><a href="/Work?workindex=2&amp;OtherParms=5">Edit</a></td>
<td class="t-last"><a href="/Company/CompanyDelete/5">Delete</a></td>
</tr>

Is there a way to get the ID unique, and have jQuery see it so the mouseover works on each row ?

Thanks again for your help

[Atanas Korchev]

Hi IQworks,

Use a class instead of id if you can't make the id unique:

columns.Add(o => o.cCompanyName).Width(185).Title((string)Resources.BCAResources.coxCompany)  
                       .HtmlAttributes(new { @class = "ihover cName"})

<script type="text/javascript">    
     /*MOUSE OVER */    
     $(".cName").mouseover(function(e) {    
         alert("innera " + $(this).html());    
      });    
         
     $(".cName").mouseleave(function(e) {    
         alert("leaving " + $(this).html());    
    });          
     
   
</script>
Regards,
Atanas Korchev
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]

Atanas, - that worked great !
No way I would of ever tried that one - what is that !? Making a class and then the class works like an ID ? Maybe I should not be looking at it as an ID perse.  Guess i will have to reasearch how that works, .... amazing.
Thanks Atanas !!

[Atanas Korchev]

Hello IQworks,

I suggest you check the jQuery selectors article. You can make selectors based on id, class and a lot more. The other thing is that an HTML element can have more than one CSS class applied. For some reason this is not a widely known fact and people use it rarely.


All the best,
Atanas Korchev
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]

 Thanks again Atanas,
   Yes, I didnt know about multiple classes being applied.  But just like class, "id" is also a valid selector. Here is why using my "id" only worked on the first Grid row with the mouseover ... 
http://api.jquery.com/id-selector/ 

Each id value must be used only once within a document. If more than one element has been
 assigned the same ID, queries that use that ID will only select the first matched element in the
 DOM. This behavior should not be relied on, however; a document with more than one
 element using the same ID is invalid.

  thanks for the link Atanas