ComponentOne
Web API Explorer ASP.NET Web API Explorer
Wijmo5FlexGrid

Wijmo5FlexGrid

Conditional Styling

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

Features

Overview
Paging
Grouping
Hierarchical Data
Filtering
Frozen Cells
Conditional Styling
Id
Date
Country
Sales
0
Jun/15/2015
Japan
418.96
1
Sep/24/2015
US
6,227.09
2
Dec/12/2015
US
9,820.25
3
Sep/06/2015
Italy
4,880.01
4
Dec/18/2015
Germany
3,998.72
5
Jun/17/2015
Japan
908.97
6
Apr/01/2015
Germany
4,507.08
7
Nov/17/2015
Germany
688.79
8
Sep/25/2015
UK
9,400.43
9
Apr/14/2015
Greece
7,184.50
10
Mar/17/2015
Italy
5,786.01
11
Jul/16/2015
UK
2,139.11
12
Feb/23/2015
Greece
2,697.46
13
Mar/18/2015
Japan
33.32
14
Sep/15/2015
UK
7,798.06

Settings


Export
Export Name :

Description

This sample demonstrates how to export a wijmo5 flexgrid with format cells to excel file.
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 System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApiExplorer.Models;
 
namespace WebApiExplorer.Controllers
{
    public partial class Wijmo5FlexGridController : Controller
    {
        private readonly GridExportImportOptions _flexGridConditionalStylingModel = new GridExportImportOptions
        {
            NeedExport = true,
            NeedImport = false,
            IncludeColumnHeaders = true
        };
 
        public ActionResult ConditionalStyling()
        {
            ViewBag.Options = _flexGridConditionalStylingModel;
            return View();
        }
    }
}
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
@using WebApiExplorer.Models
@{
    GridExportImportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}
 
<div id="@(optionsModel.ControlId)" style="height:300px"></div>
 
@section Settings{
    @Html.Partial("_FlexGridOptions", optionsModel)
}
<script>
    var grid = new wijmo.grid.FlexGrid('#@(optionsModel.ControlId)');
    grid.initialize({
        autoGenerateColumns: false,
        columns: [
            { header: 'Id', binding: 'id' },
            { header: 'Date', binding: 'date', format: 'MMM/dd/yyyy' },
            { header: 'Country', binding: 'country' },
            { header: 'Sales', binding: 'sales', width: '*' }
        ],
        itemsSource: getGridData(100),
        allowResizing: 'None'
    });
    grid.itemFormatter = function (panel, r, c, cell) {
 
        // validate CellType and if correct column
        if (wijmo.grid.CellType.Cell === panel.cellType &&
            'sales' === 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 < 3000 ? 'red' : amount < 6000 ? 'black' : 'green';
    }
</script>
@section Description{
    @Html.Raw(Resources.Wijmo5FlexGrid.ConditionalStyling_Text0)
}