Hi There,
I'm looking for some cell templating examples for asp.net core mvc helper. I've been through the documentation, blogs etc but cannot find details on this. Specifically what i'm trying to do is that when i hover over a particular column i would like it to display the full contents of a different column in the grid. Right now i'm using an unbound column to render a hyperlink that will show it, but it's not ideal.
Are there any sample projects that have this functionality that i can look at?
Thanks
Hello,
I have been looking into your question and in order to ensure that the described scenario is addressed correctly, I will need some additional information regarding your scenario. Could you please answer the following questions:
This information is going to be highly appreciated and will help me in my further investigation.
Looking forward to hearing from you.
Thank you for your cooperation.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics
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); } });}
Thank you for the provided information.
I have been looking into your question and in order to achieve your requirements and have a tooltip of cells from a specific column or several columns, what I can suggest as an approach is to handle the Tooltip igGrid feature.
First, you'll handle the Template property of the column or columns you want to have a tooltip for their cells. In the template, you will insert a paragraph element with a set class that will contain additional styles about the tooltip and display the information for each cell.
column.For(x => x.Description).HeaderText("Description").DataType("string").Width("400px").Template("<p class='tooltip-grid-notes'>${ Description}</p>");
The paragraph element class for the template column will contain additional white-space, text-overflow, and overflow styles to display the tooltip properly.
.tooltip-grid-notes { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
Then, in the igGrid control's feature definition, you'll add the Tooltip feature.
Features(features => { features.Tooltips(); } );
In addition, you will handle the Visibility property of the tooltip feature and enable the tooltips to always be displayed by passing TooltipsVisibility.Always.
Features(features => { features.Tooltips().Visibility(TooltipsVisibility.Always); } );
You can then handle the ColumnSettings of the tooltip feature and handle the settings for each individual column whether to display a tooltip for it or not according to your requirements. This will be done by handling the AllowTooltips property and passing true or false to display or not display the tooltip.
Features(features => { features.Tooltips().Visibility(TooltipsVisibility.Always).ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("CustomerID").AllowTooltips(false); settings.ColumnSetting().ColumnKey("CompanyName").AllowTooltips(false); settings.ColumnSetting().ColumnKey("ContactName").AllowTooltips(false); settings.ColumnSetting().ColumnKey("Address").AllowTooltips(true); settings.ColumnSetting().ColumnKey("City").AllowTooltips(false); settings.ColumnSetting().ColumnKey("Salary").AllowTooltips(false); settings.ColumnSetting().ColumnKey("Description").AllowTooltips(true); }); })
The described scenario could be observed here:
In addition, I have prepared a small sample illustrating this behavior which could be found attached here. Please test it on your side and let me know how it behaves.
More information can be found in the Tooltips Feature topic from our Ignite UI jQuery documentation.
If you require any further assistance on the matter, please let me know.
igGridCellTemplateTooltip.zip
Cell templating in ASP.NET often refers to customizing the content and appearance of cells in grid controls or tables. Depending on the framework you are using (Web Forms, MVC, or Blazor), the approach can vary. Here are examples of cell templating for different ASP.NET technologies:
<asp:GridView ID="gvItems" runat="server" AutoGenerateColumns="False"> <Columns> <asp:TemplateField HeaderText="Title"> <ItemTemplate> <div> <%# Eval("Title") %> </div> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Description"> <Item
I’ve been reading about some advanced treatments and their potential benefits. Can anyone provide more information on how these treatments compare to traditional methods? I’m particularly interested in their effectiveness and side effects.
@ geometry dash, Can you suggest any part of this forum that needs improvement?
This forum is amazing and there is a lot of useful content here infinite craft. Companies can use this content to further improve the quality of disposable nitrile gloves although they have not received any complaints about them yet. However, there is still room for improvement.