Hi Georgi,

Really what i'm looking for is some examples on how to use the cell Template feature using the asp.net mvc helper in .net core. What i'm trying to do, is that when i hover over a specific cell, it will show a popup of a different cell value. For display purposes we're truncating the value of the initial cell to 50 characters,, but when we hover over the cell we want to show the full contents of the data field. I've accomplished it temporatily by adding a hyper link and modal window, which works. But if we could do an on-hover event it would be even better.

Here's the code that renders the grid:

@(
Html.Infragistics().Grid(Model.ReportData).ID("grid1")
.PrimaryKey("NotificationId")
.AutoGenerateColumns(false)
.Columns(column =>
{
column.For(x => x.NotificationId).Hidden(true);
column.For(x => x.NotificationDate).HeaderText("Notification Date");
column.For(x => x.NotificationType).HeaderText("Notification Type").DataType("string");
column.For(x => x.MessageType).HeaderText("Message Type");
column.For(x => x.Subject).HeaderText("Subject Line");
column.For(x => x.Customer).HeaderText("Customer Number");
column.For(x => x.Email).HeaderText("Email Address");
column.For(x => x.Phone).HeaderText("Mobile");
column.For(x => x.Status).HeaderText("Phone Number");
column.For(x => x.ErrorMessage).HeaderText("Error Message");
column.For(x => x.MessageText).HeaderText("Message Text");
column.Unbound("ViewMessage").Template("<a href='javascript:ShowMessageText(${NotificationId});' title='View'><i class='fa-solid fa-magnifying-glass' style='color:#154c79'></a>").HeaderText("View Message");
}).Features(features =>
{
features.Sorting().Type(OpType.Local);
features.Paging().Type(OpType.Local).PageSize(100);
features.Filtering().Type(OpType.Local);
})
.Height("800").Width("100%").DataBind().Render()
)

and the javascript call that populates the modal window:

function ShowMessageText(notificationId) {
$.ajax({
type: "POST",
url: "/Reports/MessageTextPopup",
data: { "notificationId": notificationId },
success: function (response) {
$("#partialModal").find(".modal-body").html(response);
$("#partialModal").modal('show');
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
}