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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

When edit row, disable edit row command for all other rows

Thread ID:





130496 May 16,2017 05:15 AM UTC May 25,2017 07:23 AM UTC ASP.NET MVC 3
Tags: Grid
Stephen Armstrong
Asked On May 16, 2017 05:15 AM UTC

I have a grid that shows a list of name for a person.

I want to be able to edit only one row at a time and not be able to edit other rows unless Save or Cancel is clicked on the current row being edited.  Basically (looking at the image attached), when I click to edit row 2, I do not want to be able to select the edit button on row 1.


Attachment: EJ_Grid__edit_row_e782b30.zip

Jayaprakash Kamaraj [Syncfusion]
Replied On May 18, 2017 12:41 PM UTC

Hi Stephen, 

Thank you for contacting Syncfusion support. 

We have achieved your requirement using ActionBegin event of ejGrid. In this event we to disable all the command edit and delete command buttons other than edited row using below code example when args.requestType as beginedit, 

            .PageSettings(page => { page.PageSize(10); }) 
            .EditSettings(edit => { edit.AllowDeleting().AllowEditing().AllowEditOnDblClick(false); }) 
        .Columns(col => 
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(90).Add(); 
            col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add(); 
        }).ClientSideEvents(eve => eve.ActionBegin("actionbegin"))) 
<script type="text/javascript"> 
    function actionbegin(args){ 
        if (args.requestType == "beginedit") { 
            var editbutton = this.element.find(".e-editbutton.e-button"); 
            var deletebutton = this.element.find(".e-deletebutton.e-button"); 
            if (editbutton.length > 1) { 
                for (i = 0; i < editbutton.length; i++) { 
                    if (i != args.rowIndex) { 


Jayaprakash K. 

Stephen Armstrong
Replied On May 25, 2017 12:24 AM UTC

Hi Jayaprakash,

You solution did not really work for us, but pointed me in the right direction.

Here is my solution...

Client Event on Grid
.ClientSideEvents(e => { e.ActionBegin("onAction").ActionComplete("onActionComplete").RowSelecting("cancelSelectionIfDisabled"); })


function onAction(args)
    var gridName = $(this)[0]._id;

    if (args.requestType === "save") {
        toggleDisableForGrid(args, gridName, false);
    else if (args.requestType === "beginedit") {
        toggleDisableForGrid(args, gridName, true);
    else if (args.requestType === "cancel") {
        toggleDisableForGrid(args, gridName, false);

function toggleDisableForGrid(args, gridName, toggle) {
var rows = $("#" + gridName + ' [role="row"]');
// Enable/Disable rows
if (rows.length >= 1) {
   for (i = 0; i < rows.length; i++) {
       if (i != args.rowIndex) {
           var row = rows[i];
           $(row).toggleClass('e-disable', toggle);

function cancelSelectionIfDisabled(args) {
    var rowDisabled = $(args.row).hasClass('e-disable')
    if (rowDisabled)
        args.cancel = true;

I have also attach an example of what happens when you select to edit a row.

Thanks for your help.


Attachment: Disable_rows_not_being_edited_d5b9ace1.zip

Jayaprakash Kamaraj [Syncfusion]
Replied On May 25, 2017 07:23 AM UTC

Hi Stephen,  
Thanks for the update. 
Please get back to us if you need any further assistance.   
Jayaprakash K. 


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

or the page will be automatically redirected to 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