FlexGrid
Custom Cells
Features
Sample
Settings
Description
This view shows the FlexGrid control's custom cells features.
Uses Template property for generating the HTML content of data cells in the Column.
Source
CustomCellsController.cs
using System.Web.Mvc; using MvcExplorer.Models; using System.Collections.Generic; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { private readonly ControlOptions _customCellsDataModel = new ControlOptions { Options = new OptionDictionary { {"Formatting", new OptionItem {Values = new List<string> {"On", "Off"}, CurrentValue = "Off"}}, {"Css Class All", new OptionItem {Values = new List<string> {"None", "Red" , "Blue" , "Yellow"}, CurrentValue = "None"}} } }; public ActionResult CustomCells(FormCollection collection) { _customCellsDataModel.LoadPostData(collection); ViewBag.DemoOptions = _customCellsDataModel; return View(Sale.GetData(500)); } } }
CustomCells.cshtml
@model IEnumerable<Sale> @{ ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true; } @section Scripts{ <script type="text/javascript"> function rankFormatter(panel, r, c, cell) { if (panel.columns[c].header === "Rank") { cell.style.textAlign = ""; if (panel.cellType === wijmo.grid.CellType.Cell) { cell.innerHTML = buildRank(panel.getCellData(r, c)); } } } function buildRank(rank) { var markup = "", j, starType; for (j = 0; j < 5; j++) { starType = j < rank ? "star star-highlighted" : "star star-dimmed"; markup += "<span class='" + starType + "'>\u2605</span>"; } return markup; } function createButton(CellMaker) { return CellMaker.makeButton({ text: '<b>${item.Country}</b> Button', click: function (e, ctx) { alert('Clicked Button ** ' + ctx.item.Country + ' **'); } }); } function createHyperlink(CellMaker) { return CellMaker.makeLink({ text: 'Visit <b>${item.Country}</b>', href: '${item.Url}', attributes: { target: '_blank', rel: 'noopener noreferrer', tabIndex: -1 } }); } function createImage(CellMaker) { return CellMaker.makeImage({ label: 'image for ${item.Country}', click: function (e, ctx) { alert('Clicked image for ' + ctx.item.Country); } }); } function createRating(CellMaker) { return CellMaker.makeRating({ range: [0, 5], label: 'Edit Product Rating' }); } function createSparkline(CellMaker) { return CellMaker.makeSparkline({ markers: wijmo.grid.cellmaker.SparklineMarkers.High | wijmo.grid.cellmaker.SparklineMarkers.Low, label: '${item.Country} sales history line chart', }); } </script> } @section Styles{ <style> .star-highlighted { color: orange; } .star-dimmed { color: lightgray; } .wj-cell.wj-cell-maker label{ padding: 0; } /* images (applying formats to the cell, not to the inner IMG element */ .wj-flexgrid .wj-cell.cell-img { padding: 0; text-align: center; } .wj-flexgrid .wj-cell.cell-img:hover { z-index: 1; overflow: visible; } .wj-flexgrid .wj-cell.cell-img:hover img { transform: scale(3); transition: all 600ms; } .wj-flexgrid .wj-cell img.wj-cell-maker{ width: auto; } /* customize the rating symbol/color/size */ .wj-flexgrid .wj-cell.wj-cell-maker.wj-radio-map.custom-rating label { width: .25em; color: green; } .wj-flexgrid .wj-cell.wj-cell-maker.wj-radio-map.custom-rating label:after { transform: scale(12); content: '\2b24'; } .Red{ color:red!important; } .Blue{ color:blue!important; } .Yellow{ color:yellow!important; } .None{ color:none; } </style> } <script id="template1" type="text/template"> @(Html.C1().FlexChart() .Width(100).Height(20).CssStyle("padding", "0") .TemplateBind("ItemsSource", "Trends") .BindingX("Month") .Series(s => s.Add().Binding("Data")) .AxisX(C1.Web.Mvc.Chart.Position.None) .AxisY(C1.Web.Mvc.Chart.Position.None) .ToTemplate() ) </script> @(Html.C1().FlexGrid<Sale>() .Id("customCellFlexGrid") .AutoGenerateColumns(false) .IsReadOnly(false) .Bind(Model) .CssClass("grid") .Columns(columns => { columns.Add(column => column.Binding("ID").IsReadOnly(true).Width("50")); columns.Add(column => column.Binding("Country").Width("80")); columns.Add(column => column.Binding("Product").Width("80").CssClassAll(optionsModel.Options["Css Class All"].CurrentValue)); columns.Add(column => column.Binding("Amount").Width("100") .Format(optionsModel.Options["Formatting"].CurrentValue == "On" ? "c" : "") .Template("<span class=${item.Amount > 1000 ? 'bg-info' : 'bg-danger'}>${text}</span>")); columns.Add(column => column.Header("Trends").IsReadOnly(true).Align("center").CellTemplate(b => b.TemplateId("template1"))); columns.Add(column => column.Binding("Rank").IsReadOnly(true).Width("90").Align("center")); columns.Add(column => column.Binding("Country").Header("CellMaker Button").Width("150").Align("center").TemplateFunction("createButton")); columns.Add(column => column.Binding("Country").Header("CellMaker Hyperlink").Width("180").TemplateFunction("createHyperlink")); columns.Add(column => column.Binding("Img").Header("CellMaker Image").Width("140").CssClass("cell-img").TemplateFunction("createImage")); columns.Add(column => column.Binding("Rank").Header("CellMaker Rating").Width("150").Align("center").CssClass("custom-rating").TemplateFunction("createRating")); columns.Add(column => column.Binding("History").Header("CellMaker Sparkline").Width("180").TemplateFunction("createSparkline")); }) .ItemFormatter("rankFormatter") ) @section Settings{ @Html.Partial("_OptionsMenu", optionsModel) } @section Description{ <p>@Html.Raw(Resources.FlexGrid.CustomCells_Text0)</p> <p>@Html.Raw(Resources.FlexGrid.CustomCells_Text1)</p> }
Documentation