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

[Stephen Armstrong]

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]

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> 

Sample: http://www.syncfusion.com/downloads/support/forum/130496/ze/MvcApplication661748896938 

Regards, 

Jayaprakash K. 

 

[Stephen Armstrong]

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]

Hi Stephen,  

 

Thanks for the update. 

 

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

 

Regards,  

 

Jayaprakash K.