Auto Generated Columns

24 Feb 20224 minutes to read

The Columns are automatically generated when
Columns declaration is empty or undefined while initializing the grid. All the columns in the DataSource are bound as grid columns.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
           
</ejs-grid>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

When columns are auto-generated, the column Type will be determined from the first record of the DataSource.

Set Primary key column for auto generated columns when editing is enabled

Primary key can be defined in the declaration of column object of the grid. If you did not declare the columns, the grid will generate the columns automatically. For these auto generated columns, you can set isPrimaryKey property of e-grid-column as true by using the following ways,

If Primary key “column index” is known then refer the following example

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" dataBound="dataBound">
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true">
    </e-grid-editSettings>
</ejs-grid>

<script>
    function dataBound() {
        var grid = document.getElementById('Grid').ej2_instances[0];
        var column = grid.columns[0];
        column.isPrimaryKey = 'true';
    }
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

If Primary key “column fieldname” is known then you can get the column by using var column = grid.getColumnByField('OrderID') and then set primary key by defining isPrimaryKey property as true in e-grid-column tag helper.

Set column options to auto generated columns

You can set column options such as format, width to the auto generated columns by using dataBound event of the grid.

In the below example, width is set for OrderID column, date type is set for OrderDate column and numeric type is set for Freight column.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" dataBound="dataBound">
           
</ejs-grid>

<script>
    function dataBound() {
        for (var i = 0; i < this.columns.length; i++) {
            this.columns[0].width = 120;
            if (this.columns[i].field === "OrderDate") {
                this.columns[i].type = "date";
            }
            if (this.columns[i].type === "date") {
                this.columns[i].format = { type: "date", format: "dd/MM/yyyy" };
            }
            this.columns[3].format = "P2";
        }
        this.refreshColumns();
    }
</script>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}