FlexGrid
Auto Generate Columns
The FlexGrid supports generating columns automatically which the width of auto-generate columns can be customizable based on their data-type.
Features
Settings
The following settings are for the first grid only, the second grid is always set AutoGenerateColumns to true:Description
This page show how the AutoGenerateColumns property works with the static property DefaultTypeWidth.
The static property DefaultTypeWidth allow to set the default width of auto-generate columns based on their data-type.
It's "static property", means only need to set this property once for any grid then it should work for all grids which are created following.
CopyHeaders property allows to specify whether the grid should include row and/or column headers when copying data to the clipboard.
The selectionMode property allows you to change that so that users are restricted to selecting rows, row ranges, non-contiguous rows (like in a list-box), single cells, or nothing at all.
The Visible property allows you to set row or column is visible.(Grid is set AutoGenerateColumns to false)
Use the LazyRender property to sets whether the grid should skip rendering cells that were updated in the last render cycle.
using System.Web.Mvc; using MvcExplorer.Models; using System.Collections.Generic; using System; using C1.Web.Mvc; using System.Collections; using System.Linq; using System.Globalization; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { private readonly ControlOptions _gridAutoGenerateColumnsOptions = new ControlOptions { Options = new OptionDictionary { {"Auto Generate Columns", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "True"}}, {"Number Columns Width", new OptionItem {Values = new List<string> {"60", "100", "120", "150"}, CurrentValue = "120"}}, {"Date Columns Width", new OptionItem {Values = new List<string> {"60", "100", "120", "150"}, CurrentValue = "100"}}, {"String Columns Width", new OptionItem {Values = new List<string> {"60", "100", "120", "150"}, CurrentValue = "150"}}, {"Boolean Columns Width", new OptionItem {Values = new List<string> {"60", "100", "120", "150"}, CurrentValue = "60"}}, {"Selection",new OptionItem{Values = new List<string> {"None", "Cell", "CellRange", "Row", "RowRange", "ListBox", "MultiRange"},CurrentValue = "Cell"}}, {"Column Visibility",new OptionItem {Values = new List<string> {"Show", "Hide"}, CurrentValue = "Show"}}, {"Copy Header", new OptionItem {Values = new List<string> {"None", "Column", "Row", "All"}, CurrentValue = "None"}}, {"Lazy Render", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "True"}} } }; public ActionResult AutoGenerateColumns(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); } } _gridAutoGenerateColumnsOptions.LoadPostData(data); ViewBag.DemoOptions = _gridAutoGenerateColumnsOptions; var model = Sale.GetData(500); return View(model); } } }
@using C1.Web.Mvc.Grid @model IEnumerable<Sale> @{ ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true; } @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("agcFlexGrid") .AutoGenerateColumns(Convert.ToBoolean(optionsModel.Options["Auto Generate Columns"].CurrentValue)) .SortingType(AllowSorting.SingleColumn) .SelectionMode((SelectionMode)Enum.Parse(typeof(SelectionMode), optionsModel.Options["Selection"].CurrentValue)) .CopyHeaders((CopyHeader)Enum.Parse(typeof(CopyHeader), optionsModel.Options["Copy Header"].CurrentValue)) .Bind(bl => bl.InitialItemsCount(100).Bind(Model).OnClientQueryData("collectingQueryData")) .CssClass("grid") .IsReadOnly(true) .Columns(bl => { if (optionsModel.Options["Auto Generate Columns"].CurrentValue == "False") { bl.Add(cb => cb.Binding("ID").Visible(string.Compare(optionsModel.Options["Column Visibility"].CurrentValue, "show", true) == 0)); bl.Add(cb => cb.Binding("Start").Format("MMM d yy")); bl.Add(cb => cb.Binding("End").Format("HH:mm")); bl.Add(cb => cb.Binding("Country").Width("100")); bl.Add(cb => cb.Binding("Product")); 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")); bl.Add(cb => cb.Binding("Rank")); } }) .DefaultTypeWidth(DataType.Number, Convert.ToInt32(optionsModel.Options["Number Columns Width"].CurrentValue)) .DefaultTypeWidth(DataType.Date, Convert.ToInt32(optionsModel.Options["Date Columns Width"].CurrentValue)) .DefaultTypeWidth(DataType.String, Convert.ToInt32(optionsModel.Options["String Columns Width"].CurrentValue)) .DefaultTypeWidth(DataType.Boolean, Convert.ToInt32(optionsModel.Options["Boolean Columns Width"].CurrentValue)) .Height(250) .LazyRender(Convert.ToBoolean(optionsModel.Options["Lazy Render"].CurrentValue)) ) @(Html.C1().FlexGrid<Sale>() .Id("agcFlexGrid1") .AutoGenerateColumns(true) .SortingType(AllowSorting.SingleColumn) .SelectionMode(SelectionMode.Cell) .Bind(bl => bl.InitialItemsCount(100).Bind(Model).OnClientQueryData("collectingQueryData")) .CssClass("grid") .IsReadOnly(true) .SelectionMode((SelectionMode)Enum.Parse(typeof(SelectionMode), optionsModel.Options["Selection"].CurrentValue)) .CopyHeaders((CopyHeader)Enum.Parse(typeof(CopyHeader), optionsModel.Options["Copy Header"].CurrentValue)) .Height(250) .LazyRender(Convert.ToBoolean(optionsModel.Options["Lazy Render"].CurrentValue)) ) @section Settings{ <span style="color:gray">@Html.Raw(Resources.FlexGrid.AutoGenerateColumns_Text2)</span> @Html.Partial("_OptionsMenu", optionsModel) } @section Summary{ <p>@Html.Raw(Resources.FlexGrid.AutoGenerateColumns_Text0)</p> } @section Description{ <p>@Html.Raw(Resources.FlexGrid.AutoGenerateColumns_Text1)</p> <p>@Html.Raw(Resources.FlexGrid.CopyHeaders_Text0)</p> <p>@Html.Raw(Resources.FlexGrid.SelectionMode_Text0)</p> <p>@Html.Raw(Resources.FlexGrid.ColumnVisibility_Text0)</p> <p>@Html.Raw(Resources.FlexGrid.LazyRender_Text0)</p> }