Telerik MVCグリッド内の部分的なビューでのツールチップの挿入

Question

現在、Telerik MVCグリッドには患者が設定されています。私が達成しようとしているのは、行がクリックされるたびに、患者の追加の詳細を表示するツールチップが表示されることです。

グリッド

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

（ツールチップを発射する必要があります）行のClickedイベント

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

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

、最終的に患者を返しますコントローラのアクション（ patientGuidを使用）

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

    return currentPatient; 
} 

現在、onRowSelectが正常に起動し、正しいPatientを取得するコントローラを呼び出します。私はこれを実装するために使用する簡単なツールチップを理解しようとしています。

おかげさまで、ありがとうございました。

Answer 1

最後に、この問題を解決できるプラグインが見つからないため、この問題の解決策が見つかりました。

私は（ツールチップとして、演技）私自身の隠されてしまうのdivを作成し、その後、私は単純に示したように、私の部分図を呼び出し、DIVを移入するために私onRowSelect（）関数を変更：

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

高さと幅は、グリッド内の選択した行の下にポップアップを中央に配置するために使用されます。似たような問題に遭遇した場合、これが誰かを助けることを願っています。