ejs2 grid Custom Add button

[Pradnya]

Hi , I have a ejs-grid . Instead of using Add from toolbar , I want to add custom Add button that will add dynamic data to the grid

[Rajapandiyan Settu]

Hi Pradnya,  

  

Thanks for contacting Syncfusion support. 

By using custom toolbar Items, you can render custom buttons in the Grid’s Toolbar. When we click the toolbar button, the toolbarClick event will be triggered. In that event, you can achieve perform your action based on the clicked item. It is explained in the below documentation. 

Custom Toolbar Items: https://ej2.syncfusion.com/aspnetcore/documentation/grid/tool-bar/#built-in-and-custom-items-in-toolbar 

toolbarClick: https://ej2.syncfusion.com/javascript/documentation/api/grid/#toolbarclick 

By using addRecord(data: Object) of Grid, you can add the record programmatically in the Gird. 

addRecord(): https://ej2.syncfusion.com/javascript/documentation/api/grid/#addrecord 

If this not meets your requirement, kindly share more information on your requirement. 

1. Explain your requirement in detail?
2. Why you want to use CustomAdd button in the Grid
3. Are you want to render the specific edit form for this custom Add button?
4. Which type of Editing you have used (Inline/ Dialog/ Dialog Template)?
5. Share the full Grid code files.

Regards,  

Rajapandiyan S 

[Pradnya]

Hi  Rajapandiyan S,

We have requirement wherein we want excel like add edit.

Toolbar grid edit option we are not using.

clicking on individual cell we are editing row and then saving entries by clicking on form Save

While editing records, the Add option from Toolbar gets disabled, Update & cancel are enabled.

But when I want to add new record, the Add button gets disabled from toolbar so cannot perform add operation

thus wanted to use Custom Add button in the grid which will add new blank where I can add dynamic details . do this multiple times and then save all entries on form Save

[Rajapandiyan Settu]

Hi Pradnya,  

  

Thanks for your update. 

Based on your requirement, you want to perform Excel like edit (“perform both add and edit action at a time”) in the EJ2 Grid. You can achieve this by using Batch Edit Feature of EJ2 Grid. This is explained in the below documentation. 

Batch Edit: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#batch 

Demo: https://ej2.syncfusion.com/aspnetcore/Grid/BatchEditing#/material 

You can bulk save (added, changed and deleted data in the single request) to data source by click on the toolbar’s Update button or by externally calling the batchSave method. To enable Batch edit, set the mode property of e-grid-editSettings tag helper as Batch. 

Please get back to us if you need further assistance with this. 

Regards,  

Rajapandiyan S 

[Pradnya]

Hi Rajapandiyan Settu,

Can you help me with batchSave method.

I want to save the edited records & newly added records on form save button

I have checked https://www.syncfusion.com/forums/167803/how-to-check-if-grid-has-changes-with-js-jquery
but the changed records are not getting updated in the grid

Regards,

Pradnya

[Pradnya]

Hi Rajapandiyan Settu,

We are just using Add button provided on the toolbar (Update & Cancel are not used from toolbar)

mode="Batch" in e-grid-editSettings

instance.editModule.batchSave(); //This line does not updates the grid datasource with the latest updated data

tempbatchChanges.changedRecords // This has the changes for row that has the updated data

Code snippet:-

//On form Save, we are saving the changes on the grid (added records + updated records)

document.getElementById("editPublicationForm").addEventListener("submit", e => {

    var instance = document.getElementById("authorsGrid").ej2_instances[0];

    if (instance.isEdit) {

        instance.endEdit();

    }

    var tempbatchChanges = instance.getBatchChanges();

    if (tempbatchChanges.addedRecords.length > 0 || tempbatchChanges.deletedRecords.length > 0 || tempbatchChanges.changedRecords.length > 0) {

        // execute the batchSave method if any changes applied in Grid

        instance.editModule.batchSave();

        var list = instance.dataSource; //grid datasource

        instance.batchChanges = tempbatchChanges; //changed records

        document.getElementById("ID_AuthorList").value = JSON.stringify(list);

    }

    document.getElementById("ID_AuthorList").value = JSON.stringify(instance.dataSource);

});

Any help would be great.

Thanks & Regards,
Pradnya

[Rajapandiyan Settu]

Hi Pradnya,  

  

Thanks for your update.  

