This is a migrated thread and some comments may be shown as answers.

Trying to add a tooltip to a grid

1 Answer 187 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Jeffrey
Top achievements
Rank 1
Jeffrey asked on 20 Mar 2014, 06:10 PM
I cant seem to figure out how to get the value from a hidden column in a kendo grid so that I can then pass it to a call  that will return a partial view.  Any help would be greatly appreciated.

Here is the code for my grid.

            @(Html.Kendo().Grid(Model.LEOfficerDutyRoster)
                  .Name("dutyrosterscrollerGrid")
                  .CellAction(cell =>
                  {

                      if (cell.Column.Title.Equals("   "))
                      {
                          switch (cell.DataItem.LEO_Availability)
                          {
                              case 0:
                                  cell.HtmlAttributes["class"] = "dataFreeBtn";
                                  break;
                              case 1:
                                  cell.HtmlAttributes["class"] = "dataAssignedBtn";
                                  break;
                              case 2:
                                  cell.HtmlAttributes["class"] = "dataNondutyBtn";
                                  break;
                          }
                      }
                  }
                  )
                  .Scrollable()
                  .Columns(columns =>
                  {
                      columns.Bound(r => r.LEO_OfficerID).Hidden(true);
                      columns.Bound(r => r.LEO_Availability).Title("   ").Width(25);
                      columns.Bound(r => r.FullName).Title("Officer");
                      columns.Bound(r => r.LEO_CallSign).Title("Call Sign");
                      columns.Bound(r => r.LEO_PostName).Title("Post");
                  }
                  )
                  
                  )

            @(Html.Kendo().Tooltip()
                .For("#dutyrosterscrollerGrid")
                .Position(TooltipPosition.Right)
                .Filter("tr")
                .LoadContentFrom("GetToolTipData", "DailyLog")
                .AutoHide(true)
                .Width(300)
                .Height(450)
                .Events(events => events.RequestStart("requestStart"))
               )
            
            
            <script type="text/javascript">
                function requestStart(e) {
                    var id = this.select().closest("tr").find("td:eq(0)").text();
                    alert(id);
                }
            </script>

1 Answer, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 24 Mar 2014, 08:50 AM
Hello Jeffrey,

You should use e.target to the the DOM element which the user has hovered (which corresponds to the grid table row). Then pass the text to your partial view via e.options.data. Here is some sample code:

<script>
    function requestStart(e) {
        var id = e.target.find("td:eq(0)").text();
        e.options.data = {
            id: id
        };
    }
</script>

Regards,
Atanas Korchev
Telerik
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
Tags
ToolTip
Asked by
Jeffrey
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Share this question
or