| layout | post |
|---|---|
| title | How to |
| description | How to |
| platform | angular |
| control | Grid |
| documentation | ug |
| api | /api/angular/ejgrid |
Grid supports SignalR features for live updates in record. Please find the below option to configure signalR with Grid.
- Before configure SignalR with ejGrid. You need to Setup SignalR configuration in Visual Studio project. For reference, please find the link.
N> Getting started with SignalR
- After configuration of SignalR, you have to create Hub for communication between different actions of grid. {% highlight c# %}
public class SignalHub: Hub
{
public void modify(string action, string details)
{
Clients.All.modify(action, details);
}
}
{% endhighlight %}
- Implementation of SignalR communication with Grid through Hub. {% highlight html %} <ej-grid id="Grid" #grid [dataSource]="gridData" [editSettings]="editSettings" [toolbarSettings]="toolbarSettings" [allowPaging]=true [allowSorting]=true (actionComplete)="actionComplete($event)"> <e-column field="OrderID" [isPrimaryKey]="true" headerText="Order ID" width="75" textAlign="right">
{% endhighlight %} {% highlight ts %}
import {Component, ViewEncapsulation, ViewChild } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: 'app/app.component.html', //give the path file for Grid control html file.
})
export class AppComponent {
public gridData;
public editSettings;
public toolbarSettings;
@ViewChild("grid") gridIns: EJComponents<any, any>;
constructor()
{
//The datasource "(window as any).gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = ej.DataManager((window as any).gridData).executeLocal(ej.Query().take(50));
this.editSettings={allowAdding: true, allowEditing: true, allowDeleting: true };
this.toolbarSettings={showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel]};
}
}
{% endhighlight %} {% highlight javascript %} window.signal = $.connection.signalHub; window.signal.client.modify = function (action, details) { details = JSON.parse(details); if (action == "add") this.gridIns.widget.addRecord(details); else if (action == "beginedit") this.gridIns.widget.updateRecord("OrderID", details); else this.gridIns.widget.deleteRecord("OrderID", details); }; $.connection.hub.start().done(function () { window.actionComplete = function (args) { if (args.requestType == "save" || args.requestType == "delete") window.signal.server.modify(args.requestType == "delete" ? args.requestType : window.previousAction, JSON.stringify(args.rowData)); if (args.requestType != "delete") window.previousAction = args.requestType; } }); {% endhighlight %}
Copy data from Excel to Grid is possible by converting Excel data to JSON data and then binding it to the Grid. Details are covered in this blog post.
Grid actions can be persisted throughout by enabling the enablePersistence property of the Grid. However, we can maintain/prevent a grid action explicitly with the help of addToPersist and ignoreOnPersist methods respectively.
{% highlight html %}
Navigate to another Page
<ej-button id="Button" (click)="onClick($event)" text="Prevent/Maintain persistence">
<ej-grid id="Grid" #grid [dataSource]="gridData" [allowFiltering]="true" [filterSettings]="filterSettings" [allowPaging]=true [allowGrouping]=true [enablePersistence]=true>
{% endhighlight %}
{% highlight ts %}
import {Component, ViewEncapsulation, ViewChild } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: 'app/app.component.html', //give the path file for Grid control html file.
})
export class AppComponent {
public gridData;
public filterSettings;
@ViewChild("grid") gridIns: EJComponents<any, any>;
constructor()
{
//The datasource "(window as any).gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = (window as any).gridData;
this.filterSettings={filterType: "menu"};
}
onClick(e:any){
var gridObj = this.gridIns.widget;//get the gridObject
// by default the enableAltRow property of the grid is true.
gridObj.option("model.enableAltRow", false); //set the enableAltRow property of the grid as false
//by default the filterSettings and groupSettings will be persisted upon navigating to another page.
gridObj.ignoreOnPersist(["filterSettings", "groupSettings"]);// set the properties that are to be prevented from being persisted
//by default the enableAltRow property of the grid will not be persisted
gridObj.addToPersist("enableAltRow");// set the properties that are to be maintained for persistence.
var toolbarObject = $(e.target),
grid = this.gridIns.widget;
if (toolbarObject.hasClass("Collapse")) grid.collapseAll(); //collapse Grid using grid instance, `this` is grid instance
else grid.refreshContent(); //refresh content using grid instance
}
}
{% endhighlight %}
So on navigating to another page by clicking on the link, by default the filterSettings and groupSettings will be persisted. But upon clicking the button and navigating, the persist state of the Grid actions are modified.
Using [search](https://help.syncfusion.com/api/angular/ejgrid#methods:search “search”) method of Grid, you can search the string in Grid externally without using in-built toolbar search support. While using [search](https://help.syncfusion.com/api/angular/ejgrid#methods:search “search”) method it is necessary to set [allowSearching](https://help.syncfusion.com/api/angular/ejgrid#members:allowsearching “allowSearching”) property as true. The following code example explains the above behavior.
{% highlight html %}
<ej-button id="Button" (click)="onClick($event)" text="Searching">
<ej-grid id="Grid" #grid [dataSource]="gridData" [allowSearching]="true" [filterSettings]="filterSettings" [allowPaging]=true [allowGrouping]=true [enablePersistence]=true>
{% endhighlight %}
{% highlight ts %}
import {Component, ViewEncapsulation, ViewChild } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: 'app/app.component.html', //give the path file for Grid control html file.
})
export class AppComponent {
public gridData;
@ViewChild("grid") gridIns: EJComponents<any, any>;
constructor()
{
//The datasource "(window as any).gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = (window as any).gridData;
}
onClick(e:any){
var obj = this.gridIns.widget;//get the gridObject
var val = $("#searchString").val();
obj.search(val);
}
}
{% endhighlight %}
The following output is displayed as a result of the above code example.
The queryString property is used to filter the childGrid data based on value in parent Grid data. But when the field name provided in queryString does not exists in Child Grid, then foreignKeyField property is used to filter the childGrid data. If the foreign key column name differs for parent and child grid then use foreignKeyField property of Grid.
The following code example explains the above behavior.
{% highlight html %}
<ej-grid id="Grid" [allowPaging]="true" [dataSource]="gridData" [childGrid]="childData" >
{% endhighlight %}
{% highlight javascript %}
import { Component } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: 'src/grid/grid.component.html',
})
export class GridComponent {
public gridData: any;
public childData: any;
constructor() {
//The datasource "window.employeeView" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = (window as any).employeeView;
this.childData = {
dataSource: ej.DataManager({ url: " http://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders", crossDomain: true }),
queryString: "FirstName",
foreignKeyField : "CustomerName",
allowPaging: true,
pageSettings: {
pageSize: 5
}, columns: [
{ field: "OrderID", headerText: 'Order ID', textAlign: ej.TextAlign.Right, width: 75 },
{ field: "ShipCity", headerText: 'Ship City', textAlign: ej.TextAlign.Left, width: 100 },
{ field: "CustomerName", headerText: 'First Name', textAlign: ej.TextAlign.Left, width: 100 },
{ field: "CustomerID", headerText: 'Customer ID', textAlign: ej.TextAlign.Left, width: 120 },
{ field: "ShipName", headerText: 'Ship Name', textAlign: ej.TextAlign.Left, width: 100 }
],
}
}
}
{% endhighlight %}
The following output is displayed as a result of the above code example.
Using [addRecord](https://help.syncfusion.com/api/angular/ejgrid#methods:addRecord “addRecord”) method of Grid, you can add a record to a Grid externally without using in-built toolbar add support. While using [addRecord](https://help.syncfusion.com/api/angular/ejgrid#methods:addRecord “addRecord”) method it is necessary to set [allowAdding](https://help.syncfusion.com/api/angular/ejgrid#members:allowAdding “allowAdding”) property as true.
Using [deleteRecord](https://help.syncfusion.com/api/angular/ejgrid#methods:deleteRecord “deleteRecord”) method of Grid, you can delete a record to a Grid externally without using in-built toolbar delete support. While using [deleteRecord](https://help.syncfusion.com/api/angular/ejgrid#methods:deleteRecord “deleteRecord”) method it is necessary to set [allowDeleting](https://help.syncfusion.com/api/angular/ejgrid#members:allowDeleting “allowDeleting”) property as true.
Using [updateRecord](https://help.syncfusion.com/api/angular/ejgrid#methods:updateRecord “updateRecord”) method of Grid, you can update a record to a Grid externally without using in-built toolbar update support. While using [updateRecord](https://help.syncfusion.com/api/angular/ejgrid#methods:updateRecord “updateRecord”) method it is necessary to set [allowEditing](https://help.syncfusion.com/api/angular/ejgrid#members:allowEditing “allowEditing”) property as true.
Using [filterColumn](https://help.syncfusion.com/api/angular/ejgrid#methods:filterColumn “filterColumn”) method of Grid, you can filter the data in the Grid externally without using in-built filter support. While using [filterColumn](https://help.syncfusion.com/api/angular/ejgrid#methods:filterColumn “filterColumn”) method it is necessary to set [allowFiltering](https://help.syncfusion.com/api/angular/ejgrid#members:allowFiltering “allowFiltering”) property as true.
Using [groupColumn](https://help.syncfusion.com/api/angular/ejgrid#methods:groupColumn “groupColumn”) and [ungroupColumn](https://help.syncfusion.com/api/angular/ejgrid#methods:ungroupColumn “ungroupColumn”) method of Grid, you can group/ungroup the Grid externally without using in-built grouping support. While using [groupColumn](https://help.syncfusion.com/api/angular/ejgrid#methods:groupcolumn “groupColumn”) and [ungroupColumn](https://help.syncfusion.com/api/angular/ejgrid#methods:ungroupcolumn “ungroupColumn”) method it is necessary to set [allowGrouping](https://help.syncfusion.com/api/angular/ejgrid#members:allowgrouping “allowGrouping”) property as true.
Using [sortColumn](https://help.syncfusion.com/api/angular/ejgrid#methods:sortcolumn “sortColumn”) method of Grid, you can sort the Grid externally without using in-built sorting support. While using [sortColumn](https://help.syncfusion.com/api/angular/ejgrid#methods:sortcolumn “sortColumn”) method it is necessary to set [allowSorting](https://help.syncfusion.com/api/angular/ejgrid#members:allowsorting “allowSorting”) property as true.
The following code example explains the above behavior.
{% tabs %} {% highlight html %}
- 10248
- 10249
- 10250
- 10251
- 10252
- 1
- 2
- 3
- 4
- 5
| CRUD |
Filtering |
Grouping
|
Sorting
|
{% endhighlight %}
{% highlight ts %}
import {Component, ViewEncapsulation, ViewChild } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: 'app/app.component.html', //give the path file for Grid control html file.
})
export class AppComponent {
public gridData;
@ViewChild("grid") gridIns: EJComponents<any, any>;
editSettings:any;
directionsList:any;
sortColumnNameList:any;
columnNameList:any;
waterMarkOne:string;
waterMarkTwo:string;
EmployeeList:any;
index:number;
OrderList:any;
toolbarSettings:any;
constructor()
{
//The datasource "(window as any).gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = (window as any).gridData;
this.editSettings={allowEditing:true,allowAdding:true,allowDeleting:true };
this.toolbarSettings={ showToolbar: true,toolbarItems: ["add","edit","update","cancel"]};
this.directionsList="directions";
this.sortColumnNameList="sortColumnName";
this.columnNameList="columnName";
this.EmployeeList="Employee";
this.OrderList="Order";
this.waterMarkOne="Select filter value one";
this.waterMarkTwo="Select filter value two";
this.index=0;
}
addRecord() {
this.Grid.widget.addRecord({"OrderID":12333});
}
updateRecord() {
this.Grid.widget.updateRecord("OrderID", { OrderID: 10248, EmployeeID: 1});
}
deleteRecord() {
this.Grid.widget.deleteRecord("OrderID", { OrderID: this.Grid.widget.model.dataSource_two[this.Grid.widget.model.selectedRowIndex].OrderID });
}
FilterFunction(args) {
var obj =
}
else {
this.Grid.widget.ungroupColumn(columnName);
$("#unGroupColumn").ejButton("disable");
$("#groupColumn").ejButton("enable");
}
}
OnChange() {
var columnName = $("#groupColumnName").ejDropDownList("getSelectedValue");
if ($.inArray(columnName, this.Grid.widget.model.groupSettings.groupedColumns) != -1) {
$("#unGroupColumn").ejButton("enable");
$("#groupColumn").ejButton("disable");
}
else {
$("#groupColumn").ejButton("enable");
$("#unGroupColumn").ejButton("disable");
}
}
}
{% endhighlight %}
{% endtabs %}
The following output is displayed as a result of the above code example.
We can display the other Syncfusion controls using ng-template with e-template attribute directive in Grid columns.
{% highlight html %}
<ej-grid #grid [(dataSource)]="gridData" [allowPaging]="true" >
<ej-rating id="rating" [value]="data.EmployeeID" [allowReset]="true">
<e-column field="EmployeeID" [isPrimaryKey]="true" headerText="Employee ID" width="90">
{% endhighlight %}
{% highlight ts %}
import {Component, ViewEncapsulation, ViewChild } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: 'app/app.component.html', //give the path file for Grid control html file.
})
export class AppComponent {
public gridData;
@ViewChild("grid") gridIns: EJComponents<any, any>;
constructor()
{
//The datasource "(window as any).gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js'
this.gridData = (window as any).employeeView;
}
}
{% endhighlight %}
The following output is displayed as a result of the above code example.
Grid column can be sorted and after sorting, the datasource can be obtained in the same order using sortBy query and executeLocal method of DataManager.
The following code example describes the above behavior.
{% tabs %}
{% highlight html %}
<input type="button" ej-button id="button1" value="GetSortedData" (ejclick)="GetSortedData($event)" />
<ej-grid #grid [dataSource]="gridData" [allowPaging]="true" [allowSorting]="true" [allowMultiSorting]="true">
{% endhighlight %}
{% highlight ts %}
import {Component, ViewEncapsulation,ViewChild} from '@angular/core';
import {CommonModule} from "@angular/common";
@Component({ selector: 'ej-app', templateUrl: 'src/grid/grid.component.html', }) export class GridComponent { public gridData; constructor() { //The datasource "window.gridData" is referred from 'http://js.syncfusion.com/demos/web/scripts/jsondata.min.js' this.gridData = window.gridData;
}
GetSortedData(e: any){
var obj = $(".e-grid").ejGrid("instance");
var Sort = obj.model.sortSettings.sortedColumns;
var query = ej.Query();
if(obj.model.sortSettings.sortedColumns.length){
for(var i=Sort.length-1;i>=0;i--){
query.sortBy(Sort[i].field, Sort[i].direction);
}
var SortedDatasource = ej.DataManager(obj.model.dataSource()).executeLocal(query);
console.log(SortedDatasource);
}
}
}
{% endhighlight %}
{% endtabs %}
N> This solution will work only for local data.