Blazor Ebook
A quick guide to getting started with learning and improving your skills using Blazor technology.
The Grid user interface (UI) was redesigned to provide an optimal viewing experience and improve usability on small screens. This interface will render the filter, sort, and edit dialogs adaptively and have an option to render the grid row elements in the vertical direction.
When we enable the enableAdaptiveUI property, the grid will render the filter, sort, and edit dialogs in full screen for a better user experience. This behavior is demonstrated in the below demo.
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import { data } from './datasource';
@Component({
selector: 'app-root',
template: `<div class="e-adaptive-demo e-bigger">
<div class="e-mobile-layout">
<div class="e-mobile-content">
<ejs-grid #adaptive id="adaptivebrowser" [dataSource]='data' enableAdaptiveUI='true'
height='100%' allowPaging='true' allowFiltering='true'
allowSorting='true' [editSettings]='editSettings'
[filterSettings]='filterSettings' [toolbar]='toolbar' (load)='onLoad($event)'>
<e-columns>
<e-column field='SNO' headerText='S NO' width='150' isPrimaryKey='true' [validationRules]='orderidrules'>
</e-column>
<e-column field='Model' headerText='Model' width='200' editType='dropdownedit'
[validationRules]='customeridrules'>
</e-column>
<e-column field='Developer' headerText='Developer' width='200' [validationRules]='customeridrules' [filter]='menuFilter'></e-column>
<e-column field='ReleaseDate' headerText='Released Date' width='200' type='date' format='yMMM' editType='datepickeredit'>
<e-column field='AndroidVersion' headerText='Android Version' width='200' [validationRules]='customeridrules' [filter]='checkboxFilter'></e-column>
</e-column>
</e-columns>
</ejs-grid>
</div>
</div>
<br />
<div class="datalink">Source:
<a href="https://en.wikipedia.org/wiki/List_of_Android_smartphones"
target="_blank">Wikipedia: List of Android smartphones</a>
</div>
</div>`
})
export class AppComponent implements OnInit {
@ViewChild('adaptive')
public grid: GridComponent;
public data: object[];
public editSettings: Object;
public toolbar: string[];
public orderidrules: Object;
public customeridrules: Object;
public filterSettings: Object;
public menuFilter: Object;
public checkboxFilter: Object;
ngOnInit(): void {
this.data = data;
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
this.orderidrules = { required: true, number: true };
this.customeridrules = { required: true };
this.filterSettings = { type: 'Excel' };
this.menuFilter = {
type: 'Menu'
};
this.checkboxFilter = {
type: 'CheckBox'
};
}
public onLoad(): void {
this.grid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0] as HTMLElement;
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService, SortService, FilterService, EditService, ToolbarService, AggregateService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService,
SortService,
FilterService,
EditService,
ToolbarService,
AggregateService]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);The grid will render the row elements in vertical order while setting the rowRenderingMode property value as Vertical.
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent } from '@syncfusion/ej2-angular-grids';
import { data } from './datasource';
@Component({
selector: 'app-root',
template: `<div class="e-adaptive-demo e-bigger">
<div class="e-mobile-layout">
<div class="e-mobile-content">
<ejs-grid #adaptive id="adaptivebrowser" [dataSource]='data' enableAdaptiveUI='true' [rowRenderingMode]="rowMode"
height='100%' allowPaging='true' allowFiltering='true'
allowSorting='true' [editSettings]='editSettings'
[filterSettings]='filterSettings' [toolbar]='toolbar' (load)='onLoad($event)'>
<e-columns>
<e-column field='SNO' headerText='S NO' width='150' isPrimaryKey='true' [validationRules]='orderidrules'>
</e-column>
<e-column field='Model' headerText='Model' width='200' editType='dropdownedit'
[validationRules]='customeridrules'>
</e-column>
<e-column field='Developer' headerText='Developer' width='200' [validationRules]='customeridrules' [filter]='menuFilter'></e-column>
<e-column field='ReleaseDate' headerText='Released Date' width='200' type='date' format='yMMM' editType='datepickeredit'>
<e-column field='AndroidVersion' headerText='Android Version' width='200' [validationRules]='customeridrules' [filter]='checkboxFilter'></e-column>
</e-column>
</e-columns>
<e-aggregates>
<e-aggregate>
<e-columns>
<e-column type="Count" field="Model" >
<ng-template #footerTemplate let-data>Total Models: {{data.Count}}</ng-template>
</e-column>
</e-columns>
</e-aggregate>
</e-aggregates>
</ejs-grid>
</div>
</div>
<br />
<div class="datalink">Source:
<a href="https://en.wikipedia.org/wiki/List_of_Android_smartphones"
target="_blank">Wikipedia: List of Android smartphones</a>
</div>
</div>`
})
export class AppComponent implements OnInit {
@ViewChild('adaptive')
public grid: GridComponent;
public data: object[];
public editSettings: Object;
public toolbar: string[];
public orderidrules: Object;
public customeridrules: Object;
public filterSettings: Object;
public menuFilter: Object;
public checkboxFilter: Object;
public rowMode: string;
ngOnInit(): void {
this.data = data;
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' };
this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
this.orderidrules = { required: true, number: true };
this.customeridrules = { required: true };
this.filterSettings = { type: 'Excel' };
this.rowMode = 'Vertical';
this.menuFilter = {
type: 'Menu'
};
this.checkboxFilter = {
type: 'CheckBox'
};
}
public onLoad(): void {
this.grid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0] as HTMLElement;
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule } from '@syncfusion/ej2-angular-grids';
import { PageService, SortService, FilterService, EditService, ToolbarService, AggregateService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService,
SortService,
FilterService,
EditService,
ToolbarService,
AggregateService]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
enableAdaptiveUIproperty must be enabled for vertical row rendering.
The following features are only supported in vertical row rendering: