Getting started

14 Feb 20186 minutes to read

Before we start with the Grid, please refer Getting Started with Syncfusion EmberJS application for general information regarding integrating Syncfusion widget’s.

Enable Paging

[Paging] can be enabled by setting the e-allowPaging to true. This adds the pager in the bottom of the grid and page size can be customized by using the e-pageSettings-pageSize property

HTML

JS

import Ember from 'ember';

    export default Ember.Route.extend({
      model() {
         return {
           data: window.gridData,
           page: { pageSize: 8 },
           cols: ["OrderID", "EmployeeID", "CustomerID", "ShipCountry", "Freight"]
           }
        }
    });

NOTE

Pager settings can be customized by using the e-pageSettings-pageSize property. When it is not given the default values for pageSize and pageCount are 12 and 8 respectively.

Enable Filtering

[Filtering] can be enabled by setting the e-allowFiltering to true. By default, the filter bar row is displayed to perform filtering, you can change the filter type by using the e-filterSettings-filterType property.

HTML

JS

import Ember from 'ember';

    export default Ember.Route.extend({
      model() {
         return {
            data: window.gridData,
            cols: ["OrderID", "EmployeeID", "CustomerID", "ShipCountry", "Freight"]
           }
        }
    });

Enable Grouping

[Grouping] can be enabled by setting the e-allowGrouping to true. Columns can be grouped dynamically by drag and drop the grid column header to the group drop area. The initial grouping can be done by adding required column names in the e-groupSettings-groupedColumns property.

HTML

JS

import Ember from 'ember';

    export default Ember.Route.extend({
      model() {
         return {
             data: window.gridData,
             cols: ["OrderID", "EmployeeID", "CustomerID", "ShipCountry", "Freight"]
           }
        }
    });

Refer to the following code example for initial grouping.

HTML

JS

import Ember from 'ember';

    export default Ember.Route.extend({
      model() {
         return {
            data: window.gridData,
            group: { groupedColumns: ["ShipCountry", "CustomerID"] },
            cols: ["OrderID", "EmployeeID", "CustomerID", "ShipCountry", "Freight"]
           }
        }
    });

Add Summaries

[Summaries] can be added by setting the e-showSummary to true and adding required summary rows and columns in the e-summaryRows property. For demonstration, Stock column’s sum value is displayed as summary.

HTML

JS

import Ember from 'ember';

    export default Ember.Route.extend({
      model() {
         return {
           data: window.gridData,
           page : { pageSize: 8 },
           group: { groupedColumns: ["CustomerID"] },
           summaryRows: [
                {
                  	title: "Sum",
                  	summaryColumns: [
                    { summaryType: ej.Grid.SummaryType.Sum, displayColumn: "Freight", dataMember: "Freight" }
              	  ]
              }
           ],
           cols: ["OrderID", "EmployeeID", "CustomerID", "ShipCountry", "Freight"]
           }
        }
    });