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.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
<ejs-treegrid [dataSource]='data' childMapping='subtasks' [treeColumnIndex]='1' [pageSettings]='pageSetting' allowPaging='true'> ------ </ejs-treegrid> in ts export class DefaultPagingComponent implements OnInit { public data: Object[] = []; public pageSetting: Object; ngOnInit(): void { ------- this.pageSetting = { pageCount: 2, pageSizes: true } ; } } |
import { Component, ViewChild, ViewEncapsulation, OnInit, Inject } from '@angular/core';
import { DataManager, WebApiAdaptor, Query, DataUtil } from '@syncfusion/ej2-data';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
let primaryKey: any;
let selectedRecord: any;
@Component({
selector: 'fetchdata',
templateUrl: './fetchdata.component.html',
encapsulation: ViewEncapsulation.Emulated
})
export class FetchDataComponent {
public data: any;
public toolbarOptions: string[] | undefined;
public editSettings: Object | undefined;
@ViewChild('treegrid')
public treegrid: TreeGridComponent;
ngOnInit(): void {
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: "Row", newRowPosition:"Below" };
this.toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel'];
this.data = new DataManager({
url: 'api/SelfReferenceData',
adaptor: new CustomAdaptor()
});
}
actionBegin(args: any): void {
if (args.requestType == "save" && args.action == "add") {
primaryKey = selectedRecord.TaskID;
}
}
rowSelected(args: any): void {
selectedRecord = args.data;
}
}
////// Extending the WebApiAdaptor and overriding the insert method.
class CustomAdaptor extends WebApiAdaptor {
public insert(dm: DataManager, data: Object, tableName?: string): Object {
dm.dataSource.url = dm.dataSource.url + "?$key=" + primaryKey //// sending the primary key of selected record in query string
return {
type: 'POST',
url: dm.dataSource.url,
data: JSON.stringify(data),
};
}
}
[Controller.cs] [HttpPost]
public object Post([FromBody]SelfReferenceData value)
{
var queryString = Request.Query;
StringValues keys;
queryString.TryGetValue("$key", out keys); /// retrieving the key value from querystring
int key = Int32.Parse(keys[0]);
SelfReferenceData.tree.Insert(0, value);
var data = SelfReferenceData.tree.ToList();
return Json(new { result = data, count = data.Count });
} |
Hi,
Treegrid it is loading records on initial load and when you expand the tree rows it is loading Childs on demand .
treegrid is using datamanager to pull the records from backend through API call.
I have few questions below
1) For the treegrid search we need to search the child records as well. in below scenario it is not working
as for the initial load we are only fetching the parent records. child data will be fetched if user expand parent rows. so search wont work on child records if user donot expand the rows.
2) when we fitler columns in treegrid it is hitting backend API
can we stop calling backend API for filter? instead can we filter locally available data?
Thanks,
Dayaka Reddy
