@model FlexGrid101.Models.FlexGridModel
@using FlexGrid101.Models

@{
    ViewBag.Title = "ASP.NET MVC FlexGrid Introduction";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="header">
    <div class="container">
        <img src="@Url.Content("~/Content/c1logo.png")" alt="Component One ASP.NET MVC" />
        <h1>
            ASP.NET MVC FlexGrid 101
        </h1>
        <p>
            This page shows how to get started with ASP.NET MVC's FlexGrid controls.
        </p>
    </div>
</div>

<div class="container">
    <div class="sample-page download-link">
        <a href="http://www.componentone.com/Download/">Download Free Trial</a>
    </div>
    <!-- Getting Started -->
    <div>
        <h2>Getting Started</h2>
        <p>
            Steps for getting started with the FlexGrid control in MVC applications:
        </p>
        <ol>
            <li>Create a new MVC project using the C1 ASP.NET MVC application template.</li>
            <li>Add controller and corresponding view to the project.</li>
            <li>Initialize the FlexGrid control in view using razor syntax.</li>
            <li>(Optional) Add some CSS to customize the FlexGrid control's appearance.</li>
        </ol>
        <p>
            This will create a FlexGrid with default behavior, which includes
            automatic column generation, column sorting and reordering, editing,
            and clipboard support.
        </p>
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#gsHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>                        
                        <li><a href="#gsCss" role="tab" data-toggle="tab">CSS</a></li>
                        <li><a href="#gsCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="gsHtml">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;

    &lt;/head&gt;
    &lt;body&gt;
        &lt;!-- this is the grid --&gt;
        @@(Html.C1().FlexGrid().Id("gsFlexGrid")
            .IsReadOnly(true)
            .AllowSorting(true)
            .Bind(Model.CountryData)
            .AutoGenerateColumns(true)
        )

    &lt;/body&gt;
&lt;/html&gt;

                        </div>                        
                        <div class="tab-pane pane-content" id="gsCss">
                            
/* set default grid style */
.wj-flexgrid {
    height: 300px;
    background-color: white;
    box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
    margin-bottom: 12px;
}

                        </div>
                        <div class="tab-pane pane-content" id="gsCS">

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;

namespace FlexGrid101.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult Index()
        {
            FlexGridModel model = new FlexGridModel();            
            model.CountryData = Sale.GetData(500);
            return View(model);
        }
    }
}


                            </div>
                        </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                @(Html.C1().FlexGrid<Sale>().Id("gsFlexGrid")
                    .IsReadOnly(true)
                    .AllowSorting(true)
                    .Bind(Model.CountryData)
                    .AutoGenerateColumns(true)
                )

            </div>
        </div>
    </div>



    <!-- column definitions -->
    <div>
        <h2>Column Definitions</h2>
        <p>
            The Getting Started example did not define any columns, so FlexGrid generated them
            automatically.
        </p>
        <p>
            This example shows how you can define the columns using the FlexGrid's <b>Columns</b> property.
        </p>
        <p>
            Specifying the columns allows you to choose which columns to show, and in what order.
            This also gives you control over each column&#39;s Width, Heading, Formatting, Alignment,
            and other properties.
        </p>
        <p>
            In this case, we use star sizing to set the width of the "Country" column. This tells the
            column to stretch to fill the available width of the grid so there is no empty space. On
            the "Amount" column, we set the format property to "n0",  which results in numbers with thousand separators and no decimal digits. On
            the "Discount" column, we set the format property to "p0", which results in numbers with
            percentage and no decimal digits.
        </p>
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#cdHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#cdCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="cdHtml">

@@(Html.C1().FlexGrid().Id("cdInitMethod").IsReadOnly(true).AutoGenerateColumns(false).AllowSorting(true)
    .Bind(Model.CountryData).CssClass("grid")
    .Columns(bl =&gt;
    {
        bl.Add(cb =&gt; cb.Binding("ID").Header("ID"));
        bl.Add(cb =&gt; cb.Binding("Start").Header("Start").Format("MMM d yy"));
        bl.Add(cb =&gt; cb.Binding("End").Header("End").Format("HH:mm"));
        bl.Add(cb =&gt; cb.Binding("Country").Header("Country").Width("*"));
        bl.Add(cb =&gt; cb.Binding("Amount").Format("n0"));
        bl.Add(cb =&gt; cb.Binding("Amount2"));
        bl.Add(cb =&gt; cb.Binding("Discount").Format("p0"));
        bl.Add(cb =&gt; cb.Binding("Active"));
    })
)

</div>
                        <div class="tab-pane pane-content" id="cdCS">

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;

namespace FlexGrid101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexGridModel model = new FlexGridModel();            
            model.CountryData = Sale.GetData(500);
            return View(model);
        }
    }
}

