FlexGrid

CustomCellsController.cs CustomCells.cshtml

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));
        }
    }
}

@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>
}

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Scheduling >

Documents >

Input and Editing >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Scheduling

Documents

Input and Editing

Tutorials

New Features

Getting Started Guides

Sample Applications

Custom Cells

Features

Settings

Description