BoldDesk®Customer service software with ticketing, live chat & omnichannel support, starting at $99/mo for unlimited agents. Try for free!
|
[actionBegin event]
actionBegin = (args:any) => {
if (args.requestType == 'save' && args.action == 'add') {
args.cancel = true; //cancel normal add operation
//here you can send the post request to server side using AJAX
this.grid.editModule.closeEdit(); //cancel the edit
bulkAdd.push(args.data);//store the added records
this.grid.getCurrentViewRecords().unshift(args.data); //push the data to grid view
gridObj.renderModule.dataManagerSuccess({ result: gridObj.getCurrentViewRecords(), count: gridObj.getCurrentViewRecords().length });
}
}
|
|
[buttonclick]
function bulkAdd(args) {
let ajax:any = new Ajax("/Home/BulkSave", "POST", true); // call API
ajax.send(JSON.stringify(this.bulkUpdate)).then(
(data) => {
//do stuff
bulkAdd = []; //here empty the bulk add array
});
}
[Controller]
public ActionResult BulkSave([FromBody] List<OrdersDetails> value) {
//do stuff
return Json(value);
}
|
Hi Gaviyaiah,Thanks for using Syncfusion products.As from your query, we suspect that do you want add the multiple records in grid view(Client side) as well as the corresponding request will not sent to server side for adding the records. If so, we have achieved your requirement ‘Adding the data into Grid view without send the single request to server side’ using actionBegin event and dataManagerSuccess function in Grid. Please refer to the following code example,
After adding the rows, we can send the bulk save request to server side while click the button like as follows,
Please let us know if you have any further assistance on this or If we misunderstood your requirement, then could you please provide more information about this requirement?
Regards,Venkatesh Ayothiraman.
|
[Grid html]
<ejs-grid #grid [dataSource]='data' (actionBegin)='actionBegin($event)'>
<e-columns>
. . .
</e-columns>
</ejs-grid>
|
|
addButtonClik(e) {
//here you can get the values which is filled by user
i. ContactPerson:"Person1"
ii. Date:Sat Jun 30 2018 00:00:00 GMT+0530 (India Standard Time) {}
iii. EndTime:Thu Jun 28 2018 01:30:00 GMT+0530 (India Standard Time) {}
iv. Language:"Hindi"
v. StartTime:Thu Jun 28 2018 00:00:00 GMT+0530 (India Standard Time) {}
vi. TimeZone:"Mountain Time Zone"
vii. Gender:"Female"
let record:Object = { ContactPerson:"Person1"
, Date: Sat Jun 30 2018 00:00:00 GMT+0530 (India Standard Time), EndTime: Thu Jun 28 2018 01:30:00 GMT+0530 (India Standard Time), StartTime: Thu Jun 28 2018 00:00:00 GMT+0530 (India Standard Time), Gender:"Female" };
this.Grid.addRecord(0, record)
}
}
|
Hi Gaviyaiah,Thanks for the update.We went through your word documentation and screenshot that you have shared with us and found that you would like to add a record when user fill the details and click the add button. If so, we suggest you use addRecord API in Grid to perform the add operation. This is the recommended way to add a record dynamically. Please refer to the following Help documentation for more information,Help documentation: https://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#addrecordCode example:
Please let us know if you have any further assistance on this.
Regards,Venkatesh Ayothiraman.
|
let gridInst:GridComponent = document.getElementById("Grid").ej2_instances[0];
|
|
@ViewChild('grid') public grid: GridComponent
//Here this.grid is Grid component
|
let gridInst:GridComponent = document.getElementById("Grid").ej2_instances[0]; |
|
Query |
Description | |
|
Query #1:” Again, I tried your suggestions and it is still not working. I get this error.” |
This is typescript lint(type-cast) issue. So, we suggest you to typecast the HTMLElement to resolve this issue. Please refer to the following code example,
Please refer to the following online forums for more information,
| |
|
Query #2:” ERROR TypeError: Cannot read property 'addRecord' of undefined” |
This issue occurs in following scenarios,
i) We have tried to take the instances of Grid before the control is render and add the record.
ii) ViewChild decorator id is mismatching or missed to define. Please refer to the following code example,
Note: Please ensure your ViewChild definition and ID is correct
iii) Missed to import the Edit module. Please refer to the following UG documentation for more information,
We have also prepared a sample for your convenience which can be download from following link,
Please let us know if you have any further assistance on this.
|
Hi,
I am using ejs-grid with infinite scrolling inside ejs-tab, in console whenever I scroll and reach end of the grid I am fetching data from api and also data is getting updated. But grid scroller is hitting top of the grid again.
I have tried this.grid.refresh(), but it is not working.
Hi Aparna,
We have created a new forum “183101” for the “Infinite Scrolling” query under your account. So please follow that forum for more updates regarding infinite scrolling.
Regards,
Pavithra S