</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                @(Html.C1().FlexGrid<Sale>().Id("cdInitMethod").IsReadOnly(true).AutoGenerateColumns(false).AllowSorting(true)
                    .Bind(Model.CountryData).CssClass("grid")
                    .Columns(bl =>
                    {
                        bl.Add(cb => cb.Binding("ID").Header("ID"));
                        bl.Add(cb => cb.Binding("Start").Header("Start").Format("MMM d yy"));
                        bl.Add(cb => cb.Binding("End").Header("End").Format("HH:mm"));
                        bl.Add(cb => cb.Binding("Country").Header("Country").Width("*"));
                        bl.Add(cb => cb.Binding("Amount").Format("n0"));
                        bl.Add(cb => cb.Binding("Amount2"));
                        bl.Add(cb => cb.Binding("Discount").Format("p0"));
                        bl.Add(cb => cb.Binding("Active"));
                    })
                    )
            </div>
        </div>
    </div>


    <!-- selection modes -->
    <div>
        <h2>Selection Modes</h2>
        <p>
            By default, FlexGrid allows you to select a range of cells with the mouse or keyboard,
            just like Excel. The <b>SelectionMode</b> property allows you to change that so that you
            can select a Row, a Range of Rows, Non-Contiguous Rows (like in a List-Box), a Single Cell, a Range of Cells
            or disable selection altogether.
        </p>
        <p>
            This example allows you to pick the <b>SelectionMode</b> from a C1 ASP.NET MVC's ComboBox control.
        </p>
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#smHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#smJs" role="tab" data-toggle="tab">JS</a></li>
                        <li><a href="#smCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="smHtml">

@@(Html.C1().FlexGrid().Id("smFlexGrid").IsReadOnly(true).AutoGenerateColumns(false).AllowSorting(true)
    .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.None)
    .Bind(Model.CountryData).CssClass("grid")
    .Columns(bl =&gt;
    {
        bl.Add(cb =&gt; cb.Binding("ID").Header("ID").Width("*"));
        bl.Add(cb =&gt; cb.Binding("Country").Header("Country").Width("*"));
        bl.Add(cb =&gt; cb.Binding("Amount").Format("c").Width("*"));
        bl.Add(cb =&gt; cb.Binding("Discount").Format("p0").Width("*"));
        bl.Add(cb =&gt; cb.Binding("Active").Width("*"));
    })
)
&lt;br /&gt;Selection Mode
@@(Html.C1().ComboBox().Id("smMenu").Bind(Model.Settings["SelectionMode"])
    .SelectedIndex(0).OnClientSelectedIndexChanged("smMenu_SelectedIndexChanged")
)

                        </div>
                        <div class="tab-pane pane-content" id="smJs">
                            
var smFlexGrid = smMenu = gFlexGrid = null;

$(document).ready(function () {
    //Selection Modes Modules
    smFlexGrid = wijmo.Control.getControl("#smFlexGrid");
});

//Selection Modes Modules
function smMenu_SelectedIndexChanged(sender)
{
    if(sender.selectedValue!=null && smFlexGrid!=null)
    {
        smFlexGrid.selectionMode = sender.selectedValue;
    }

}

                        </div>
                        <div class="tab-pane pane-content" id="smCS">

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;

