Füllen einer QuickInfo mit einer Teilansicht - In einem Telerik MVC-Grid

Question

Ich habe derzeit eine Telerik MVC Grid, die mit Patienten gefüllt ist. Was ich versuche zu erreichen, ist, wenn die Zeile angeklickt wird, wird ein Tooltip angezeigt, der zusätzliche Details des Patienten anzeigt.

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 Ereignis (die den Tooltip müssen abzufeuern)

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

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

und schließlich die Controller Aktion (die einen Patienten zurückkehren mit dem patientGuid)

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

    return currentPatient; 
} 

Momentan - der onRowSelect wird ordnungsgemäß ausgelöst und ruft den Controller auf, der den richtigen Patienten erhält. Ich versuche nur, einen einfachen Tooltip herauszufinden, um dies zu implementieren - oder wenn andere elegantere Methoden verfügbar sind.

Vielen Dank, wenn Sie irgendwelche Ausarbeitungen brauchen - fragen Sie einfach.

Answer 1

Endlich eine Lösung für dieses Problem gefunden - da ich kein Plug-in finden konnte, das dieses Problem lösen könnte.

ich meine eigene div, die (und fungieren als Tool-Tip) ausgeblendet werden würde und dann, als ich einfach geändert meine onRowSelect() Funktion zu meinem Teilansicht aufrufen und die div bevölkern, gezeigt:

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(); 
     }); 

Die Höhe und Breite werden verwendet, um das Popup unterhalb der ausgewählten Zeile im Raster zu zentrieren. Ich hoffe, dass dies jemandem hilft, wenn sie auf ähnliche Probleme stoßen.