FlexGrid
FlexGrid
Header Tooltips
This sample shows how you can add tooltips to the grid's column headers.
Features
0
loading...
Description
This sample shows how you can add tooltips to the grid's column headers.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using Microsoft.Extensions.Primitives; using MvcExplorer.Models; using System.Collections.Generic; using System.Linq; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { public ActionResult HeaderTooltips(IFormCollection collection) { return View(); } public ActionResult HeaderTooltips_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData) { var model = Sale.GetData(50); return this.C1Json(CollectionViewHelper.Read(requestData, model)); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | @using C1.Web.Mvc.Grid @model IEnumerable<Sale> <style> .hdr-tip { background: black; color: lightblue; padding: 1em 2em; margin: .5em; border-radius: 1em; } .hdr-tip .col-header { color: orange; font-weight: bold; font-size: 150%; } </style> @section Scripts{ <script type="text/javascript"> var hdrTips; c1.documentReady(function () { // Column header tooltips hdrTips = new wijmo.Tooltip({ position: wijmo.PopupPosition.RightTop, showAtMouse: true, showDelay: 600, cssClass: 'hdr-tip' }); }); function formatItem(panel, r, c, cell) { if (panel.cellType == wijmo.grid.CellType.ColumnHeader) { hdrTips.setTooltip(cell, 'This is column<br/>' + '<span class="col-header">' + panel.columns[c].header + '</span>'); } } function loadingRows() { if (hdrTips) { hdrTips.dispose(); } } </script>} <c1-flex-grid id="gridHeaderTooltips" auto-generate-columns="true" class="grid" is-read-only="true" item-formatter="formatItem" loading-rows="loadingRows"> <c1-items-source read-action-url="@Url.Action("HeaderTooltips_Bind")"></c1-items-source> </c1-flex-grid> @section Summary{ <p>@Html.Raw(FlexGridRes.HeaderTooltips_Text0)</p> } @section Description{ @Html.Raw(FlexGridRes.HeaderTooltips_Text0) } |