Add new record in the grid from jquery without calling batchSave() method.

[sachin]

Hello,

I have been using syncfusion grid and i really like your product and your technical support. I am having a problem with batchEidt mode and i am hoping that you will solve it as you always do.

The thing is i need to add new record from jquery ( Note that i am not pressing the grid control add button) without loosing the old data in the gird in batchEdit mode.

I tried to use the gridobj.addRecord(json ) and it adds a new row in the grid but then it directly calls the batchSave() method and i don't want the obj.addRecord() method to call batchSave() method instead i want to call the batchSave() method manually after performing add ,delete and edit operation to save all the grid data together in the saver.

can you please tell me how to add multiple records from jquery to grid in batchEditMode without loosing the existing grid data and save them together in the server.

You can see my grid code below -

                    @(Html.EJ().Grid<object>("HRZGrid")

                         .Datasource(ds => ds.URL(Url.Action("DataSource", "Transaction", null, Request.Url.Scheme)).BatchURL(Url.Action("Update", "Transaction", null, Request.Url.Scheme)).Adaptor(AdaptorType.UrlAdaptor))

                         .EnableAltRow()

                         .IsResponsive()

                         .AllowSorting()

                         .CssClass("hrz-grid")

                         .Locale("en-GB")

                         .GridLines(GridLines.Horizontal)

                         .EditSettings(edit => edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Batch))

                         .PageSettings(page =>

                         {

                             page.PageSize(5);

                         })

                         .ToolbarSettings(toolbar =>

                         {

                             toolbar.ShowToolbar().ToolbarItems(items =>

                             {

                                 items.AddTool(ToolBarItems.Add);

                                 items.AddTool(ToolBarItems.Edit);

                                 items.AddTool(ToolBarItems.Delete);

                                 items.AddTool(ToolBarItems.Update);

                                 items.AddTool(ToolBarItems.Cancel);

                                 items.AddTool(ToolBarItems.Search);

                             });

                         })

                         .AllowTextWrap()

                         .AllowResizeToFit()

                         .EnableHeaderHover()

                         .AllowPaging()

                        .ClientSideEvents(eve =>

                        {

                            eve.ActionComplete("onComplete");

                            eve.ActionFailure("onFailure");

                            eve.Create("onCreate");

                            eve.ActionBegin("onBeginAction");

                            eve.CellEdit("onCellEdit");

                            eve.CellSave("onCellSave");

                            eve.BatchDelete("onBatchDelete");

                        })

                         .Columns(col =>

                         {

                             col.Field("id").Visible(false).IsPrimaryKey(true).Add();

                             col.Field("No").HeaderText("NO.").AllowEditing(false).TextAlign(TextAlign.Left).Width(70).Add();

                             col.Field("code").HeaderText("Code").TextAlign(TextAlign.Left).Width(70).Add();

                             col.Field("description").HeaderText("Description").Width(90).TextAlign(TextAlign.Left).Add();                         

                         })

                    )

Regards ,

sachin 

[Saravanan Arunachalam]

Hi Sachin, 

Thanks for contacting Syncfusion’s support. 

The save action will be performed automatically when adding new record using addRecord method with Json data which is default behavior of Grid control. If you want to add a new row without perform save action, we suggest you to use the addRecord method without arguments (do not pass the Json data) which is add a new row with empty data and entered the data for that added row manually by edit the cells. Please refer to the below code example. 

var gridObj = $("#Grid").ejGrid("instance"); 

gridObj.addRecord(); 

   

Then you can send the bulk request after edit, delete and add by calling the batchSave method of Grid control 

Regards, 

Saravanan A. 

[sachin]

Hi Saravanan , 

But i am using two grids in the same page and on double click of the first grid i want to add that grid's record to the 2nd grid. if i use obj.addRecord() then i wont get the first grid data. could you please tell me how to i achieve this.

Regards,

Sachin

[Saravanan Arunachalam]

Hi Sachin, 

We have analyzed your requirement and achieved it by using addRecord method (without json data) and BeforeBatchAdd method of Grid control. In that BeforeBatchAdd event, we have changed the defaultData before rendering the add row and please refer to the below code example and api reference link. 

var gridObj = $("#Grid").ejGrid("instance");  

gridObj.addRecord(); //Call the addRecord method 

 

@(Html.EJ().Grid<object>("HRZGrid") 

                         . . . 

                        .ClientSideEvents(eve => 

                        { 

                           . . . 

                            eve.BeforeBatchAdd("onBeforeBatchAdd"); 

                        }) 

                         

) 

function onBeforeBatchAdd(args) { 

        //Assign json data to the args.defaultData before render the add row 

        args.defaultData = json; 

    } 

 

https://help.syncfusion.com/api/js/ejgrid#events:beforebatchadd  

Regards, 

Saravanan A. 

[sachin]

Hi Saravanan,

Thank you so much , your solution worked for me. But i am facing two more issues with batch edit mode.

1.  Whenever i add or edit a new record in the grid all the textbox display a default text '[Object Object]'  and i have to clear that text every time i edit the record. but this problem doesn't come if a use editType as numeric because numeric fields have a default placeholder as 'Enter value'  so if there any way that i could put the same placeholder like numeric field on my text field.
2. Is there any way to insert a new row above the selected one in the grid?.

Regards,

Sachin 
 

[Mani Sankar Durai]

Hi Sachin, 

 

Query 1: Whenever I add or edit a new record in the grid all the textbox display a default text '[Object Object]' and I have to clear that text every time i edit the record. 

 

 We have analyzed your query and we are able to reproduce the reported issue. This issue has been reproduced due to empty dataSource is bounded for columns or when field name is not in the dataSource. Since it is already a known issue and it will be available in our latest Essential studio version (15.2.0.46).  So we suggest you to upgrade to the latest Essential Studio 2017 Volume 2 Service Pack 2 Release v15.2.0.46 which is rolled out and available for download under the following link. 

https://www.syncfusion.com/forums/131295/essential-studio-2017-volume-2-service-pack-2-release-v15-2-0-46-available-for-download 

 

Query 2: Is there any way to insert a new row above the selected one in the grid? 

 

   Before proceeding please share us the following details. 

1.       Is that you want to add new record above the selected record as like in excel? 

2.       Is that you want to save the newly added record in the same particular place? 

3.       Please share the exact scenario of your requirement. 

The provided information will help us to analyze the issue and provide you the response as early as possible. 

 

Please let us know if you need further assistance. 

 

Regards, 

Manisankar Durai. 

 

 

 

 

 

[sachin]

Hi Saravanan , 

Yes i want to add a new row above the selected one.is it possible?

Regards,

Sachin 

[Mani Sankar Durai]

Hi Sachin, 

In grid the records can be add only in top of the first page or bottom of the last page. When using local data in grid the records will tends to add at the top of the first page. When using remote data the records will be add at the last row last page. But adding records above the selected rows is not feasible in grid.  

If you want to add the records above the selected records we would like to suggest the Syncfusion ejSpreadsheet control which tends to insert the records in between as like excel. 

Refer the documentation link. 

Link: https://help.syncfusion.com/js/spreadsheet/getting-started 

Refer the online sample link. 

Link: http://js.syncfusion.com/demos/web/#!/bootstrap/spreadsheet/defaultfunctionalities 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai