Articles in this section
Category / Section

How to prevent edit on particular cell and focus to next cell in batch editing

1 min read

Solution:

We can prevent the edit on particular cell and make in as read only cell in batch editing using CellEdit client side event of the Grid. Also to make focus the next cell from prevented cell use EditCell method in grid.

We can prevent the editing behavior for particular cell and make it as read only in Batch editing using “CellEdit” client side event of the grid.

The following code snippet explains the above behavior:

JS:

<div id="Grid"></div>
<script type="text/javascript">
        $(function () {
            $("#Grid").ejGrid({
                dataSource: data,
                editSettings:{allowAdding:true,allowEditing:true,allowDeleting:true,editMode:"batch"},
                columns: [
                       { field: "EmployeeID",isPrimaryKey: true, width: 75 },
                       { field: "FirstName", width: 100 },
                       { field: "Title", width: 120 },
                       { field: "City", width: 100 },
                       { field: "Country", width: 100 }
                ],
                cellEdit:"cellEdit"
            });
        });
    </script>

 

MVC:

@(Html.EJ().Grid<object>("GridFlatGrid")
        .Datasource((IEnumerable<object>)ViewBag.datasource)
        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Batch); })
        .Columns(col =>
        {
            col.Field("EmployeeID").IsPrimaryKey(true).Width(75).Add();
            col.Field("FirstName").Width(100).Add();
            col.Field("Title").Width(120).Add();
            col.Field("City").Width(100).Add();
            col.Field("Country").Width(100).Add();
        }).ClientSideEvents(eve => { eve.CellEdit("cellEdit");})
        )
 

 

ASP:

<ej:Grid ID="EmployeesGrid" runat="server" >
               <EditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" EditMode="Batch"/>
                <Columns>
                        <ej:Column Field="EmployeeID" IsPrimaryKey="true" Width="75" />
                        <ej:Column Field="FirstName" Width="100" />
                        <ej:Column Field="Title" Width="120" />
                        <ej:Column Field="City" Width="100" />
                        <ej:Column Field="Country" Width="100" />
                    </Columns>
                <ClientSideEvents CellEdit="cellEdit"/>
             </ej:Grid>

 

ASP.NET CORE

<ej-grid id="Grid"  datasource="ViewBag.datasource" cell-edit="cellEdit">
         <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="@(EditMode.Batch)” ></e-edit-settings>
         <e-columns>
            <e-column field="EmployeeID " header-text="EmployeeID" is-primary-key="true"></e-column width="75" >
            <e-column field="FirstName " header-text="FirstName” width="100" ></e-column>
            <e-column field="Title " header-text="Title" width="120" ></e-column>
            <e-column field="City " header-text="City" width="100" ></e-column>
            <e-column field="Country " header-text="Country" width="100"></e-column>
         </e-columns>
      </ej-grid>

                                                                                                                                                 

Angular

<ej-grid #grid id="Grid" [dataSource]="gridData"  (cellEdit)="onCellEdit($event)"  [editSettings]="editSettings">
    <e-columns>
        <e-column field="EmployeeID" [isPrimaryKey]="true" headerText="EmployeeID"  width=”70” ></e-column>
        <e-column field="FirstName" headerText="FirstName" width=”100” ></e-column>
        <e-column field="Title" headerText="Title" width=”120” ></e-column>
        <e-column field="City" headerText="City" width=”100” ></e-column>
        <e-column field="Country" headerText="Country" width=”100” ></e-column>        
    </e-columns>
</ej-grid>

 

TS file

@ViewChild('grid') GridModel: EJComponents<any, any>;
 
onCellEdit(e:any){
    if (e.columnName == "FirstName" && e.value == "Nancy") {
            e.cancel = true;
            var index = $(e.cell).index() + 1;
            this.GridModel.widget.editCell($(e.row).index(),this.GridModel.widget.getColumnByIndex(index).field);  // making next cell to be edited
        }
}

 

 

JavaScript:

<script type="text/javascript">
    function cellEdit(args) {
    if (args.columnName == "FirstName" && args.value == "Nancy") {
            args.cancel = true;
//We have prevent editing for the cell which contains FirstName as “Nancy”
            var index = $(args.cell).index() + 1;                                          
            this.editCell($(args.row).index(), this.getColumnByIndex(index).field);  // making next cell to be edited
        }
  }
</script>

Result:The following output will be the result of the above code example.

C:\Users\Manisankar.durai\Desktop\sshot-1.png

Figure: FirstName as Read only cell and making next cell to focus in Batch editing

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied