Duplicate row client side

Question

Hi,I need to duplicate a row in an ejGrid, which uses a UrlAdaptor derived dataSource, without sending it straight to the server. Instead the change should be batched for manual saving.Currently the delete toolbar button works like this. It visibly deletes a row, but the result is not immediately saved.How do I get the desired functionality?

Thavasianand Sankaranarayanan · Answer

Hi Roland,

Thanks for contacting Syncfusion support.

We have analyzed your query and that you want to enable batch edit mode with url adaptor. So, we suggest you to enable UrlAdaptor in Grid. In batch editing, we have saved the data once the desired cell value get edited in Grid. In server end we have return the batch changes as changed, added, deleted.

Refer the below code example.

[Index.cshtml]

$(function () {// Document is ready.

var dataManager = ej.DataManager({

url: "UrlDataSource",

batchUrl: "BatchUpdate",

adaptor: new ej.UrlAdaptor()

});

$("#Grid").ejGrid({

dataSource: dataManager,

allowPaging: true,

editSettings: {

allowEditing: true,

allowAdding: true,

allowDeleting: true,

editMode: "batch",

showConfirmDialog: false

},

columns: [

----

]

});

------------------------------------------------

[HomeController.cs]

public object UrlDataSource(DataManager dm)

{

IEnumerable DataSource = OrderRepository.GetAllRecords().ToList(); ;

DataOperations ds = new DataOperations();

if (dm.Search != null && dm.Search.Count > 0)

{

DataSource = ds.PerformSearching(DataSource, dm.Search);

}

if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting

{

DataSource = ds.PerformSorting(DataSource, dm.Sorted);

}

if (dm.Where != null && dm.Where.Count > 0) //Filtering

{

DataSource = ds.PerformWhereFilter(DataSource, dm.Where, dm.Where[0].Operator);

}

var count = DataSource.AsQueryable().Count();

DataSource = ds.PerformSkip(DataSource, dm.Skip);

DataSource = ds.PerformTake(DataSource, dm.Take);

if (dm.RequiresCounts)

return Json(new { result = DataSource, count = count });

else

return Json(DataSource, JsonRequestBehavior.AllowGet);

}

public ActionResult BatchUpdate(List<EditableOrder> changed, List<EditableOrder> added, List<EditableOrder> deleted)

{

if (changed != null)

OrderRepository.Update(changed);

if (deleted != null)

OrderRepository.Delete(deleted);

if (added != null)

OrderRepository.Add(added);

var data = OrderRepository.GetAllRecords();

return Json(data, JsonRequestBehavior.AllowGet);

}

We have prepared a sample and it can be downloadable from the below location.

Sample: http://www.syncfusion.com/downloads/support/forum/133678/ze/Sample-641913456.zip

For more information about url adaptor please refer the following knowledge base documentation.

Kb link: https://www.syncfusion.com/kb/4300/server-side-api-for-datamanager-operations

Refer the help documentation.

Link: https://help.syncfusion.com/js/grid/editing#batch--excel-like

Link: https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#url-adaptor

Regards,

Thavasianand S.

Roland Pukk · Answer

Thank you for replying.I am already using batch edit mode. My problem is using addRecord with a duplicate will immediately send an update to the server. The serverChange parameter doesn't seem to have any effect.

Vignesh Natarajan · Answer

Hi Roland, 

We have achieved your requirement through beforeBatchSave event of the Grid. It will be triggered before saving the record to Grid. There you can check whether it is duplicate and cancelling it by setting the args.cancel as true. 
Please refer the below code snippet 





$("#Grid").ejGrid({ 
            dataSource: dataManager, 
            allowPaging: true,          
           beforeBatchSave: "beforesave", 
            editSettings: { 
. . . . . . 
 
    }); 
    function beforesave(args) { 
        if (args.batchChanges.added[0].OrderID == 12333) 
            args.cancel = true;  // will disable form saving the record to the grid. 
    }  
     

Note: in this method you can get the duplicate variable value where you can save in global variable for your purpose 

For your convenience we have prepared a sample which can be downloaded from below link 

Sample: http://www.syncfusion.com/downloads/support/forum/133678/ze/Sample-154888434  
Regards, 
Vignesh Natarajan

Roland Pukk · Answer

Cancelling the batch save indeed stops sending a request to the server, however the new row that's supposed to be a duplicate doesn't appear in the grid. My requirement is to batch all the changes until the user manually clicks the toolbar save button.

Thavasianand Sankaranarayanan · Answer

Hi Roland, We have analyzed your query and we suspect that you want to add a Grid record. In default, addRecord() method will immediately update the record in Grid and server end. But in your scenario you need to have the added record in the batchChanges then you need to update in a single click. So, we suggest you to push the newly added record in the batchChanges.added then call for the batchSave() method to save the entire changes in a single click. For an example we have done the above requirement using an external button click. Refer the below code example.

Roland Pukk · Answer

Your analysis is correct, however I also need to visually add the new rows to the grid table, until the user decides to either save it or discard all changes.For now, I managed to get this functionality using undocumented grid JS functions, but I hope there is a supported way of doing this.

Thavasianand Sankaranarayanan · Answer

Hi Roland, 
 
We are happy that the problem has been solved at your end. 
 
Please get back to us if you need any further assistance.  
 
Regards, 
Thavasianand S.