Getting started

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"]
               }
            }
        });