Populating a Tooltip with a Partial View - In a Telerik MVC Grid
I currently have a Telerik MVC Grid that is populated with Patients. What I am trying to accomplish is whenever the row is clicked on, a tooltip will be presented displaying additiona开发者_StackOverflowl details of the Patient.
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 Event (which will need to fire the Tooltip)
function onRowSelect(e) {
var row = e.row;
$.ajax({ type: "POST",
url: "/Patients/GetAdditionalPatientInformation",
datatype: "json",
traditional: true,
data:
{
'patientGuid': row.cells[1].innerHTML
}
});
}
and finally the Controller Action (which would return a Patient using the patientGuid)
[HttpPost]
public Patient GetAdditionalPatientInformation(string patientGuid)
{
Patient currentPatient = currentPatients.Where<Patient>(p => p.PatientGuid == Guid.Parse(patientGuid)).FirstOrDefault();
return currentPatient;
}
Currently - the onRowSelect fires properly and calls the controller, which gets the correct Patient. I am just trying to figure out a simple tooltip to use to implement this - or if any other more elegant ways are avaiable.
Thanks greatly, If you need any elaborations - just ask.
Finally found a solution to this issue - as I could not find a plug-in that could solve this issue.
I created my own div that would be hidden (and act as the tool-tip) and then I simply changed my onRowSelect() function to call my Partial View and populate the div, as shown :
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();
});
The height and width are used to center the pop-up below the selected row in the grid. I hope that this helps someone if they run into any issues that are similar.
精彩评论