namespace FlexGrid101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexGridModel model = new FlexGridModel();
            model.Settings = CreateSettings();
            model.CountryData = Sale.GetData(500);            
            return View(model);
        }

        private IDictionary&lt;string, object[]&gt; CreateSettings()
        {
            var settings = new Dictionary&lt;string, object[]&gt;
            {
                {"SelectionMode",new object[]{SelectionMode.None.ToString(),SelectionMode.Cell.ToString(),SelectionMode.CellRange.ToString(),SelectionMode.Row.ToString(),SelectionMode.RowRange.ToString(),SelectionMode.ListBox.ToString()}}                                
            };
            return settings;
        }
    }
}

                            </div>
                        </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                @(Html.C1().FlexGrid<Sale>().Id("smFlexGrid").IsReadOnly(true).AutoGenerateColumns(false).AllowSorting(true)
                .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.None)
                .Bind(Model.CountryData).CssClass("grid")
                    .Columns(bl =>
                    {
                        bl.Add(cb => cb.Binding("ID").Header("ID").Width("*"));
                        bl.Add(cb => cb.Binding("Country").Header("Country").Width("*"));
                        bl.Add(cb => cb.Binding("Amount").Format("c").Width("*"));
                        bl.Add(cb => cb.Binding("Discount").Format("p0").Width("*"));
                        bl.Add(cb => cb.Binding("Active").Width("*"));
                    })
                )
                <br />Selection Mode
                @(Html.C1().ComboBox().Id("smMenu").Bind(Model.Settings["SelectionMode"])
                                    .SelectedIndex(0).OnClientSelectedIndexChanged("smMenu_SelectedIndexChanged")
                )
            </div>
        </div>
    </div>



    <!-- editing -->
    <div>
        <h2>Editing</h2>
        <p>
            FlexGrid has built-in support for fast, in-cell editing like you find in Excel. There is no
            need to add extra columns with Edit buttons that switch between display and edit modes.
        </p>
        <p>
            Users can start editing by typing into any cell. This puts the cell in quick-edit mode.
            In this mode, pressing a cursor key finishes the editing and moves the selection to a different cell.
        </p>
        <p>
            Another way to start editing is by pressing F2 or by clicking a cell twice. This puts the cell in
            full-edit mode. In this mode, pressing a cursor key moves the caret within the cell text.
            To finish editing and move to another cell, the user must press the Enter, Tab, or Escape key.
        </p>
        <p>
            Data is automatically coerced to the proper type when editing finishes. If the user enters invalid
            data, the edit is cancelled and the original data remains in place.
        </p>
        <p>
            There are two modes for updating the data to the server.
        </p>
        <ol>
            <li>
                By default, the update operation will be commit to the server once finishing editing.
                <p>
                    <b>Notices:</b>
                    If the user wants to commit the update operation to the datasource server, the Update, Delete or Create action url should be provided.
                    And the corresponding codes used to update the datasource should be written in the corresponding action.
                </p>
            </li>
            <li>
                The other mode is called BatchEdit. The user can update, create or remove multiple items.
                Once these modifications are confirmed, They could be commit to the data source only once. 
                Now these modifications can be commit by the commit method of CollectionView in client side.
                The user can also commit them by sorting, paging or filtering behavior.
                <p>
                    <b>Notices:</b>
                     In this mode, the BatchEdit action url should be provided and the corresponding codes used to update the datasource should be written.
                </p>
            </li>
        </ol>
        <p>
            You can disable editing at the Grid, Column, or Row levels using the <b>IsReadOnly</b> property of the
            Grid, Column, or Row objects. In this example, we make the ID column read-only.
        </p>

        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#eHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#eCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="eHtml">

@@(Html.C1().FlexGrid()
    .Id("eFlexGrid").AutoGenerateColumns(false).AllowSorting(true)
    .Bind(bl =&gt; 
        bl.Bind(Url.Action("GridRead"))
        .Update(Url.Action("EGridUpdate"))
    )
    .CssClass("grid")
    .Columns(bl =&gt;
    {
        bl.Add(cb =&gt; cb.Binding("ID").Header("ID").Width("*").IsReadOnly(true));
        bl.Add(cb =&gt; cb.Binding("Country").Header("Country").Width("*"));
        bl.Add(cb =&gt; cb.Binding("Amount").Format("c").Width("*"));
        bl.Add(cb =&gt; cb.Binding("Discount").Format("p0").Width("*"));
        bl.Add(cb =&gt; cb.Binding("Active").Width("*"));
    })
)

</div>
                        <div class="tab-pane pane-content" id="eCS">

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;

namespace FlexGrid101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GridRead([C1JsonRequest] CollectionViewRequest&lt;Sale&gt; requestData)
        {
            return this.C1Json(CollectionViewHelper.Read(requestData, FlexGridModel.Source));
        }

        public ActionResult EGridUpdate([C1JsonRequest]CollectionViewEditRequest&lt;Sale&gt; requestData)
        {
            return this.C1Json(CollectionViewHelper.Edit&lt;Sale&gt;(requestData, sale =&gt;
            {
                string error = string.Empty;
                bool success = true;
                var fSale = FlexGridModel.Source.Find(item =&gt; item.ID == sale.ID);
                fSale.Amount = sale.Amount;
                fSale.Discount = sale.Discount;
                fSale.Active = sale.Active;
                return new CollectionViewItemResult&lt;Sale&gt;
                {
                    Error = error,
                    Success = success && ModelState.IsValid,
                    Data = fSale
                };
            }, () =&gt; FlexGridModel.Source));
        }
    }
}

