使用部分视图填充工具提示-在Telerik MVC网格中

Question

I currently have a Telerik MVC Grid that is populated with Patients. What I am trying to accomplish is whenever the row is clicked on, a tooltip will be presented displaying additional details of the Patient.

The Grid

<% Html.Telerik()
        .Grid<Mvc2.ViewModels.PatientsGridViewModel>()
        .Name("PatientsGrid")
        .Columns(columns =>
        {
            columns.Bound(o => o.PatientId).ClientTemplate("<input class='gridcheck' type='checkbox' name='checkedRecords' value='<#=PatientId#>'/>").Width(30).Title("");
            columns.Bound(o => o.PatientGuid).Title("Patient Id");
            columns.Bound(o => o.PatientName).Title("Patient Name");          
            columns.Bound(o => o.DateOfBirth).Title("Date of Birth?");
            columns.Bound(o => o.Sex).Title("Sex");
            columns.Bound(o => o.Status).Title("Status");
            columns.Bound(o => o.LastActivityDate).Title("Last Activity");
        })
        .DataBinding(dataBinding => dataBinding
            .Ajax()
                .Select("_AjaxBindingPatients", "Patients")
         )
         .Sortable()
         .ClientEvents(events => events.OnDataBound("onDataBound").OnRowSelect("onRowSelect"))
        .Pageable()
        .Selectable()
        .Render();
%>

The Row Clicked Event (which will need to fire the Tooltip)

 function onRowSelect(e) {
        var row = e.row;

        $.ajax({ type: "POST",
            url: "/Patients/GetAdditionalPatientInformation",
            datatype: "json",
            traditional: true,
            data:
                      {
                          'patientGuid': row.cells[1].innerHTML
                      }
        });
    }

and finally the Controller Action (which would return a Patient using the patientGuid)

[HttpPost]
public Patient GetAdditionalPatientInformation(string patientGuid)
{
   Patient currentPatient = currentPatients.Where<Patient>(p => p.PatientGuid == Guid.Parse(patientGuid)).FirstOrDefault();

   return currentPatient;
}

Currently - the onRowSelect fires properly and calls the controller, which gets the correct Patient. I am just trying to figure out a simple tooltip to use to implement this - or if any other more elegant ways are avaiable.

Thanks greatly, If you need any elaborations - just ask.

Answer 1

Finally found a solution to this issue - as I could not find a plug-in that could solve this issue.

I created my own div that would be hidden (and act as the tool-tip) and then I simply changed my onRowSelect() function to call my Partial View and populate the div, as shown :

var row = e.row;
var height = this.offsetTop;
var width = (this.offsetWidth / 2) - 300;

$.post("/Patients/GetAdditionalPatientInformation", { 'patientGuid': row.cells[1].innerHTML }, function (data) {
            $("#tooltip").html(data);
            $("#tooltip").css("left", width);
            $("#tooltip").css("top", height + 55);
            $("#tooltip").show();
        });

The height and width are used to center the pop-up below the selected row in the grid. I hope that this helps someone if they run into any issues that are similar.