MVCFlexGrid - Conditional Styling

MVCFlexGrid

Conditional Styling

This sample demonstrates how to export a mvc flexgrid with format cells to excel file.

Features

Sample
Source
Documentation

Country

Product

Amount

Settings

Export

Export Name :

Description

This sample demonstrates how to export a mvc flexgrid with format cells to excel file.

ConditionalStylingController.cs
ConditionalStyling.cshtml

using C1.Web.Mvc; 
using C1.Web.Mvc.Serialization; 
using Microsoft.AspNetCore.Mvc; 
using WebApiExplorer.Models; 
  
namespace WebApiExplorer.Controllers 
{ 
    public partial class MVCFlexGridController : Controller 
    { 
        private readonly GridExportImportOptions _flexGridConditionalStylingModel = new GridExportImportOptions 
        { 
            NeedExport = true, 
            NeedImport = false, 
            IncludeColumnHeaders = true
        }; 
  
        public IActionResult ConditionalStyling() 
        { 
            ViewBag.Options = _flexGridConditionalStylingModel; 
            return View(); 
        } 
  
        public IActionResult ConditionalStyling_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData) 
        { 
            return this.C1Json(CollectionViewHelper.Read(requestData, Sale.GetData(500))); 
        } 
    } 
}

@{ 
    GridExportImportOptions optionsModel = ViewBag.Options; 
    ViewBag.DemoSettings = true; 
} 
  
<script>
    function itemFormatter(panel, r, c, cell) { 
  
        // validate CellType and if correct column 
        if (wijmo.grid.CellType.Cell === panel.cellType && 
            'Amount' === panel.columns[c].binding) { 
  
            // get the cell's data 
            var cellData = panel.getCellData(r, c); 
  
            // set cell's foreground color 
            cell.style.color = getAmountColor(cellData); 
        } 
    } 
  
    // get the color used to display an amount 
    function getAmountColor(amount) { 
        return amount < 1500 ? 'red' : amount < 3000 ? 'black' : 'green'; 
    } 
</script>
  
<c1-flex-grid id="@optionsModel.ControlId" auto-generate-columns="false" class="grid" is-read-only="true" allow-resizing="None" item-formatter="itemFormatter"> 
    <c1-items-source read-action-url="@Url.Action("ConditionalStyling_Bind")"></c1-items-source> 
    <c1-flex-grid-column binding="ID"></c1-flex-grid-column> 
    <c1-flex-grid-column binding="Country"></c1-flex-grid-column> 
    <c1-flex-grid-column binding="Product"></c1-flex-grid-column> 
    <c1-flex-grid-column binding="Amount" format="c" width="*" align="center"></c1-flex-grid-column> 
</c1-flex-grid> 
  
@section Settings{ 
    @Html.Partial("_FlexGridOptions", optionsModel) 
} 
  
@section Description{ 
    @Html.Raw(MVCFlexGrid.ConditionalStyling_Text0) 
} 