</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                @(Html.C1().FlexGrid<Sale>()
                    .Id("eFlexGrid").AutoGenerateColumns(false).AllowSorting(true)
                    .Bind(bl => 
                        bl.Bind(Url.Action("GridRead"))
                        .Update(Url.Action("EGridUpdate"))
                    )
                    .CssClass("grid")
                    .Columns(bl =>
                    {
                        bl.Add(cb => cb.Binding("ID").Header("ID").Width("*").IsReadOnly(true));
                        bl.Add(cb => cb.Binding("Country").Header("Country").Width("*"));
                        bl.Add(cb => cb.Binding("Amount").Format("c").Width("*"));
                        bl.Add(cb => cb.Binding("Discount").Format("p0").Width("*"));
                        bl.Add(cb => cb.Binding("Active").Width("*"));
                    })
                )
            </div>
        </div>
    </div>


    <!-- grouping -->
    <div>
        <h2>
            Grouping
        </h2>
        <p>
            FlexGrid supports grouping of client side data, set the <b>GroupBy</b> property to a column name for grouping the data according to a column.
        </p>
        <p>
            Internally, FlexGrid supports grouping through the client side <b>IItemsSource</b> interface. To enable grouping at client side, add one or more <b>GroupDescription</b> objects to the
            <b>itemsSource.groupDescriptions</b> property. It is easy to let the grid grouped by some field by calling the method GroupBy of FlexGridBuilder with the corresponding field name. And ensure that the grid's <b>ShowGroups</b> property
            is set to true (the default value).
            <b>GroupDescription</b> objects are flexible, allowing you to group data based on value or on grouping
            functions. The example below groups dates by year; amounts by range returning three ranges: over 5,000,
            1,000 to 5,000, 500 to 1,000, and under 500; and anything else by value. Use the menu to see the effects of each grouping.
        </p>
        <p>
            Notice that the "Amount" column displays the totals in the group rows. We do this by
            setting the column's <b>Aggregate</b> property to "Sum." The aggregate is automatically
            updated when you edit the values in the column.
        </p>

        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#gHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#gJs" role="tab" data-toggle="tab">JS</a></li>
                        <li><a href="#gCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="gHtml">

@@(Html.C1().FlexGrid()
    .Id("gFlexGrid").AutoGenerateColumns(false).AllowSorting(true).IsReadOnly(true)
    .GroupBy("Country")
    .Bind(Model.CountryData)
    .CssClass("grid")
    .Columns(bl =&gt;
    {
        bl.Add(cb =&gt; cb.Binding("Country").Header("Country").Width("*"));
        bl.Add(cb =&gt; cb.Binding("Product").Header("Product").Width("*"));
        bl.Add(cb =&gt; cb.Binding("Color").Header("Color").Width("*"));
        bl.Add(cb =&gt; cb.Binding("Start").Header("Start").Width("*"));
        bl.Add(cb =&gt; cb.Binding("Amount").Header("Amount").Format("n0").Width("*")
            .Aggregate(C1.Web.Mvc.Grid.Aggregate.Sum));
    })
)
&lt;br /&gt;Group By
@@(Html.C1().ComboBox().Id("gMenu").Bind(Model.Settings["GroupBy"])
    .SelectedIndex(0).OnClientSelectedIndexChanged("gMenu_SelectedIndexChanged")
)

</div>
                        <div class="tab-pane pane-content" id="gJs">
                            
//Group By Modules
function gMenu_SelectedIndexChanged(sender) {
    var grid = wijmo.Control.getControl("#gFlexGrid");
    if (sender.selectedValue && grid) {
        var name = sender.selectedValue;
        var groupDescriptions = grid.collectionView.groupDescriptions;
        grid.beginUpdate();
        groupDescriptions.clear();

        if (name.indexOf("Country") &gt; -1) {
            groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Country"));
        }

        if (name.indexOf("Product") &gt; -1) {
            groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Product"));
        }

        if (name.indexOf("Color") &gt; -1) {
            groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Color"));
        }

        if (name.indexOf("Start") &gt; -1) {
            groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Start", function (item, prop) {
                var value = item[prop];
                return value.getFullYear() + "/" + value.getMonth();
            }));
        }

        if (name.indexOf("Amount") &gt; -1) {
            groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Amount", function (item, prop) {
                var value = item[prop];
                if (value &lt;= 500) {
                    return "&lt;500";
                }

                if (value &gt; 500 && value &lt;= 1000) {
                    return "500 to 1000";
                }

                if (value &gt; 1000 && value &lt;= 5000) {
                    return "1000 to 5000";
                }

                return "More than 5000";
            }));
        }
        grid.endUpdate();
    }
}


                        </div>
                        <div class="tab-pane pane-content" id="gCS">

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;

namespace FlexGrid101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexGridModel model = new FlexGridModel();
            model.Settings = CreateSettings();
            model.CountryData = Sale.GetData(500);
            return View(model);
        }

        private IDictionary&lt;string, object[]&gt; CreateSettings()
        {
            var settings = new Dictionary&lt;string, object[]&gt;
            {                
                {"GroupBy", new object[]{"Country", "Product", "Color","Start","Amount","Country and Product","Product and Color", "None"}}
            };
            return settings;
        }
    }
}

