Заполнение всплывающей подсказки с частичным представлением - в сетке Telerik MVC - PullRequest
Новая
       1

Заполнение всплывающей подсказки с частичным представлением - в сетке Telerik MVC

0 голосов
/ 30 декабря 2010

В настоящее время у меня есть 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 срабатывает правильно и вызывает контроллер, который получает правильного пациента. Я просто пытаюсь найти простую подсказку, чтобы использовать ее для реализации - или, если есть другие, более изящные способы.

Большое спасибо, если вам нужны какие-то разработки - просто спросите.

1 Ответ

1 голос
/ 03 января 2011

Наконец-то нашел решение этой проблемы - так как я не смог найти плагин, который мог бы решить эту проблему.

Я создал свой собственный div, который был бы скрыт (и выступал в качестве всплывающей подсказки), а затем я просто изменил свою функцию onRowSelect (), чтобы вызвать мой частичный просмотр и заполнить 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();
        });

Высота и ширина используются для центрирования всплывающего окна ниже выбранной строки в сетке. Я надеюсь, что это поможет кому-то, если они столкнутся с какими-либо похожими проблемами.

...