Grid rows readonly until previous row has value completed

[Cris]

Hi is there a way where each row is dependent on the previous row's value for example if the status is COMPLETED only then the next row will be editable.

Example here if status value is COMPLETED the next row should be open for editing. Thanks I appreciate it.

<e-grid-column field="clientName" isIdentity="true" headerText="Client" width="125"></e-grid-column>

<e-grid-column field="name" isIdentity="true" headerText="Name" width="75"></e-grid-column>

<e-grid-column field="description" isIdentity="true" headerText="Description" width="120"></e-grid-column>

<e-grid-column field="startDate" headerText="Start Date" editType="datetimepickeredit" width="75"></e-grid-column>

<e-grid-column field="endDate" headerText="End Date" editType="datetimepickeredit" width="75"></e-grid-column>

<e-grid-column field="status" headerText="Status" foreignKeyField="Status" foreignKeyValue="Name" dataSource="@ViewBag.status" editType="dropdownedit" edit="@(new {@params=ddlStatus })" width="75"></e-grid-column>

 <e-grid-column field="employeeId" headerText="Assigned" foreignKeyField="EmployeeId" foreignKeyValue="Name" dataSource="@ViewBag.employees" editType="dropdownedit" edit="@(new {@params=ddlEmployee })" width="75"></e-grid-column>

                  

[Seeni Sakthi Kumar Seeni Raj]

Hi Cris,  

Greetings from Syncfusion.  

You can prevent the editing action for the particular row in the ActionBegin event of the Grid. To check the previous row record in that event, use the getCurrentViewRecords method. Refer to the following code example 

    function actionBegin(args) { 

        if (args.requestType === "beginEdit") { 

            var prevRec = this.columns[1].dataSource.dataSource.json.find((e)=>e['EmployeeID'] ===this.getCurrentViewRecords()[args.rowIndex - 1]["EmployeeID"])["FirstName"] 

            if (prevRec == "Paul") { 

                args.cancel = true; 

            } 

        } 

    } 

<ejs-grid id="Grid" dataSource="@ViewBag.datasource" actionBegin="actionBegin" > 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 

        <e-grid-column field="EmployeeID" headerText="Empolyee Name" foreignKeyValue="FirstName" dataSource="ViewBag.foreign" width="150"></e-grid-column>                

             . . . 

           . . . 

    </e-grid-columns> 

 </ejs-grid> 

Regards,  

Seeni Sakthi Kumar