</div>
                        </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                @(Html.C1().FlexGrid<Sale>()
                    .Id("gFlexGrid").AutoGenerateColumns(false).AllowSorting(true).IsReadOnly(true)
                    .GroupBy("Country")
                    .Bind(Model.CountryData)
                    .CssClass("grid")
                    .Columns(bl =>
                    {
                        bl.Add(cb => cb.Binding("Country").Header("Country").Width("*"));
                        bl.Add(cb => cb.Binding("Product").Header("Product").Width("*"));
                        bl.Add(cb => cb.Binding("Color").Header("Color").Width("*"));
                        bl.Add(cb => cb.Binding("Start").Header("Start").Width("*"));
                        bl.Add(cb => cb.Binding("Amount").Header("Amount").Format("n0").Width("*")
                            .Aggregate(C1.Web.Mvc.Grid.Aggregate.Sum));
                    })
                )
                <br />Group By
                @(Html.C1().ComboBox().Id("gMenu").Bind(Model.Settings["GroupBy"])
                    .SelectedIndex(0).OnClientSelectedIndexChanged("gMenu_SelectedIndexChanged")
                )
            </div>
        </div>
    </div>


    <!-- filtering -->
    <div>
        <h2>Filtering</h2>
        <p>
            The FlexGrid supports filtering through the <b>Filterable</b> property. To enable filtering, set the <b>Filterable(fl => fl.ColumnFilters()</b> property.
        </p>
        <p>
            In this example, we create a filter for the ID, Country, Product, Color, Start and get the filter value from the input control.
        </p>

        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#fHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#fCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="fHtml">
                            
@@(Html.C1().FlexGrid&lt;Sale&gt;()
    .Id("fFlexGrid").AutoGenerateColumns(false).AllowSorting(true).IsReadOnly(true)
    .Bind(Model.CountryData)
    .CssClass("grid")
    .Filterable&lt;Sale&gt;(fl =&gt; fl.ColumnFilters(cfsb =&gt;
    {
        for(var index = 0; index &lt;  Model.FilterBy.Length; index++)
        {
            cfsb.Add(cfb =&gt; cfb.Column(Model.FilterBy[index]).FilterType(FilterType.Condition));
        }              
    }))
    .Columns(bl =&gt;
    {
        bl.Add(cb =&gt; cb.Binding("ID").Header("ID"));
        bl.Add(cb =&gt; cb.Binding("Country").Header("Country"));
        bl.Add(cb =&gt; cb.Binding("Product").Header("Product"));
        bl.Add(cb =&gt; cb.Binding("Color").Header("Color"));
        bl.Add(cb =&gt; cb.Binding("Start").Header("Start").Format("MMM d yy"));
        bl.Add(cb =&gt; cb.Binding("Discount").Format("p0"));
    })
)

</div>
                        <div class="tab-pane pane-content" id="fCS">
                            
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;

namespace FlexGrid101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexGridModel model = new FlexGridModel();
            model.CountryData = Sale.GetData(500);
            model.FilterBy = new string[] { "ID", "Country", "Product", "Color", "Start" };
            return View(model);
        }
    }
}

</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                @(Html.C1().FlexGrid<Sale>()
                    .Id("fFlexGrid").AutoGenerateColumns(false).AllowSorting(true).IsReadOnly(true)
                    .Bind(Model.CountryData)
                    .CssClass("grid")
                    .Filterable<Sale>(fl => fl.DefaultFilterType(FilterType.None).ColumnFilters(cfsb =>
                    {
                        for (var index = 0; index < Model.FilterBy.Length; index++)
                        {
                            cfsb.Add(cfb => cfb.Column(Model.FilterBy[index]).FilterType(FilterType.Condition));
                        }
                    }))
                    .Columns(bl =>
                    {
                        bl.Add(cb => cb.Binding("ID").Header("ID"));
                        bl.Add(cb => cb.Binding("Country").Header("Country"));
                        bl.Add(cb => cb.Binding("Product").Header("Product"));
                        bl.Add(cb => cb.Binding("Color").Header("Color"));
                        bl.Add(cb => cb.Binding("Start").Header("Start").Format("MMM d yy"));
                        bl.Add(cb => cb.Binding("Discount").Format("p0"));
                    })
                )
            </div>
        </div>
    </div>



    <!-- paging -->
    <div>
        <h2>Paging</h2>
        <p>
            The FlexGrid supports paging through the <b>Pager</b> control. To enable paging, set the <b>PageSize</b> property to the number
            of items you want on each page, and use Pager control to bind this FlexGrid.
        </p>
        <p>
            In this example, we set <b>PageSize</b> to show 10 items per page. We add Pager control and set <b>Owner</b> Property to the FlexGrid id,
            then we can switch pages.
        </p>

        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#pHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#pCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="pHtml">
                            
@@(Html.C1().FlexGrid()
    .Id("pFlexGrid").AutoGenerateColumns(false).AllowSorting(true).IsReadOnly(true).CssStyle("height", "auto")
    .Bind(Model.CountryData)
    .CssClass("grid")
    .PageSize(10)
    .Columns(bl =&gt;
    {
        bl.Add(cb =&gt; cb.Binding("ID").Header("ID"));
        bl.Add(cb =&gt; cb.Binding("Country").Header("Country"));
        bl.Add(cb =&gt; cb.Binding("Product").Header("Product"));
        bl.Add(cb =&gt; cb.Binding("Color").Header("Color"));
        bl.Add(cb =&gt; cb.Binding("Start").Header("Start").Format("MMM d yy"));
        bl.Add(cb =&gt; cb.Binding("Discount").Format("p0"));
    })
)
@@Html.C1().Pager().Owner("pFlexGrid")
                                                        
                        </div>                        
                        <div class="tab-pane pane-content" id="pCS">

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;

namespace FlexGrid101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexGridModel model = new FlexGridModel();
            model.CountryData = Sale.GetData(500);
            return View(model);
        }
    }
}

</div>

                        </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                @(Html.C1().FlexGrid<Sale>()
                    .Id("pFlexGrid").AutoGenerateColumns(false).AllowSorting(true).IsReadOnly(true).CssStyle("height", "auto")
                    .Bind(Model.CountryData)
                    .CssClass("grid")
                    .PageSize(10)
                    .Columns(bl =>
                    {
                        bl.Add(cb => cb.Binding("ID").Header("ID"));
                        bl.Add(cb => cb.Binding("Country").Header("Country"));
                        bl.Add(cb => cb.Binding("Product").Header("Product"));
                        bl.Add(cb => cb.Binding("Color").Header("Color"));
                        bl.Add(cb => cb.Binding("Start").Header("Start").Format("MMM d yy"));
                        bl.Add(cb => cb.Binding("Discount").Format("p0"));
                    })
                )
                @Html.C1().Pager().Owner("pFlexGrid")
            </div>
        </div>
    </div>

    <!-- conditional styling -->
    <div>
        <h2>Conditional Styling</h2>
        <p>
            FlexGrid has an <b>ItemFormatter</b> property that gives you complete control over
            the contents of the cells.
        </p>
        <p>
            This example uses a JavaScript function to create value ranges that return named
            colors. We then call this function in the FlexGrid's <b>ItemFormatter</b> and pass the cell's data
            in order to conditionally set the cell's foreground color.
        </p>

        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#csHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#csJs" role="tab" data-toggle="tab">JS</a></li>
                        <li><a href="#csCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="csHtml">
                            
@@(Html.C1().FlexGrid()
    .Id("csFlexGrid").AutoGenerateColumns(false).AllowSorting(true).IsReadOnly(true)
    .Bind(Model.CountryData)
    .ItemFormatter("csFlexGrid_ItemFormatter")
    .Columns(bl =&gt;
    {
        bl.Add(cb =&gt; cb.Binding("Country").Header("Country"));
        bl.Add(cb =&gt; cb.Binding("Product").Header("Product"));
        bl.Add(cb =&gt; cb.Binding("Discount").Format("p0"));
        bl.Add(cb =&gt; cb.Binding("Amount").Format("n0"));
    })
)

</div>
                        <div class="tab-pane pane-content" id="csJs">

//Conditional styling Modules
function csFlexGrid_ItemFormatter(panel, r, c, cell) {
    if (wijmo.grid.CellType.Cell == panel.cellType && panel.columns[c].binding == 'Amount') {
        var cellData = panel.getCellData(r, c);
        cell.style.color = cellData &lt; 0 ? 'red' : cellData &lt; 500 ? 'black' : 'green';
    }
    if (wijmo.grid.CellType.Cell == panel.cellType && panel.columns[c].binding == 'Discount') {
        var cellData = panel.getCellData(r, c);
        cell.style.color = cellData &lt; .1 ? 'red' : cellData &lt; .2 ? 'black' : 'green';
    }
}

                        </div>
                        <div class="tab-pane pane-content" id="csCS">

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;

namespace FlexGrid101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexGridModel model = new FlexGridModel();
            model.CountryData = Sale.GetData(500);
            return View(model);
        }
    }
}

</div>
                        </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                @(Html.C1().FlexGrid<Sale>()
                    .Id("csFlexGrid").AutoGenerateColumns(false).AllowSorting(true).IsReadOnly(true)
                    .Bind(Model.CountryData)
                    .ItemFormatter("csFlexGrid_ItemFormatter")
                    .Columns(bl =>
                    {
                        bl.Add(cb => cb.Binding("Country").Header("Country"));
                        bl.Add(cb => cb.Binding("Product").Header("Product"));
                        bl.Add(cb => cb.Binding("Discount").Format("p0"));
                        bl.Add(cb => cb.Binding("Amount").Format("n0"));
                    })
                )
            </div>
        </div>
    </div>


    <!-- themes -->
    <div>
        <h2>Themes</h2>
        <p>
            The appearance of the FlexGrid is defined in CSS. In addition to the default theme, we
            include about a dozen professionally designed themes that customize the appearance of
            all C1 ASP.NET MVC controls to achieve a consistent, attractive look.
        </p>
         <p>
            In this example, we add a "custom-flex-grid" class to the grid element and define some
            CSS rules to create a simple "black and white, no borders" theme for any grids that
            have the "custom-flex-grid" class.
        </p>

        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#tHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>                        
                        <li><a href="#tCss" role="tab" data-toggle="tab">CSS</a></li>
                        <li><a href="#tCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="tHtml">
                            
