diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/primary.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/primary.cs new file mode 100644 index 0000000000..8becfe6081 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/primary.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var Order = OrderDetails.GetAllRecords(); + ViewBag.dataSource = Order; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/primary/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/razor similarity index 63% rename from ej2-asp-core-mvc/code-snippet/grid/columns/primary/razor rename to ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/razor index 66be67f99c..de350aaddb 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/primary/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/razor @@ -2,8 +2,6 @@ diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/tagHelper new file mode 100644 index 0000000000..f88cb4f2b8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/auto-primary/tagHelper @@ -0,0 +1,10 @@ + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/auto/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/auto/razor index ce978cae52..adc629c241 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/auto/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/auto/razor @@ -1 +1 @@ -@Html.EJS().Grid("Auto").DataSource((IEnumerable)ViewBag.dataSource).Render() \ No newline at end of file +@Html.EJS().Grid("Auto").AllowPaging(true).DataSource((IEnumerable)ViewBag.DataSource).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/auto/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/auto/tagHelper index 41a74d15f1..b3f635c106 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/auto/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/auto/tagHelper @@ -1,3 +1,2 @@ - - + diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/autocolumnformat/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/autocolumnformat/razor index dd6343e9dc..3bd43b3909 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/autocolumnformat/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/autocolumnformat/razor @@ -1,17 +1,19 @@ -@Html.EJS().Grid("Auto").DataSource((IEnumerable)ViewBag.dataSource).DataBound("dataBound").Render() - +@Html.EJS().Grid("Auto").DataSource((IEnumerable)ViewBag.DataSource).DataBound("dataBound").Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/autocolumnformat/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/autocolumnformat/tagHelper index 0b1293565f..217aa103d2 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/autocolumnformat/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/autocolumnformat/tagHelper @@ -4,16 +4,19 @@ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-array/arraytypecolumns.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-array/arraytypecolumns.cs new file mode 100644 index 0000000000..c64d4d3451 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-array/arraytypecolumns.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var ComplexData = ComplexData.GetAllRecords(); + ViewBag.DataSource = ComplexData; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-array/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-array/razor new file mode 100644 index 0000000000..0c2f58d53f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-array/razor @@ -0,0 +1,16 @@ +@{ + var valueAccess = "valueAccessFn"; +} + +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Height(350).Columns(col => +{ + col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); + col.Field("Name").HeaderText("Full Name").ValueAccessor(valueAccess).Width("150").Add(); + col.Field("Title").HeaderText("Title").Width("150").Add(); +}).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-array/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-array/tagHelper new file mode 100644 index 0000000000..039c655690 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-array/tagHelper @@ -0,0 +1,17 @@ +@{ + var valueAccess = "valueAccessFn"; +} + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-expression/expressioncolumn.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-expression/expressioncolumn.cs new file mode 100644 index 0000000000..52bca32b62 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-expression/expressioncolumn.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var Order = FoodDetails.GetAllRecords(); + ViewBag.DataSource = Order; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-expression/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-expression/razor new file mode 100644 index 0000000000..884e90db4c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-expression/razor @@ -0,0 +1,19 @@ +@{ + var totalCalories = "totalCaloriesFn"; +} + +@Html.EJS().Grid("ValueAccessor").DataSource((IEnumerable)ViewBag.DataSource).Height(350).Columns(col => +{ + col.Field("FoodName").HeaderText("Food Name").Width("150").Add(); + col.Field("Protein").HeaderText("Protein").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); + col.Field("Fat").HeaderText("Fat").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("80").Add(); + col.Field("Carbohydrate").HeaderText("Carbohydrate").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); + col.HeaderText("Calories Intake").ValueAccessor(totalCalories).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("150").Add(); + +}).Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-expression/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-expression/tagHelper new file mode 100644 index 0000000000..b37cc8ad2e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-expression/tagHelper @@ -0,0 +1,19 @@ +@{ + var totalCalories = "totalCaloriesFn"; +} + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-remote/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-remote/razor new file mode 100644 index 0000000000..78aee1bd5a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-remote/razor @@ -0,0 +1,12 @@ +@Html.EJS().Grid("Grid").DataSource(dataManger => +{ + dataManger.Url("https://services.odata.org/V4/Northwind/Northwind.svc/Orders/").CrossDomain(true).Adaptor("ODataV4Adaptor"); + +}).Query("new ej.data.Query().expand('Employee')").Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer Name").Width("120").Add(); + col.Field("ShipCity").HeaderText("Ship City").Width("130").Add(); + col.Field("Employee.City").HeaderText("City").Width("130").Add(); + +}).AllowPaging().Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/primary/primary.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-remote/remotedata.cs similarity index 100% rename from ej2-asp-core-mvc/code-snippet/grid/columns/primary/primary.cs rename to ej2-asp-core-mvc/code-snippet/grid/columns/column-render-remote/remotedata.cs diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-remote/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-remote/tagHelper new file mode 100644 index 0000000000..e62f7f8cf8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-remote/tagHelper @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-serial/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-serial/razor new file mode 100644 index 0000000000..0bb5cf6f8d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-serial/razor @@ -0,0 +1,23 @@ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.dataSource).Height(350).Columns(col => +{ + col.HeaderText("S.No").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Width("90").Add(); + col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); + col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); + col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); + col.Field("ShipCity").HeaderText("Ship City").Width("150").Add(); +}).AllowPaging().RowDataBound("rowDataBound").Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-serial/serialnumber.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-serial/serialnumber.cs new file mode 100644 index 0000000000..931c902716 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-serial/serialnumber.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var Order = OrdersDetails.GetAllRecords(); + ViewBag.dataSource = Order; + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-serial/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-serial/tagHelper new file mode 100644 index 0000000000..eb5efdd3c3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-serial/tagHelper @@ -0,0 +1,23 @@ + + + + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-valueaccessor/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-valueaccessor/razor new file mode 100644 index 0000000000..df5424d2da --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-valueaccessor/razor @@ -0,0 +1,21 @@ +@{ + var currencyFormatter = "currencyFormatterFn"; + var concatenateFields = "concatenateFieldsFn"; +} + +@Html.EJS().Grid("ValueAccessor").DataSource((IEnumerable)ViewBag.DataSource).Height(350).Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); + col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); + col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").ValueAccessor(currencyFormatter).Add(); + col.Field("ShipCity").HeaderText("Ship City").ValueAccessor(concatenateFields).Width("150").Add(); +}).Render() + + diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-valueaccessor/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-valueaccessor/tagHelper new file mode 100644 index 0000000000..e12cf02564 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-valueaccessor/tagHelper @@ -0,0 +1,23 @@ +@{ + var currencyFormatter = "currencyFormatterFn"; + var concatenateFields = "concatenateFieldsFn"; +} + + + + + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-valueaccessor/valueaccessor.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-valueaccessor/valueaccessor.cs new file mode 100644 index 0000000000..fea0f40648 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-render-valueaccessor/valueaccessor.cs @@ -0,0 +1,6 @@ +public IActionResult Index() +{ + var Order = OrdersDetails.GetAllRecords(); + ViewBag.DataSource = Order; + return View(); +} diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/valueaccessor/valueaccessor.cs b/ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/column-rendering.cs similarity index 97% rename from ej2-asp-core-mvc/code-snippet/grid/columns/valueaccessor/valueaccessor.cs rename to ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/column-rendering.cs index 77d8fe70cf..f6f0126ac7 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/valueaccessor/valueaccessor.cs +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/column-rendering.cs @@ -3,4 +3,4 @@ public IActionResult Index() var Order = OrderDetails.GetAllRecords(); ViewBag.DataSource = Order; return View(); -} +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/razor new file mode 100644 index 0000000000..c1ee428ee1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/razor @@ -0,0 +1,9 @@ +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => +{ + col.Field("OrderID").HeaderText("Order ID").Width("100").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("CustomerID").HeaderText("Customer ID").Width("120").Add(); + col.Field("Freight").HeaderText("Freight").Width("80").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("OrderDate").HeaderText("Order Date").Width("80").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); + col.Field("ShipCity").HeaderText("Ship Country").Width("120").Add(); + +}).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/tagHelper new file mode 100644 index 0000000000..2ad0834288 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/column-rendering/tagHelper @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/complexbinding/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/complexbinding/razor index c3ea1b2ad0..7e2e4d53e4 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/complexbinding/razor +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/complexbinding/razor @@ -1,9 +1,7 @@ -@Html.EJS().Grid("Complex").DataSource((IEnumerable)ViewBag.dataSource).Columns(col => +@Html.EJS().Grid("Grid").DataSource((IEnumerable)ViewBag.data).Height(350).Columns(col => { - col.Field("EmployeeID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("Name.FirstName").HeaderText("FirstName").Width("140").Add(); - col.Field("Name.LastName").HeaderText("LastName").Width("130").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); - col.Field("City").Width("120").Add(); - col.Field("Country").Width("140").Add(); - -}).AllowPaging().Render() \ No newline at end of file + col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); + col.Field("Name.FirstName").HeaderText("First Name").Width("120").Add(); + col.Field("Name.LastName").HeaderText("Last Name").Width("120").Add(); + col.Field("Title").HeaderText("Title").Width("150").Add(); +}).Render() diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/complexbinding/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/complexbinding/tagHelper index 1d730b1b41..23f1e7f530 100644 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/complexbinding/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/grid/columns/complexbinding/tagHelper @@ -1,8 +1,8 @@ - + - - + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/primary/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/primary/tagHelper deleted file mode 100644 index 778cf1e37f..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/primary/tagHelper +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/valueaccessor/razor b/ej2-asp-core-mvc/code-snippet/grid/columns/valueaccessor/razor deleted file mode 100644 index 4187f2f6fb..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/valueaccessor/razor +++ /dev/null @@ -1,23 +0,0 @@ -@{ - var valueAccessor = "valueAccessorFn"; -} - -@Html.EJS().Grid("ValueAccessor").DataSource((IEnumerable)ViewBag.DataSource).Columns(col => -{ - col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); - col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); - col.Field("ShipCity").HeaderText("Ship City").ValueAccessor(valueAccessor).Width("150").Add(); - col.Field("OrderDate").HeaderText("Order Date").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("130").Format("yMd").Add(); - col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Format("C2").Add(); - -}).AllowPaging().Render() - - diff --git a/ej2-asp-core-mvc/code-snippet/grid/columns/valueaccessor/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/columns/valueaccessor/tagHelper deleted file mode 100644 index 1839560425..0000000000 --- a/ej2-asp-core-mvc/code-snippet/grid/columns/valueaccessor/tagHelper +++ /dev/null @@ -1,23 +0,0 @@ -@{ - var valueAccessor = "valueAccessorFn"; -} - - - - - - - - - - - - diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-rendering.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-rendering.md new file mode 100644 index 0000000000..27fd1f60ba --- /dev/null +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/columns/column-rendering.md @@ -0,0 +1,218 @@ +--- +layout: post +title: Column Rendering in ##Platform_Name## Grid Component +description: Learn here all about Column Rendering in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Column Rendering +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Column rendering in ASP.NET MVC Grid component + +In Syncfusion ASP.NET MVC Grid, column rendering provides you with the ability to finely control how data is presented. This allows you to manually define columns, automatically generate them, and dynamically customize data presentation. With column rendering, you can ensure that your data is displayed exactly as needed, offering a wide range of possibilities for organizing and showcasing information within the grid. + +The column definitions are used as the DataSource schema in the grid. The grid operations such as sorting, filtering and grouping etc. are performed based on column definitions. The `Field` property of grid column is necessary to map the datasource values in the grid columns. + +> 1. If the column `Field` is not specified in the [DataSource](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_DataSource), column values will be empty. +> 2. If the `Field` name contains **dot** operator, it is considered as complex binding. +> 3. It is must to define the `Field` property for a Template column, to perform CRUD or data Operations such as filtering, searching etc. + +## Define columns manually + +To define columns manually in grid, you can use the `Column` element to define the columns and represent each column with its respective properties such as `Field`, `HeaderText`, `Type`, and [Width](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_Width) set accordingly. This allows you to customize the column's behavior and appearance based on the requirements. + +Here's an example code snippet that demonstrates how to define columns manually in the Syncfusion ASP.NET MVC Grid: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/column-rendering/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Column-rendering.cs" %} +{% include code-snippet/grid/columns/column-rendering/column-rendering.cs %} +{% endhighlight %} +{% endtabs %} + +![Define columns](../../images/column-rendering/column-render.png) + +## Auto generated columns + +The Grid automatically generates columns when the `Columns` declaration is empty or undefined while initializing the grid. All the columns in the **dataSource** are bound as grid columns. + +You can use the following code snippet to enable auto-generated columns in the Syncfusion Grid: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/auto/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Auto.cs" %} +{% include code-snippet/grid/columns/auto/auto.cs %} +{% endhighlight %} +{% endtabs %} + +>* When the columns are auto-generated, the column `Type` is determined from the first record of the [DataSource](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_DataSource). +>* If you have a large dataset, auto-generating columns can result in performance issues. In this case, it is recommended to specify the columns manually in the columns property during initialization or else use column virtualization feature by setting [EnableColumnVirtualization](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_EnableColumnVirtualization) property value as **true**. + +### Set isPrimaryKey for auto generated columns when editing is enabled + +When editing is enabled in the grid, you may need to set a primary key for auto-generated columns to uniquely identify each row for operations such as updating or deleting data. This can be achieved using the `isPrimaryKey` property of the column object by using the [DataBound](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_DataBound) event. + +By setting `IsPrimaryKey` to **true** for an auto-generated column in the Syncfusion Grid, you can specify it as the primary key column, which uniquely identifies each row when editing is enabled. + +Here is an example code snippet that shows how to set a primary key for an auto-generated column when editing is enabled: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/auto-primary/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Primary.cs" %} +{% include code-snippet/grid/columns/auto-primary/primary.cs %} +{% endhighlight %} +{% endtabs %} + +If the column `Field` name is known, the `getColumnByField` method can be used to retrieve the column object. Then, the `IsPrimaryKey` property can be set to **true** for that column, as demonstrated in the code snippet below: + +```typescript +onDataBound: function() { + let grid = document.getElementById('Grid').ej2_instances[0]; + let column= grid.getColumnByField('OrderID'); + column.isPrimaryKey = true; + } +``` + +### Set column options to auto generated columns + +To configure column options such as `Type`, `Format` and [Width](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_Width) for auto-generated columns in Syncfusion Grid, you can use the [DataBound](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_DataBound) event of the Grid component. This event is triggered after the data has been bound to the Grid. By handling this event, you can specify the desired column options for the auto-generated columns. + +Here's an example of how you can set column options for auto-generated columns using the `dataBound` event: + +In the below example, `width` is set for **OrderID** column, **date** `type` is set for **OrderDate** column and `format` is set for **Freight** and **OrderDate** column. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/autocolumnformat/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Autocolumnformat.cs" %} +{% include code-snippet/grid/columns/autocolumnformat/autocolumnformat.cs %} +{% endhighlight %} +{% endtabs %} + +## Dynamic column generation + +The Syncfusion Grid component allows you to dynamically generate columns at runtime, based on the data provided. This feature is useful when you need to display data with varying columns based on user requirements or dynamic data sources. + +### Using valueAccessor property + +Dynamic column generation using value accessor allows you to access and manipulate the display data values in a grid column. By using the `valueAccessor` property of a grid column, you can customize the display value of the column based on the data. + +To use `valueAccessor` property, define the column with the property and provide a function that will return the formatted value. The function receives two arguments: +* **field**: represents the data field of the column. +* **data**: represents the data record for the corresponding row. + +In the provided code, the **currencyFormatter** function takes the Freight value of the data object, appends the Euro symbol to it, and returns the formatted string. The **concatenateFields** function concatenates the ShipCity and ShipRegion values of the data object and returns the combined string. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/column-render-valueaccessor/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Valueaccessor.cs" %} +{% include code-snippet/grid/columns/column-render-valueaccessor/valueaccessor.cs %} +{% endhighlight %} +{% endtabs %} + +![Using valueAccessor property](../../images/column-rendering/column-render-valueaccessor.png) + +> The `ValueAccessor` function can have performance implications if it is used to access a large number of data records or to perform complex data manipulations. To avoid performance issues, you can enable the virtualization feature while using the `ValueAccessor` property. This ensures that only the visible rows are rendered, resulting in faster rendering times. + +### Display array type columns + +The Grid component allows you to easily bind an array of objects to a column using the `ValueAccessor` property. This property allows customization of how the data is displayed in the column. + +For example, consider a column named **Name** that contains an array of two objects, **FirstName** and **LastName**. The `ValueAccessor` property can be used to join these two objects and bind them to the column. + +This will display the concatenated value of **FirstName** and **LastName** in the **Full Name** column of the grid. Here's an example of how this can be achieved: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/column-render-array/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Arraytypecolumns.cs" %} +{% include code-snippet/grid/columns/column-render-array/arraytypecolumns.cs %} +{% endhighlight %} +{% endtabs %} + +![Display array type columns](../../images/column-rendering/column-render-array.png) + +### Expression column + +You can achieve an expression column in the Grid by using the `ValueAccessor` property. The `ValueAccessor` property allows you to define a function that calculates the value for the expression column based on the values of other columns. + +In this example, we have a grid with columns **Food Name**, **Protein**, **Fat**, and **Carbohydrate**. We want to add an expression column called **Calories Intake** that calculates the total calories for each row based on the values of **Protein**, **Fat**, and **Carbohydrate** columns. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/column-render-expression/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Expressioncolumn.cs" %} +{% include code-snippet/grid/columns/column-render-expression/expressioncolumn.cs %} +{% endhighlight %} +{% endtabs %} + +![Expression column](../../images/column-rendering/column-render-expression%20.png) + +### Display serial number + +To display serial number in the grid for every rows, you can use the [RowDataBound](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_RowDataBound) event. The `RowDataBound` event is triggered for each row in the grid when the data is bound to the grid. + +Within the event handler, the [pagesize](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageSize) and [currentPage](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_CurrentPage) index can be obtained from the grid's [PageSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html) property. Using these values, the serial number can be calculated based on the page size, current page, and row index. Finally, the calculated serial number can be set as the innerHTML of the corresponding row cell. + +Here is an example code snippet that demonstrates how to display serial numbers in a Syncfusion Grid using `rowDataBound` event: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/column-render-serial/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Serialnumber.cs" %} +{% include code-snippet/grid/columns/column-render-serial/serialnumber.cs %} +{% endhighlight %} +{% endtabs %} + +![Display serial number](../../images/column-rendering/column-render-serial.png) + +## Complex data binding + +The Syncfusion Grid component allows you to achieve complex data binding by using the dot (.) operator in the `Column.Field`. This feature is particularly useful when dealing with nested or complex data structures. + +### Using local data + +To enable complex data binding in the Grid component using local data, use the dot (.) operator in the `Field` property of the column. Here is an example of how to achieve complex data binding using local data: + +In the below example, we have bound the nested **Employee** object's **FirstName** and **LastName** properties using the dot (.) operator. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/complexbinding/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Complexbinding.cs" %} +{% include code-snippet/grid/columns/complexbinding/complexbinding.cs %} +{% endhighlight %} +{% endtabs %} + +![Using local data](../../images/column-rendering/local-data.png) + +### Using remote data + +To enable complex data binding in the Grid component using remote data, add the `expand` query to the [Query](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_Query) property of the Grid, to eager load the complex data. Here is an example of how to achieve complex data binding using remote data: + +In the below example, we have used the `expand` query to load the nested Employee object's **City** property using the dot (.) operator. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/column-render-remote/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Remotedata.cs" %} +{% include code-snippet/grid/columns/column-render-remote/remotedata.cs %} +{% endhighlight %} +{% endtabs %} + +![Using remote data](../../images/column-rendering/column-render-remote.png) diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-rendering.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-rendering.md new file mode 100644 index 0000000000..ec443d3fd2 --- /dev/null +++ b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/columns/column-rendering.md @@ -0,0 +1,218 @@ +--- +layout: post +title: Column Rendering in ##Platform_Name## Grid Component +description: Learn here all about Column Rendering in Syncfusion ##Platform_Name## Grid component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Column Rendering +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Column rendering in ASP.NET Core Grid component + +In Syncfusion ASP.NET Core Grid, column rendering provides you with the ability to finely control how data is presented. This allows you to manually define columns, automatically generate them, and dynamically customize data presentation. With column rendering, you can ensure that your data is displayed exactly as needed, offering a wide range of possibilities for organizing and showcasing information within the grid. + +The column definitions are used as the DataSource schema in the grid. The grid operations such as sorting, filtering and grouping etc. are performed based on column definitions. The `field` property of grid column is necessary to map the datasource values in the grid columns. + +> 1. If the column `field` is not specified in the [dataSource](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_DataSource), column values will be empty. +> 2. If the `field` name contains **dot** operator, it is considered as complex binding. +> 3. It is must to define the `field` property for a Template column, to perform CRUD or data Operations such as filtering, searching etc. + +## Define columns manually + +To define columns manually in grid, you can use the `e-grid-columns` element to define the columns and represent each column with its respective properties such as `field`, `headerText`, `type`, and [width](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_Width) set accordingly. This allows you to customize the column's behavior and appearance based on the requirements. + +Here's an example code snippet that demonstrates how to define columns manually in the Syncfusion ASP.NET Core Grid: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/column-rendering/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Column-rendering.cs" %} +{% include code-snippet/grid/columns/column-rendering/column-rendering.cs %} +{% endhighlight %} +{% endtabs %} + +![Define columns](../../images/column-rendering/column-render.png) + +## Auto generated columns + +The Grid automatically generates columns when the `columns` declaration is empty or undefined while initializing the grid. All the columns in the **dataSource** are bound as grid columns. + +You can use the following code snippet to enable auto-generated columns in the Syncfusion Grid: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/auto/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Auto.cs" %} +{% include code-snippet/grid/columns/auto/auto.cs %} +{% endhighlight %} +{% endtabs %} + +>* When the columns are auto-generated, the column `type` is determined from the first record of the [dataSource](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_DataSource). +>* If you have a large dataset, auto-generating columns can result in performance issues. In this case, it is recommended to specify the columns manually in the columns property during initialization or else use column virtualization feature by setting [enableColumnVirtualization](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_EnableColumnVirtualization) property value as **true**. + +### Set isPrimaryKey for auto generated columns when editing is enabled + +When editing is enabled in the grid, you may need to set a primary key for auto-generated columns to uniquely identify each row for operations such as updating or deleting data. This can be achieved using the `isPrimaryKey` property of the column object by using the [dataBound](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_DataBound) event. + +By setting `isPrimaryKey` to **true** for an auto-generated column in the Syncfusion Grid, you can specify it as the primary key column, which uniquely identifies each row when editing is enabled. + +Here is an example code snippet that shows how to set a primary key for an auto-generated column when editing is enabled: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/auto-primary/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Primary.cs" %} +{% include code-snippet/grid/columns/auto-primary/primary.cs %} +{% endhighlight %} +{% endtabs %} + +If the column `field` name is known, the `getColumnByField` method can be used to retrieve the column object. Then, the `isPrimaryKey` property can be set to **true** for that column, as demonstrated in the code snippet below: + +```typescript +onDataBound: function() { + let grid = document.getElementById('Grid').ej2_instances[0]; + let column= grid.getColumnByField('OrderID'); + column.isPrimaryKey = true; + } +``` + +### Set column options to auto generated columns + +To configure column options such as `type`, `format` and [width](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_Width) for auto-generated columns in Syncfusion Grid, you can use the [dataBound](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_DataBound) event of the Grid component. This event is triggered after the data has been bound to the Grid. By handling this event, you can specify the desired column options for the auto-generated columns. + +Here's an example of how you can set column options for auto-generated columns using the `dataBound` event: + +In the below example, `width` is set for **OrderID** column, **date** `type` is set for **OrderDate** column and `format` is set for **Freight** and **OrderDate** column. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/autocolumnformat/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Autocolumnformat.cs" %} +{% include code-snippet/grid/columns/autocolumnformat/autocolumnformat.cs %} +{% endhighlight %} +{% endtabs %} + +## Dynamic column generation + +The Syncfusion Grid component allows you to dynamically generate columns at runtime, based on the data provided. This feature is useful when you need to display data with varying columns based on user requirements or dynamic data sources. + +### Using valueAccessor property + +Dynamic column generation using value accessor allows you to access and manipulate the display data values in a grid column. By using the `valueAccessor` property of a grid column, you can customize the display value of the column based on the data. + +To use `valueAccessor` property, define the column with the property and provide a function that will return the formatted value. The function receives two arguments: +* **field**: represents the data field of the column. +* **data**: represents the data record for the corresponding row. + +In the provided code, the **currencyFormatter** function takes the Freight value of the data object, appends the Euro symbol to it, and returns the formatted string. The **concatenateFields** function concatenates the ShipCity and ShipRegion values of the data object and returns the combined string. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/column-render-valueaccessor/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Valueaccessor.cs" %} +{% include code-snippet/grid/columns/column-render-valueaccessor/valueaccessor.cs %} +{% endhighlight %} +{% endtabs %} + +![Using valueAccessor property](../../images/column-rendering/column-render-valueaccessor.png) + +> The `valueAccessor` function can have performance implications if it is used to access a large number of data records or to perform complex data manipulations. To avoid performance issues, you can enable the virtualization feature while using the `valueAccessor` property. This ensures that only the visible rows are rendered, resulting in faster rendering times. + +### Display array type columns + +The Grid component allows you to easily bind an array of objects to a column using the `valueAccessor` property. This property allows customization of how the data is displayed in the column. + +For example, consider a column named **Name** that contains an array of two objects, **FirstName** and **LastName**. The `valueAccessor` property can be used to join these two objects and bind them to the column. + +This will display the concatenated value of **FirstName** and **LastName** in the **Full Name** column of the grid. Here's an example of how this can be achieved: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/column-render-array/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Arraytypecolumns.cs" %} +{% include code-snippet/grid/columns/column-render-array/arraytypecolumns.cs %} +{% endhighlight %} +{% endtabs %} + +![Display array type columns](../../images/column-rendering/column-render-array.png) + +### Expression column + +You can achieve an expression column in the Grid by using the `valueAccessor` property. The `valueAccessor` property allows you to define a function that calculates the value for the expression column based on the values of other columns. + +In this example, we have a grid with columns **Food Name**, **Protein**, **Fat**, and **Carbohydrate**. We want to add an expression column called **Calories Intake** that calculates the total calories for each row based on the values of **Protein**, **Fat**, and **Carbohydrate** columns. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/column-render-expression/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Expressioncolumn.cs" %} +{% include code-snippet/grid/columns/column-render-expression/expressioncolumn.cs %} +{% endhighlight %} +{% endtabs %} + +![Expression column](../../images/column-rendering/column-render-expression%20.png) + +### Display serial number + +To display serial number in the grid for every rows, you can use the [rowDataBound](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html#Syncfusion_EJ2_Grids_Grid_RowDataBound) event. The `rowDataBound` event is triggered for each row in the grid when the data is bound to the grid. + +Within the event handler, the [pagesize](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_PageSize) and [currentPage](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html#Syncfusion_EJ2_Grids_GridPageSettings_CurrentPage) index can be obtained from the grid's [pageSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.GridPageSettings.html) property. Using these values, the serial number can be calculated based on the page size, current page, and row index. Finally, the calculated serial number can be set as the innerHTML of the corresponding row cell. + +Here is an example code snippet that demonstrates how to display serial numbers in a Syncfusion Grid using `rowDataBound` event: + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/column-render-serial/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Serialnumber.cs" %} +{% include code-snippet/grid/columns/column-render-serial/serialnumber.cs %} +{% endhighlight %} +{% endtabs %} + +![Display serial number](../../images/column-rendering/column-render-serial.png) + +## Complex data binding + +The Syncfusion Grid component allows you to achieve complex data binding by using the dot (.) operator in the `column.field`. This feature is particularly useful when dealing with nested or complex data structures. + +### Using local data + +To enable complex data binding in the Grid component using local data, use the dot (.) operator in the `field` property of the column. Here is an example of how to achieve complex data binding using local data: + +In the below example, we have bound the nested **Employee** object's **FirstName** and **LastName** properties using the dot (.) operator. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/complexbinding/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Complexbinding.cs" %} +{% include code-snippet/grid/columns/complexbinding/complexbinding.cs %} +{% endhighlight %} +{% endtabs %} + +![Using local data](../../images/column-rendering/local-data.png) + +### Using remote data + +To enable complex data binding in the Grid component using remote data, add the `expand` query to the [query](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Grids.Grid.html#Syncfusion_EJ2_Grids_Grid_Query) property of the Grid, to eager load the complex data. Here is an example of how to achieve complex data binding using remote data: + +In the below example, we have used the `expand` query to load the nested Employee object's **City** property using the dot (.) operator. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/grid/columns/column-render-remote/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Remotedata.cs" %} +{% include code-snippet/grid/columns/column-render-remote/remotedata.cs %} +{% endhighlight %} +{% endtabs %} + +![Using remote data](../../images/column-rendering/column-render-remote.png) diff --git a/ej2-asp-core-mvc/grid/images/column-rendering/column-render-array.png b/ej2-asp-core-mvc/grid/images/column-rendering/column-render-array.png new file mode 100644 index 0000000000..7cf716c2ba Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-rendering/column-render-array.png differ diff --git a/ej2-asp-core-mvc/grid/images/column-rendering/column-render-expression .png b/ej2-asp-core-mvc/grid/images/column-rendering/column-render-expression .png new file mode 100644 index 0000000000..479203588e Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-rendering/column-render-expression .png differ diff --git a/ej2-asp-core-mvc/grid/images/column-rendering/column-render-remote.png b/ej2-asp-core-mvc/grid/images/column-rendering/column-render-remote.png new file mode 100644 index 0000000000..d3c02ffe8a Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-rendering/column-render-remote.png differ diff --git a/ej2-asp-core-mvc/grid/images/column-rendering/column-render-serial.png b/ej2-asp-core-mvc/grid/images/column-rendering/column-render-serial.png new file mode 100644 index 0000000000..13a978790a Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-rendering/column-render-serial.png differ diff --git a/ej2-asp-core-mvc/grid/images/column-rendering/column-render-valueaccessor.png b/ej2-asp-core-mvc/grid/images/column-rendering/column-render-valueaccessor.png new file mode 100644 index 0000000000..79e9675eb5 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-rendering/column-render-valueaccessor.png differ diff --git a/ej2-asp-core-mvc/grid/images/column-rendering/column-render.png b/ej2-asp-core-mvc/grid/images/column-rendering/column-render.png new file mode 100644 index 0000000000..3e266418f4 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-rendering/column-render.png differ diff --git a/ej2-asp-core-mvc/grid/images/column-rendering/local-data.png b/ej2-asp-core-mvc/grid/images/column-rendering/local-data.png new file mode 100644 index 0000000000..c693b9941e Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/column-rendering/local-data.png differ diff --git a/ej2-asp-core-toc.html b/ej2-asp-core-toc.html index 6a939a4673..7a8ba7fada 100644 --- a/ej2-asp-core-toc.html +++ b/ej2-asp-core-toc.html @@ -1259,14 +1259,14 @@
  • Immutable Mode
  • Columns