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. Image for the cookie policy date

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

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.

Thanks,
Steve

Attachment: EJ_Grid__edit_row_e782b30.zip

3 Replies

JK Jayaprakash Kamaraj Syncfusion Team 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, 

 
@(Html.EJ().Grid<object>("Grid") 
              .Datasource((IEnumerable<object>)ViewBag.data) 
       .AllowPaging() 
            .EnableAutoSaveOnSelectionChange(false) 
            .PageSettings(page => { page.PageSize(10); }) 
            .EnableRowHover(false) 
            .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) { 
                        editbutton.eq(i).addClass("e-disable"); 
                        deletebutton.eq(i).addClass("e-disable"); 
                    } 
                } 
            } 
        } 
} 
   </script> 


Regards, 

Jayaprakash K. 
 



SA Stephen Armstrong 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"); })

JavaScript

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.

Cheers,
Steve

Attachment: Disable_rows_not_being_edited_d5b9ace1.zip


JK Jayaprakash Kamaraj Syncfusion Team May 25, 2017 07:23 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon