FlexGrid

FlexGrid

Globalization

This view shows how to localize the FlexGrid control.

Features

Description

Globalization

By default, MVC controls format and parse the data using American English culture. The decimal symbol is a period, the thousand separator is a comma, and the days of the week are "Sunday" through "Saturday".

If your application targets other cultures, register the appropriate culture by registering the MVC scripts in your HTML pages.

For example, to localize an application for the German culture, register the "de" culture while registering the scripts:

@Html.C1().Scripts().Culture("de")

Customization

The client FlexGridFilter class is localizable, and you can take advantage of this feature for modifying the UI strings and also the lists of conditions and operators.

In this sample, we customized the list of operators by assigning custom arrays to the filter's stringOperators, numberOperators, dateOperators, and booleanOperators.

using MvcExplorer.Models;
using System.Web.Mvc;

namespace MvcExplorer.Controllers
{
    public partial class FlexGridController : Controller
    {
        public ActionResult Globalization()
        {
            return View(Sale.GetData(50));
        }
    }
}
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>

@section Scripts{
    <script>
        var filter = wijmo.culture.FlexGridFilter;
        var Operator = wijmo.grid.filter.Operator;

        var stringOperators = filter.stringOperators;
        var customStringOperators = [
        { name: '(not set)', op: null },
        { name: 'Same', op: Operator.EQ },
        { name: 'Different', op: Operator.NE },
        { name: 'Bigger', op: Operator.GT }, // added
        { name: 'Smaller', op: Operator.LT }, // added
        //{ name: 'Begins with', op: Operator.BW },
        //{ name: 'Ends with', op: Operator.EW },
        //{ name: 'Has', op: Operator.CT },
        //{ name: 'Hasn\'t', op: Operator.NC }
        ];

        var numberOperators = filter.numberOperators;
        var customNumberOperators = [
        { name: '(not set)', Operator: null },
        { name: 'Same', op: Operator.EQ },
        { name: 'Different', op: Operator.NE },
        { name: 'Bigger', op: Operator.GT },
        //{ name: 'Is Greater than or equal to', op: Operator.GE },
        { name: 'Smaller', op: Operator.LT },
        //{ name: 'Is Less than or equal to', op: Operator.LE }
        ];

        var dateOperators = filter.dateOperators;
        var customDateOperators = [
        { name: '(not set)', op: null },
        { name: 'Same', op: Operator.EQ },
        { name: 'Earlier', op: Operator.LT },
        { name: 'Later', op: Operator.GT }
        ];

        var booleanOperators = filter.booleanOperators;
        var customBooleanOperators = [
        { name: '(not set)', op: null },
        { name: 'Is', op: Operator.EQ },
        { name: 'Isn\'t', op: Operator.NE }
        ];

        c1.documentReady(function () {
            customFilterUI();
        });

        function resetFilterUI() {
            filter.stringOperators = stringOperators;
            filter.numberOperators = numberOperators;
            filter.dateOperators = dateOperators;
            filter.booleanOperators = booleanOperators;
        }

        function customFilterUI() {
            filter.stringOperators = customStringOperators;
            filter.numberOperators = customNumberOperators;
            filter.dateOperators = customDateOperators;
            filter.booleanOperators = customBooleanOperators;
        }

        function handleCustomize(customize) {
            if (customize) {
                customFilterUI();
            } else {
                resetFilterUI();
            }
        }
    </script>
}

@(Html.C1().FlexGrid<Sale>()
    .Id("globalizationGrid")
    .AutoGenerateColumns(false)
    .Bind(b => b.Bind(Model).DisableServerRead(true))
    .IsReadOnly(true)
    .Columns(columns =>
    {
        columns.Add(column => column.Binding("ID"));
        columns.Add(column => column.Binding("Start"));
        columns.Add(column => column.Binding("End").Format("dddd hh:mm"));
        columns.Add(column => column.Binding("Country"));
        columns.Add(column => column.Binding("Product"));
        columns.Add(column => column.Binding("Color"));
        columns.Add(column => column.Binding("Amount").Format("c"));
        columns.Add(column => column.Binding("Amount2").Format("c"));
        columns.Add(column => column.Binding("Discount").Format("p0"));
        columns.Add(column => column.Binding("Active"));
    })
    .SelectionMode(SelectionMode.Row)
    .AllowSorting(true)
    .GroupBy("Product")
    .Filterable()
    .CssClass("grid")
)

<label>
    <b>Please select a culture</b>
    @Html.Partial("_CultureSelector")
</label>
<label>
    <input id="customize" type="checkbox" checked onclick="handleCustomize(this.checked);" />
    <b>Customize filter UI</b>
</label>

@section Summary{
    This view shows how to localize the FlexGrid control.
}

@section Description{
    <h3>
        Globalization
    </h3>
    <p>
        By default, MVC controls format and parse the data using American English culture.
        The decimal symbol is a period, the thousand separator is a comma, and the days of
        the week are "Sunday" through "Saturday".
    </p>
    <p>
        If your application targets other cultures, register the appropriate culture by
        registering the MVC scripts in your HTML pages.
    </p>
    <p>
        For example, to localize an application for the German culture, register the "de"
        culture while registering the scripts:
    </p>
    <div class="well">
        @@Html.C1().Scripts().Culture("de")
    </div>

    <h3>
        Customization
    </h3>
    <p>
        The client <b>FlexGridFilter</b> class is localizable, and you can take advantage
        of this feature for modifying the UI strings and also the lists of conditions and
        operators.
    </p>
    <p>
        In this sample, we customized the list of operators by assigning custom arrays to
        the filter's <b>stringOperators</b>, <b>numberOperators</b>, <b>dateOperators</b>,
        <b>and booleanOperators</b>.
    </p>
}