Be default, we are not supposed to use EJ2 Grid inside the form element. Because when you perform Edit action in the Grid creates form element in it and pressing Enter Key on the Grid’s edit form submits both the forms (Grid’s edit form and default form). At that time, the edited value of the Grid is not properly saved. 

So, we need more information on your requirement to proceed further. Kindly share the below details. 

1. Explain your exact requirement in detail.
2. Which type of data-binding you have used? (local data/ remote data).
3. Share the complete Grid code files.

Regards,  

Rajapandiyan S 

[Pradnya]

Hi  Rajapandiyan Settu,

• For data-binding, we are using remote data.

• Adding of records is done using Add button from toolbar. 
• We want to save the records (added and updated) in the grid when we submit the form using Save button
• Previously you had mentioned that we can bulk save (added, changed and deleted data in the single request) to data source by click on the toolbar’s Update button or by externally calling the batchSave method.
• To enable Batch edit, set the mode property of e-grid-editSettings tag helper as Batch so as per that we changed mode to 'Batch' in e-grid-editSettings.
• Can you please share example of bulk save (added, changed and deleted data in the single request)  grid data using batchSave method example?
  
  

Code:-

<ejs-grid id="authorsGrid" dataSource="Model.FullAuthorList" allowResizing="true" allowRowDragAndDrop="true" allowReordering="true" allowSelection="true" toolbar="@(new List<string>() { "Add", "Update" , "Cancel" })" actionComplete="onComplete" actionBegin="onBegin">

                <e-grid-editSettings allowAdding="true" allowEditing="true" allowDeleting="true" showDeleteConfirmDialog="true" mode="Batch" allowEditOnDblClick="false" newRowPosition="Bottom"></e-grid-editSettings>

                <e-grid-columns>

                <e-grid-columns>

                    <e-grid-column field="Order" width="70" headerText="SrNo" allowResizing="false" allowEditing="false"></e-grid-column>

                    <e-grid-column field="FirstName" width="200" headerText="First Name" allowResizing="false"></e-grid-column>

                    <e-grid-column field="LastName" width="200" headerText=" Last Name" allowResizing="false"></e-grid-column>

                </e-grid-columns>

            </ejs-grid>

Regards,
Pradnya

[Balaji Sekar]

Hi Pradnya, 

Based on your query we have achieved the Grid dataSource send to server side using form submit action. In below code example, we have assigned the Grid’s dataSource to hidden input element based on Grid’s added/changed/deleted records and you can access the Grid’s dataSource  in server side. 

Please refer the below code example, screenshot and sample for more information. 

[Index.cshtml] 

<form action="/Home/FormSubmition" onsubmit='return validate()' method="post"> 

         <button>Submit</button>    

      <input type="hidden" name="GridData" id="hdndata" /> 

  </form>  

 

<ejs-grid id="Grid" dataSource="@ViewBag.dataSource" allowPaging="true" toolbar="@(new List<string>()"Add","Delete","Update","Cancel" , "ExcelExport","PdfExport"}​​​​​)" allowPdfExport="true" allowExcelExport="true">  

        <e-grid-editSettings allowAdding="true" allowDeleting="true" showConfirmDialog="false" allowEditing="true" mode="Batch" > 

        </e-grid-editSettings>  

 <e-grid-columns> 

             <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new {​​​​​ required=true}​​​​​)" textAlign="Right" width="120"></e-grid-column>  

            <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new {​​​​​ required=true}​​​​​)" width="150"></e-grid-column>    

          <e-grid-column field="Freight" headerText="Freight" format="C2" width="120"></e-grid-column>     

         <e-grid-column field="ShipCity" headerText="Ship City" minWidth="20" maxWidth="500"></e-grid-column>     

     </e-grid-columns>  

    </ejs-grid> 

 </div> 

 

function validate() {
      var grid = document.getElementById("Grid").ej2_instances[0];
      var tempbatchChanges = grid.getBatchChanges();
      if (tempbatchChanges.addedRecords.length > 0 || tempbatchChanges.deletedRecords.length > 0 ||                                                                      tempbatchChanges.changedRecords.length > 0 ) {
          grid.editModule.batchSave();
         var list = grid.dataSource;
         grid.batchChanges = tempbatchChanges;
         document.getElementById("hdndata").value = JSON.stringify(list);
         var form = document.getElementsByTagName("form")[0];
         form.submit();
  }
} 

Screenshot: 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/168988/ze/EJ2-Grid-Form-Submittion-643170860.zip 

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar.