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

行点击事件（需要触发工具提示）

 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正常触发并调用控制器，该控制器将获得正确的患者。我只想弄清楚一个简单的工具提示来实现这个 - 或者是否可以使用任何其他更优雅的方法。

非常感谢，如果您需要任何详细说明 - 请问。

Answer 1

最后找到了解决这个问题的方法 - 因为我找不到可以解决这个问题的插件。

我创建了自己的div，它将被隐藏（并充当工具提示）然后我只需更改我的onRowSelect（）函数来调用我的Partial View并填充div，如图所示：

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

高度和宽度用于使弹出窗口位于网格中选定行的下方。我希望如果他们碰到任何类似的问题，这会有所帮助。

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

1 个答案: