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.
|
@ViewChild('grid') grid1: EJComponents<ej.Grid,any>
ngAfterViewInit(){
this.grid1.widget.model.editSettings = { allowAdding:true,allowEditing:true,allowDeleting:true,editMode:'batch' };
this.grid1.widget.dataSource(ej.DataManager({
url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/", crossDomain:true
}));
//Set the data source in ngAfterViewInit method using grid widgets.
} |
|
//Grid initialization
<ej-grid #grid >
// define the Grid columns
<e-columns>
<e-column field="name" headerText="Name" width=80></e-column>
<e-column field="age" headerText="Age" width=80></e-column>
</e-columns>
</ej-grid>
|
|
//File name grid.component.html location ‘src/grid’
<button (click)="gridDynamicComponent()">Grid Render</button>
<div>
<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.
</div> |
|
//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';
@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;
});
}
} |
|
//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'
@Component({
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) {
return;
}
// 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
this.dynamicComponentContainer.insert(component.hostView);
}
constructor(private resolve: ComponentFactoryResolver) {
this.resolver = resolve;
}
}
|
|
//File name grid-dynamic-component.ts location ‘src/grid’
import {Component, Injector, Input} from '@angular/core';
@Component({
selector: 'grid-dynamic-component',
template: `
<ej-grid #grid [dataSource]="dataSource"> /*// here we can define the Grid*/
</ej-grid>
`,
})
export default class DynamicGridComponent {
@Input()
public dataSource: Object[] = null;
constructor(private injector: Injector) {
this.dataSource = this.injector.get('dataSource'); // Get the data source from injector
}
} |
|
//File Name app.module.ts
@NgModule({
imports: [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(rootRouterConfig, { useHash: true })],
declarations: [AppComponent, EJ_GRID_COMPONENTS, HomeComponent, GridComponent,DynamicComponent,DynamicGridComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
|
