Category / Section
How to assign column type to auto generated columns?
1 min read
We need column type to perform filtering operations in Grid, so in this KB we will see about how to set the column type for auto generated columns.
Solution:
We can achieve this using dataBound event of Grid. Let us see how to set type for auto generated columns using dataBound event of Grid
JS:
$("#Grid").ejGrid({ // the datasource "window.gridData" is referred from jsondata.min.js dataSource: ej.DataManager(window.gridData).executeLocal(ej.Query().take(200)), allowPaging: true, dataBound: "databound", allowFiltering: true, filterSettings: { filterType: "excel" } });
MVC:
@(Html.EJ().Grid<object>("Grid") .Datasource((IEnumerable<object>)ViewBag.datasource) .AllowPaging() .AllowFiltering() .FilterSettings(fil=>fil.FilterType(FilterType.Excel)) .ClientSideEvents(eve=>eve.DataBound("databound")) )
Controller:
namespace Sample.Controllers { public class GridController : Controller { public ActionResult GridFeatures() { var DataSource = new NorthwindDataContext().OrdersViews.ToList(); ViewBag.datasource = DataSource; return View(); } } }
ASPX:
<ej:Grid ID="Grid" AllowFiltering="true" AllowPaging="True" runat="server"> <ClientSideEvents DataBound="databound" /> <FilterSettings FilterType="Excel"></FilterSettings> </ej:Grid>
[Controller] namespace Sample { public partial class _Default : Page { protected void Page_Load(object sender, EventArgs e) { this.Grid.DataSource = new MyDataDataContext().Orders.ToList(); this.Grid.DataBind(); } } }
“DataBound” event triggers at the initial rendering of the Grid. In this event we can set column type based on currentViewData.
Here we have looped the grid columns for finding the field name and we get the value of the column from the currentViewData using field name and assigned that value in type property of grid columns.
function databound(args) { for (i = 0; i < this.model.columns.length; i++) { if (this.model.columns[i]["type"] == null) { var field = this.model.columns[i]["field"]; // here we will get field name for (j = 0; j < this.model.currentViewData.length; j++) { var value = this.model.currentViewData[j][field]; // here we will get columns values if (value != null) { this.model.columns[i]["type"] = (value.getDay ? (value.getHours() > 0 || value.getMinutes() > 0 || value.getSeconds() > 0 || value.getMilliseconds() > 0 ? "datetime" : "date") : typeof (value)); //here we will get column type based on value break; } } } } }
The result will be as follows.
Figure 1: Type for auto generated columns