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; using System.Collections.Generic; using System.Linq; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; using C1.Web.Mvc; using C1.Web.Mvc.Serialization; #if !NETCORE30 && !NET50 using Microsoft.AspNetCore.Http.Internal; #endif using Microsoft.Extensions.Primitives; using Microsoft.AspNetCore.Http; using C1.Web.Mvc.Grid; 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(IFormCollection data) { _gridAutoGenerateColumnsOptions.LoadPostData(data); ViewBag.DemoOptions = _gridAutoGenerateColumnsOptions; var opts = _gridAutoGenerateColumnsOptions.Options; ViewBag.DefTypeWidth = String.Format("{0},{1},", DataType.Number, opts["Number Columns Width"].CurrentValue) + String.Format("{0},{1},", DataType.Date, opts["Date Columns Width"].CurrentValue) + String.Format("{0},{1},", DataType.String, opts["String Columns Width"].CurrentValue) + String.Format("{0},{1},", DataType.Boolean, opts["Boolean Columns Width"].CurrentValue); var model = Sale.GetData(500); return View(model); } } }
@using C1.Web.Mvc.Grid @model IEnumerable<Sale> @{ ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true; string defTypeWidth = ViewBag.DefTypeWidth; } @if (optionsModel.Options["Auto Generate Columns"].CurrentValue == "False") { <c1-flex-grid id="agcFlexGrid" auto-generate-columns="false" class="grid" is-read-only="true" sorting-type="SingleColumn" height="250px" selection-mode="@((SelectionMode)Enum.Parse(typeof(SelectionMode), optionsModel.Options["Selection"].CurrentValue))" copy-headers="@((CopyHeader)Enum.Parse(typeof(CopyHeader), optionsModel.Options["Copy Header"].CurrentValue))" lazy-render="@(Convert.ToBoolean(optionsModel.Options["Lazy Render"].CurrentValue))" default-type-width="@defTypeWidth"> <c1-flex-grid-column binding="ID" is-visible="@(string.Compare(optionsModel.Options["Column Visibility"].CurrentValue, "show", true) == 0)"></c1-flex-grid-column> <c1-flex-grid-column binding="Start" format="@("MMM d yy")"></c1-flex-grid-column> <c1-flex-grid-column binding="End" format="@("HH:mm")"></c1-flex-grid-column> <c1-flex-grid-column binding="Country" width="@("100")"></c1-flex-grid-column> <c1-flex-grid-column binding="Product"></c1-flex-grid-column> <c1-flex-grid-column binding="Color"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column> <c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column> <c1-flex-grid-column binding="Active"></c1-flex-grid-column> <c1-flex-grid-column binding="Rank"></c1-flex-grid-column> <c1-items-source initial-items-count="100" source-collection="Model"></c1-items-source> </c1-flex-grid> } else { <c1-flex-grid id="agcFlexGrid" auto-generate-columns="true" class="grid" is-read-only="true" sorting-type="SingleColumn" height="250px" selection-mode="@((SelectionMode)Enum.Parse(typeof(SelectionMode), optionsModel.Options["Selection"].CurrentValue))" copy-headers="@((CopyHeader)Enum.Parse(typeof(CopyHeader), optionsModel.Options["Copy Header"].CurrentValue))" lazy-render="@(Convert.ToBoolean(optionsModel.Options["Lazy Render"].CurrentValue))" default-type-width="@defTypeWidth"> <c1-items-source initial-items-count="100" source-collection="Model"></c1-items-source> </c1-flex-grid> } <c1-flex-grid id="agcFlexGrid1" auto-generate-columns="true" class="grid" is-read-only="true" sorting-type="SingleColumn" height="250px" selection-mode="@((SelectionMode)Enum.Parse(typeof(SelectionMode), optionsModel.Options["Selection"].CurrentValue))" copy-headers="@((CopyHeader)Enum.Parse(typeof(CopyHeader), optionsModel.Options["Copy Header"].CurrentValue))" lazy-render="@(Convert.ToBoolean(optionsModel.Options["Lazy Render"].CurrentValue))"> <c1-items-source initial-items-count="100" source-collection="Model"></c1-items-source> </c1-flex-grid> @section Settings{ <span style="color:gray">@Html.Raw(FlexGridRes.AutoGenerateColumns_Text2)</span> @await Html.PartialAsync("_OptionsMenu", optionsModel) } @section Summary{ <p>@Html.Raw(FlexGridRes.AutoGenerateColumns_Text0)</p> } @section Description{ <p>@Html.Raw(FlexGridRes.AutoGenerateColumns_Text1)</p> <p>@Html.Raw(FlexGridRes.CopyHeaders_Text0)</p> <p>@Html.Raw(FlexGridRes.SelectionMode_Text0)</p> <p>@Html.Raw(FlexGridRes.ColumnVisibility_Text0)</p> <p>@Html.Raw(FlexGridRes.LazyRender_Text0)</p> }