We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Setting the columns and data source in angular component for ej-grid

I would like to create the columns and set the data source in the angular 2 component. I have created a ej-grid tag and using viewchild to get the reference to the widgets and setting the columns and data source.
But it is not working. I am getting the error data source must not be empty when autogenerate column is set to true.
Is there a way we can do similar tohttp://js.syncfusion.com/demos/web/#!/bootstrap/grid/defaultfunctionalitieswith eg-grid. if so how to do it?

7 Replies

VA Venkatesh Ayothi Raman Syncfusion Team November 16, 2016 01:18 PM UTC

Hi Balasubramanian, 
Thanks for contacting Syncfusion support. 
Yes, we can set the data source by using reference of widgets and then call the dataSource method in Grid. Please refer to the following code example, 
Code example
@ViewChild('grid') grid1: EJComponents<ej.Grid,any> 
         this.grid1.widget.model.editSettings = { allowAdding:true,allowEditing:true,allowDeleting:true,editMode:'batch' }; 
                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/", crossDomain:true 
        //Set the data source in ngAfterViewInit method using grid widgets. 

If you still face the same issue, then could you please provide more details about your requirement? 
Venkatesh Ayothiraman. 

BR Balasubramanian Ramanathan November 16, 2016 01:34 PM UTC


I tired it and it does not work. Please see the attached sample.

It does not work the way as it has to be. The grid has to display 1 column (name) with two rows. But it throws up error.


Attachment: SFGridTest_6690f34b.zip

VA Venkatesh Ayothi Raman Syncfusion Team November 17, 2016 07:31 AM UTC

Hi Balasubramanian, 

Thanks for the update. 

We went through your sample that you have shared for us and found that you are define the data source and columns in View child reference. @Viewchild reference is created after control initialization. So, we should define either dataSource or columns while Grid initialization.  
This is the default behavior of the Grid and this is the reason to show the error message on initialization. So, we suggest you to define the data source or column in Grid initialization. Please refer to the below code example and here we can define the columns in grid initialization, 
Code example
//Grid initialization 
<ej-grid #grid > 
   // define the Grid columns 
        <e-column field="name" headerText="Name" width=80></e-column> 
        <e-column field="age" headerText="Age" width=80></e-column> 

Currently we are checking the feasibility for dynamic loading the component to resolve this problem. If it is possible then we will update how to dynamically loading the component and set the both data source and columns dynamically. 

Venkatesh Ayothiraman. 

BR Balasubramanian Ramanathan November 17, 2016 08:21 AM UTC

Thank you for the reply. This is not what we want to do. Because ee dont know the column at design time. We need to bring down the columns froms from the server database. So if could provide s soltion to load the columns dynamically like doing in javascript. Till we get an update we will use the javascript instad of angular. 

VA Venkatesh Ayothi Raman Syncfusion Team November 18, 2016 01:24 PM UTC

Hi Balasubramanian, 

As we provided in our previous update, initializing Grid without columns or dataSource is not feasible and hence we are checking the feasibility of initializing Grid component using Dynamic component loading concept in Angular2(once columns/dataSource is available). The steps to insert the dynamic grid component will be as follows. 

1. Create a Grid component  which will be inactive until columns/dataSource available. 
2. In main module once the data is available initialize the Grid using Compiler options. 
3. The Grid will be initialized once the dataSource/columns is available.  

Until then we appreciate your patience. Please let us know if you have any queries. 

Venkatesh A. 

BR Balasubramanian Ramanathan November 18, 2016 01:27 PM UTC

Thank you. Till then we will JavaScript approach.

Will wait for your update.


VA Venkatesh Ayothi Raman Syncfusion Team November 22, 2016 01:31 PM UTC

Hi Balasubramanian, 

Thanks for your patience. 

We have achieved your requirement using dynamic loader concept in Angular 2 and created a sample for your convenience. Please refer to the following short description for created sample, 
1)      Create a main component. 
2)      Create a separate named dynamic-component with property dataSource. 
3)      In the setter of the dataSource of dynamic-component render DynamicGridComponent. 
4)      Get the value from injector in DynamicGridComponent and assign it to the dataSource property of the Grid component. 
Step 1: Create a main component. 
 Here, we can initially create component class with button and dynamic-component like as follows, 
//File name grid.component.html location ‘src/grid’ 
<button (click)="gridDynamicComponent()">Grid Render</button> 
 <dynamic-component [dataSource]="dataSource"></dynamic-component> //Here we can set the property for data source and we later to bind the data source using button click. 

When we click the button click then we call the dataManager with query and set the datasource in promise done function. At this time, we can call the DynamicComponent setter inputs like as follows, 
//File name grid.component.ts location ‘src/grid’ 
import { Component, NgModule } from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser' 
import {DynamicComponent} from '././dynamic-component'; // import the dynamic component 
import DynamicGridComponent from '././grid-dynamic-component';  
    selector: 'ej-app', 
    templateUrl: 'src/grid/grid.component.html', 
export class GridComponent { 
    public dataSource; 
    gridDynamicComponent() { // button click fucntion 
        let dm = ej.DataManager({ 
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/", 
        let promise = dm.executeQuery(ej.Query().where("EmployeeID", ej.FilterOperators.equal, 3, false).take(5)); 
        promise.done((e) => { 
            //Assign the result to the grid dataSource using "dynamic grid component". 
            this.dataSource = e.result;  

Step 2: Create a separate dynamic-component. 
When the data source is available for Grid then we can call the dynamic-component and provide the inputs to the grid-dynamic-component which is created before. 
//File name dynamic-component.ts location ‘src/grid’ 
import {Component,NgModule, Input, ViewContainerRef, ViewChild, ReflectiveInjector, ComponentFactoryResolver} from '@angular/core'; 
import DynamicGridComponent from "././grid-dynamic-component"; // Import the grid component here 
import {BrowserModule} from '@angular/platform-browser' 
  selector: 'dynamic-component', 
  entryComponents:[DynamicGridComponent], // define the entry component as grid component for render the grid control here. 
  template: ` 
  <div #grid></div> 
export class DynamicComponent { 
  currentComponent = null; 
  public resolver: ComponentFactoryResolver; 
  @ViewChild('grid', { read: ViewContainerRef }) dynamicComponentContainer: ViewContainerRef; 
  @Input() set dataSource(data) { // when the data source available in promise fucntion then it's called automatically 
    if (!data) { 
    // Inputs need to be in the following format to be resolved properly 
    let inputProviders = [{ provide: 'dataSource', useValue: data }];  
    let resolvedInputs = ReflectiveInjector.resolve(inputProviders); 
    // We create an injector out of the data we want to pass down and this components injector 
    let injector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.dynamicComponentContainer.parentInjector); 
    // We create a factory out of the component we want to create 
    let factory = this.resolver.resolveComponentFactory(DynamicGridComponent); // Pass the Grid component in the component factory  
    // We create the component using the factory and the injector 
    let component = factory.create(injector); 
    // We insert the component into the dom container 
  constructor(private resolve: ComponentFactoryResolver) { 
    this.resolver = resolve; 

Step 3: Grid component and render the Grid control 
Here we can get the data source from injector and bound to the data source property in Grid. Please refer to the following code example, 
//File name grid-dynamic-component.ts location ‘src/grid’ 
import {Component, Injector, Input} from '@angular/core'; 
    selector: 'grid-dynamic-component', 
  template: ` 
    <ej-grid #grid  [dataSource]="dataSource"> /*// here we can define the Grid*/ 
export default class DynamicGridComponent { 
  public dataSource: Object[] = null; 
  constructor(private injector: Injector) { 
    this.dataSource = this.injector.get('dataSource'); // Get the data source from injector  

Step 4: configure the components in @Ng module 
//File Name app.module.ts 
  imports: [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig, { useHash: true })], 
  declarations: [AppComponent, EJ_GRID_COMPONENTS, HomeComponent, GridComponent,DynamicComponent,DynamicGridComponent], 
  bootstrap: [AppComponent] 
export class AppModule { } 

Venkatesh Ayothiraman. 

Live Chat Icon For mobile
Up arrow icon