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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

130496 May 16,2017 01:15 AM May 25,2017 03:23 AM ASP.NET MVC 3
loading
Tags: Grid
Stephen Armstrong
Asked On May 16, 2017 01:15 AM

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

Jayaprakash Kamaraj [Syncfusion]
Replied On May 18, 2017 08:41 AM

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. 
 


Stephen Armstrong
Replied On May 24, 2017 08:24 PM

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

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

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


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.

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.

;