@@(Html.C1().FlexGrid()
    .Id("tFlexGrid").AutoGenerateColumns(false).AllowSorting(true).IsReadOnly(true)
    .Bind(Model.CountryData)
    .CssClass("custom-flex-grid")
    .Columns(bl =&gt;
    {
        bl.Add(cb =&gt; cb.Binding("Country").Header("Country"));
        bl.Add(cb =&gt; cb.Binding("Product").Header("Product"));
        bl.Add(cb =&gt; cb.Binding("Discount").Format("p0"));
        bl.Add(cb =&gt; cb.Binding("Amount").Format("n0"));
    })
)

                        </div>                        
                        <div class="tab-pane pane-content" id="tCss">
                            
.custom-flex-grid .wj-header.wj-cell {
    color: #fff;
    background-color: #000;
    border-bottom: solid 1px #404040;
    border-right: solid 1px #404040;
    font-weight: bold;
}

.custom-flex-grid .wj-cell {
    background-color: #fff;
    border: none;
}

.custom-flex-grid .wj-alt:not(.wj-state-selected):not(.wj-state-multi-selected) {
    background-color: #fff;
}

.custom-flex-grid .wj-state-selected {
    background: #000;
    color: #fff;
}

.custom-flex-grid .wj-state-multi-selected {
    background: #222;
    color: #fff;
}

                        </div>
                        <div class="tab-pane pane-content" id="tCS">

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;

namespace FlexGrid101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexGridModel model = new FlexGridModel();
            model.CountryData = Sale.GetData(500);
            return View(model);
        }
    }
}

</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>                
                @(Html.C1().FlexGrid<Sale>()
                    .Id("tFlexGrid").AutoGenerateColumns(false).AllowSorting(true).IsReadOnly(true)
                    .Bind(Model.CountryData)
                    .CssClass("custom-flex-grid")
                    .Columns(bl =>
                    {
                        bl.Add(cb => cb.Binding("Country").Header("Country"));
                        bl.Add(cb => cb.Binding("Product").Header("Product"));
                        bl.Add(cb => cb.Binding("Discount").Format("p0"));
                        bl.Add(cb => cb.Binding("Amount").Format("n0"));
                    })
                )
            </div>
        </div>
    </div>

    <!-- trees/hierarchical data -->
    <div>
        <h2>Trees and Hierarchical Data</h2>
        <p>
            In addition to grouping, FlexGrid supports hierarchical data, that is, data with items
            that have lists of subitems. This type of hierarchical structure is very common, and is
            usually displayed in a tree-view control.
        </p>
        <p>
            To use FlexGrid with hierarchical data sources, set the <b>ChildItemsPath</b> property
            to the name of the data element that contains the child elements. The grid automatically
            scans the data and builds the tree for you.
        </p>

        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#tvHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>                        
                        <li><a href="#tvCss" role="tab" data-toggle="tab">CSS</a></li>
                        <li><a href="#tvCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="tvHtml">

@@(Html.C1().FlexGrid()
    .Id("tvFlexGrid").AutoGenerateColumns(false).IsReadOnly(true)
    .Bind(Model.TreeData)
    .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.ListBox)
    .AllowResizing(C1.Web.Mvc.Grid.AllowResizing.None)
    .AllowSorting(false)
    .ChildItemsPath("Children")
    .CssClass("custom-flex-grid")
    .Columns(bl =&gt;
    {
        bl.Add().Binding("Header").Width("*").Header("Folder/File Name");
        bl.Add().Binding("Size").Width("80").Align("center");
    })
)

                        </div>                        
                        <div class="tab-pane pane-content" id="tvCss">

.custom-flex-grid .wj-header.wj-cell {
    color: #fff;
    background-color: #000;
    border-bottom: solid 1px #404040;
    border-right: solid 1px #404040;
    font-weight: bold;
}

.custom-flex-grid .wj-cell {
    background-color: #fff;
    border: none;
}

.custom-flex-grid .wj-alt:not(.wj-state-selected):not(.wj-state-multi-selected) {
    background-color: #fff;
}

.custom-flex-grid .wj-state-selected {
    background: #000;
    color: #fff;
}

.custom-flex-grid .wj-state-multi-selected {
    background: #222;
    color: #fff;
}

</div>
                        <div class="tab-pane pane-content" id="tvCS">

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;

namespace FlexGrid101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            FlexGridModel model = new FlexGridModel();
            model.CountryData = Sale.GetData(500);
            return View(model);
        }
    }
}

