FlexGrid
Overview
This view shows basic features of FlexGrid for ASP.NET MVC.
Features
Sample
Settings
Description
FlexGrid for ASP.NET MVC is new version of the FlexGrid control, which is more flexible and powerful than ever.
This grid allows you to select, edit, sort, group, filter and page data. Additionally, this versatile FlexGrid control lets you format
data and easily visualize the hierarchical data. Performance is a vital attribute of FlexGrid, therefore, the core control is
lightweight and fast. For complex features the control uses extensions.
Source
IndexController.cs
using System.Collections; using System.Globalization; using System.Linq; using System.Web.Mvc; using C1.Web.Mvc; using MvcExplorer.Models; using System.Collections.Generic; using System; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { private readonly ControlOptions _gridDataModel = new ControlOptions { Options = new OptionDictionary { {"Items",new OptionItem{Values = new List<string> {"5", "50", "500", "5000", "50000", "100000", "500000", "1000000"},CurrentValue = "500"}}, {"Allow Sorting", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "False"}}, {"Selection",new OptionItem{Values = new List<string> {"None", "Cell", "CellRange", "Row", "RowRange", "ListBox", "MultiRange"},CurrentValue = "Cell"}}, {"Formatting", new OptionItem {Values = new List<string> {"On", "Off"}, CurrentValue = "Off"}}, {"Column Visibility",new OptionItem {Values = new List<string> {"Show", "Hide"}, CurrentValue = "Show"}}, {"Column Resize", new OptionItem {Values = new List<string> {"100", "150"}, CurrentValue = "100"}}, {"Css Class All", new OptionItem {Values = new List<string> {"None", "Red" , "Blue" , "Yellow"}, CurrentValue = "None"}}, {"Lazy Render", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "True"}}, } }; public ActionResult Index(FormCollection collection) { IValueProvider data = collection; if (CallbackManager.CurrentIsCallback) { var request = CallbackManager.GetCurrentCallbackData<CollectionViewRequest<object>>(); if (request != null && request.ExtraRequestData != null) { var extraData = request.ExtraRequestData.Cast<DictionaryEntry>() .ToDictionary(kvp => (string) kvp.Key, kvp => kvp.Value.ToString()); data = new DictionaryValueProvider<string>(extraData, CultureInfo.CurrentCulture); } } _gridDataModel.LoadPostData(data); var model = Sale.GetData(Convert.ToInt32(_gridDataModel.Options["items"].CurrentValue)); ViewBag.DemoOptions = _gridDataModel; return View(model); } } }
Index.cshtml
@using C1.Web.Mvc.Grid @model IEnumerable<Sale> @{ ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true; } <style type="text/css"> .Red{ color:red!important; } .Blue{ color:blue!important; } .Yellow{ color:yellow!important; } .None{ color:none; } </style> @section Scripts{ <script> function collectingQueryData(sender, e) { if (e.extraRequestData == null) { e.extraRequestData = {}; } @foreach (var menuName in optionsModel.Options.Keys.Select(ControlOptions.ToOptionName)) { <text> e.extraRequestData["@(menuName)"] = '@(optionsModel.Options[menuName].CurrentValue)'; </text> } } </script> } @(Html.C1().FlexGrid<Sale>() .Id("ovFlexGrid") .AutoGenerateColumns(false) .AllowSorting(Convert.ToBoolean(optionsModel.Options["Allow Sorting"].CurrentValue)) .SelectionMode((SelectionMode)Enum.Parse(typeof(SelectionMode), optionsModel.Options["Selection"].CurrentValue)) .Bind(bl => bl.InitialItemsCount(100).Bind(Model).OnClientQueryData("collectingQueryData")) .CssClass("grid") .IsReadOnly(true) .LazyRender(Convert.ToBoolean(optionsModel.Options["Lazy Render"].CurrentValue)) .Columns(bl => { bl.Add(cb => cb.Binding("ID") .Visible(string.Compare(optionsModel.Options["Column Visibility"].CurrentValue, "show", true) == 0)); bl.Add(cb => cb.Binding("Start").Format(optionsModel.Options["Formatting"].CurrentValue == "On" ? "MMM d yy" : "")); bl.Add(cb => cb.Binding("End").Format(optionsModel.Options["Formatting"].CurrentValue == "On" ? "HH:mm" : "")); bl.Add(cb => cb.Binding("Country").Width(optionsModel.Options["Column Resize"].CurrentValue)); bl.Add(cb => cb.Binding("Product").CssClassAll(optionsModel.Options["Css Class All"].CurrentValue)); bl.Add(cb => cb.Binding("Color")); bl.Add(cb => cb.Binding("Amount").Format("c")); bl.Add(cb => cb.Binding("Amount2").Format("c")); bl.Add(cb => cb.Binding("Discount").Format("p0")); bl.Add(cb => cb.Binding("Active")); }) ) @section Settings{ @Html.Partial("_OptionsMenu", optionsModel) } @section Summary{ <p>@Html.Raw(Resources.FlexGrid.Index_Text0)</p> } @section Description{ @Html.Raw(Resources.FlexGrid.Index_Text1) }
Documentation