부분 뷰로 툴팁 삽입하기 - Telerik MVC 격자

Question

현재 환자로 채워지는 Telerik MVC 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(); 
%> 

행 클릭했습니다 이벤트 마지막

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

마지막으로이 문제에 대한 해결책을 찾았습니다.이 문제를 해결할 수있는 플러그인을 찾을 수 없었습니다.

나는 (도구 설명으로 행동) 숨겨져있을 것입니다 내 자신의 사업부를 만들어 그림과 같이 나는 단순히 내 부분보기 전화 사업부를 채우는 데 내 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(); 
     }); 

높이와 너비는 팝업을 가운데 그리기에서 선택된 행 아래에 배치하는 데 사용됩니다. 비슷한 문제가 발생하면 도움이되기를 바랍니다.