</div>
                        </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>
                @(Html.C1().FlexGrid<ITreeItem>()
                    .Id("tvFlexGrid").AutoGenerateColumns(false).IsReadOnly(true)
                    .Bind(Model.TreeData)
                    .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.ListBox)
                    .AllowResizing(C1.Web.Mvc.Grid.AllowResizing.None)
                    .AllowSorting(false)
                    .ChildItemsPath("Children")
                    .CssClass("custom-flex-grid")
                    .Columns(bl =>
                    {
                        bl.Add().Binding("Header").Width("*").Header("Folder/File Name");
                        bl.Add().Binding("Size").Width("80").Align("center");
                    })
                )
            </div>
        </div>
    </div>


    <!-- handling null values -->
    <div>
        <h2>Handling null values</h2>
        <p>
            By default, FlexGrid allows you to enter empty values in columns of type string,
            and will not allow empty/null values in columns of any other type.
        </p>
        <p>
            You can change this behavior using the <b>IsRequired</b> property on grid columns.
            If you set the <b>IsRequired</b> property to false, the grid will allow you to
            enter empty values in that column, regardless of type. Conversely, if you set
            the <b>IsRequired</b> property to true, the grid will not allow empty values
            even in string columns.
        </p>
        <p>
            Setting <b>IsRequired</b> to null reverts to the default behavior (nulls allowed
            only in string columns).
        </p>
        <p>
            The grid below reverts the default behavior. It sets <b>IsRequired</b> to false
            for the first column, and to true for all others. You can delete content that
            is not required by entering an empty string or simply by pressing the delete
            key.
        </p>
        <div class="row">
            <div class="col-md-6">
                <div>
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a href="#nvHtml" role="tab" data-toggle="tab">Index.cshtml</a></li>
                        <li><a href="#nvCS" role="tab" data-toggle="tab">HomeController.cs</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active pane-content" id="nvHtml">
                            
@@(Html.C1().FlexGrid()
    .Id("nvGrid").AutoGenerateColumns(false).AllowSorting(true)
    .Bind(bl =&gt; 
        bl.Bind(Url.Action("GridRead"))
        .Update(Url.Action("NVGridUpdate"))
        )
    .Columns(bl =&gt;
    {
        bl.Add(cb =&gt; cb.Binding("ID").Header("ID").IsReadOnly(true));
        bl.Add(cb =&gt; cb.Binding("Country").Header("Country").IsRequired(false));
        bl.Add(cb =&gt; cb.Binding("Product").Header("Product").IsRequired(true));
        bl.Add(cb =&gt; cb.Binding("Discount").Format("p0").IsRequired(true));
        bl.Add(cb =&gt; cb.Binding("Amount").Format("n0").IsRequired(true));
    })
)

                        </div>
                        <div class="tab-pane pane-content" id="nvCS">

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using FlexGrid101.Models;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;

namespace FlexGrid101.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }

    public ActionResult GridRead([C1JsonRequest] CollectionViewRequest&lt;Sale&gt; requestData)
    {
        return this.C1Json(CollectionViewHelper.Read(requestData, FlexGridModel.Source));
    }

    public ActionResult NVGridUpdate([C1JsonRequest]CollectionViewEditRequest&lt;Sale&gt; requestData)
    {
        return this.C1Json(CollectionViewHelper.Edit&lt;Sale&gt;(requestData, sale =&gt;
        {
            string error = string.Empty;
            bool success = true;
            var fSale = FlexGridModel.Source.Find(item =&gt; item.ID == sale.ID);
            fSale.Country = sale.Country;
            fSale.Product = sale.Product;
            fSale.Amount = sale.Amount;
            fSale.Discount = sale.Discount;
            return new CollectionViewItemResult&lt;Sale&gt;
            {
                Error = error,
                Success = success && ModelState.IsValid,
                Data = fSale
            };
        }, () =&gt; FlexGridModel.Source));
    }
}

</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <h4>Result (live):</h4>                
                @(Html.C1().FlexGrid<Sale>()
                    .Id("nvGrid").AutoGenerateColumns(false).AllowSorting(true)
                    .Bind(bl => 
                        bl.Bind(Url.Action("GridRead"))
                        .Update(Url.Action("NVGridUpdate"))
                     )
                    .Columns(bl =>
                    {
                        bl.Add(cb => cb.Binding("ID").Header("ID").IsReadOnly(true));
                        bl.Add(cb => cb.Binding("Country").Header("Country").IsRequired(false));
                        bl.Add(cb => cb.Binding("Product").Header("Product").IsRequired(true));
                        bl.Add(cb => cb.Binding("Discount").Format("p0").IsRequired(true));
                        bl.Add(cb => cb.Binding("Amount").Format("n0").IsRequired(true));
                    })
                )
            </div>
        </div>
    </div>
    
</div>

<script type="text/javascript">
    c1.documentReady(function () {
        if (window["InitialControls"]) {
            window["InitialControls"]();
        }
    });
</script>