Columns

18 Sep 20182 minutes to read

Column definitions are used as the e-data-source schema in Grid and it plays vital role in rendering column values in required format. Grid operations such as sorting, filtering, editing would be performed based on the column definitions. The e-field property of the ej-column is necessary to map the datasource values in Grid columns.

NOTE

If the column with e-field is not in the datasource, then the column values will be displayed as empty.

If the e-field name contains “dot” operator then it is considered as complex binding.

Column Template

HTML templates can be specified in the ej-template definition of the particular column as a string (HTML element) or ID of the template’s HTML element.

NOTE

If e-field is not specified, you will not able to perform editing, grouping, filtering, sorting, search and summary functionalities in particular column.

The following code example describes the above behavior.

HTML

<ej-grid e-data-source.bind="data" e-allow-paging=true e-page-settings.bind="pageSettings">
        <ej-column e-header-text="Photo">
            <ej-template>
            <img style='width: 75px; height: 70px' src='images/Employees/${EmployeeID}.png' alt='${EmployeeID}' />
            </ej-template>
        </ej-column>
        <ej-column e-field="EmployeeID"></ej-column>
        <ej-column e-field="FirstName"></ej-column>
        <ej-column e-field="LastName"></ej-column>
        <ej-column e-field="Country"></ej-column>
 </ej-grid>

JAVASCRIPT

import 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js';
  export class Grid {
    
            constructor() {
			    this.data = window.employeeView;
                this.pageSettings = {pageSize:4};
			}
    }

The following output is displayed as a result of the above code example.

NOTE

When the columns are generated dynamically, JsRender templates can be used to render the template columns. Please refer the How To to render the template columns using JsRender templates.