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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Edit button is not working in the Top menu - Edit mode : Batch

Thread ID:

Created:

Updated:

Platform:

Replies:

143922 Apr 10,2019 05:02 PM UTC Apr 15,2019 11:21 AM UTC ASP.NET Core - EJ 2 5
loading
Tags: DataGrid
Mani
Asked On April 10, 2019 05:02 PM UTC

Hi, 

I have implemented the Grid with Edit Mode as Batch. But Edit button which is present in the Top menu tool bar is not functioning. I will provide the code below, Please help  me to resolve this issue.

<ejs-grid id="Grid" enableHover="true" allowPaging="false" allowSorting="true"
                  toolbar="@(new List<string>() { "Edit","Update","Cancel","Search" })">
            <e-grid-editSettings allowEditing="true" mode="Batch"></e-grid-editSettings>            
            <e-data-manager url=@(string.Format("/Data/Get?id={0}&view={1}",Model.ModuleID,Model.View))
                            batchUrl="@(string.Format("/Data/BatchUpdate?id={0}&view={1}",Model.ModuleID,Model.View))" data="@Model.ModuleID" adaptor="UrlAdaptor"></e-data-manager>
            <e-grid-columns>
                <e-grid-column field="Key" headerText="@Localizer["Key"].Value" isPrimaryKey="true"></e-grid-column>
                <e-grid-column field="Value" headerText="@Localizer["Value"].Value" allowEditing="true" editType="StringEdit" 
                    validationRules='@(new Dictionary<string,object> { {"required",true}})'></e-grid-column>
            </e-grid-columns>
        </ejs-grid>

Thanks in advance,
Mani

Hariharan J V [Syncfusion]
Replied On April 11, 2019 07:03 AM UTC

Hi Mani, 

Greeting from Syncfusion. 

By default, while using batch edit mode then it perform editing based on the cell so that default edit toolbar does not work for batch edit in Grid. If you want to perform editing while clicking the toolbar then we suggest you to use custom toolbar and edit cell using editCell method of Grid in custom toolbar click event. 

Please refer the below code example for more information and help documentation for more information.  

@{ 
 
    List<object> toolbarItems = new List<object>(); 
    toolbarItems.Add("Add"); 
    toolbarItems.Add("Delete"); 
    toolbarItems.Add("Update"); 
    toolbarItems.Add("Cancel"); 
    // create custom toolbar 
    toolbarItems.Add(new { text = "Edit", tooltipText = "Edit", id = "Edit" }); 
} 
<ejs-grid id="Grid" allowPaging="true" allowFiltering="true" toolbar=toolbarItems toolbarClick="toolbarClick"> 
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings> 
    <e-data-manager url="/home/UrlDatasource" batchUrl="/Home/BatchUpdate" adaptor="UrlAdaptor"></e-data-manager> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column> 
       . . . . 
    </e-grid-columns> 
</ejs-grid> 
 
 
<script> 
    function toolbarClick(args) { 
        args.originalEvent.stopPropagation(); 
        if (args.item.id === 'Edit') { 
            var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
            // check row is selected or not 
            if (grid.getSelectedRecords().length === 0) { 
                grid.selectRow(0) // if no row selected then select first row 
            } 
            // edit cell using editCell Method  
            grid.editModule.editCell(Math.min(...grid.getSelectedRowIndexes()), "CustomerID"); 
        } 
    } 
</script> 

Help documentation :  



Regards, 
Hariharan 


Mani
Replied On April 11, 2019 01:53 PM UTC

Hi,

Thanks for the reply it works fine. I need one more thing to do. 

Can we do edit entire row instead column by column for the same example?

Can we do edit entire grid?

Thanks, 
Mani

Hariharan J V [Syncfusion]
Replied On April 12, 2019 05:47 AM UTC

Hi Mani, 

Thanks for your update. 
 
Query: Can we do edit entire row instead column by column for the same example? 

As per your suggestion we have modified the code. In the below code example, we have edit the cell based on the selected row target elements(td) instead of editing the same column(always as CustomerID provided in previous update). Please refer the below code example for more information. 

@{ 
 
    List<object> toolbarItems = new List<object>(); 
    toolbarItems.Add("Add"); 
    toolbarItems.Add("Delete"); 
    toolbarItems.Add("Update"); 
    toolbarItems.Add("Cancel"); 
    toolbarItems.Add(new { text = "Edit", tooltipText = "Edit", id = "Edit" }); 
} 
<ejs-grid id="Grid" allowPaging="true" allowFiltering="true" toolbar=toolbarItems toolbarClick="toolbarClick"> 
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"></e-grid-editSettings> 
    <e-data-manager url="/home/UrlDatasource" batchUrl="/Home/BatchUpdate" adaptor="UrlAdaptor"></e-data-manager> 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true"></e-grid-column> 
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column> 
        <e-grid-column field="EmployeeID" headerText="Employee ID" width="130" textAlign="Right"></e-grid-column> 
        <e-grid-column field="ShipCity" headerText="ShipCity" width="120"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
 
<script> 
    function toolbarClick(args) { 
        args.originalEvent.stopPropagation(); 
        if (args.item.id === 'Edit') { 
            var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 
            if (grid.getSelectedRecords().length > 0 && grid.selectionModule.target.nodeName === "TD") { 
                // based on the target we have edit the column 
                grid.editModule.editCell(Math.min(...grid.getSelectedRowIndexes()), grid.getColumns()[parseInt(grid.selectionModule.target.getAttribute('aria-colindex'))].field); 
            } 
        } 
    } 
</script> 

If the provided solution does not meet your requirement then provide more details it will be more helpful for us to validate and provide a better solution as soon as possible. 

Regards, 
Hariharan 


Mani
Replied On April 13, 2019 12:59 PM UTC

Thanks for the help hariharan.



Hariharan J V [Syncfusion]
Replied On April 15, 2019 11:21 AM UTC

Hi Mani, 
 
Thanks for your update.  
  
We are happy to hear that the provided solution helped you.   
  
Please contact us if you need any further assistance. As always, we will be happy to assist you.   
  
Regards, 
Hariharan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon