Controlling CSS property in popup editor of Devextreme Datagrid MVC

Introduction to Devextreme Datagrid

Devextreme Datagrid comes with different editing options like row, cell, batch, popup, etc. to insert into and update data in Datagrid. Data Grid is a perfect choice for any modern business application that provides a vast variety of capabilities including data editing and validation, searching and filtering, etc.

Popup editor option

Here popup editor option is being used for understanding.
@(Html.DevExtreme().DataGrid().ColumnAutoWidth(true)
.ID("companyGrid")
.Editing(e => e.Mode(GridEditMode.Popup)
.AllowUpdating(true)
.AllowAdding(true)
.Popup(p => p
.ID("CompanyEditPopup")
.Title("Company Information")
.ShowTitle(true)
.Width("inherit").MaxWidth(1000)
.Height("auto").MaxHeight(620).MinHeight(400)
.Position(pos => pos
.My(HorizontalAlignment.Center, VerticalAlignment.Top)
.At(HorizontalAlignment.Center, VerticalAlignment.Top)
.Of(new JS("window"))
).HoverStateEnabled(true)
)
)
.OnEditorPreparing("onEditorPreparing")
……………

In this, if we want to make some field disable at the time of insertion, but not during the update time, then this can be set at the ‘OnEditorPreparing’ event and on the client-side. The following code is used in the Devextreme. Here, Version 18 series is ‘inserted’ property of ‘row’ that is utilized to check if the popup is opened up for ‘insert’ event and based on that specific field can be disabled.

function onEditorPreparing(e) {
if ((e.dataField == "" || e.dataField == "" || e.dataField == "") && e.parentType == "dataRow") {
e.editorOptions.disabled = !e.row.inserted;
}
}
}

This check is changed in Devextreme latest versions of 19 series where a new row can be checked with isNewRow property of row as shown below:
e.editorOptions.disabled = !e.row.isNewRow;

What editing options do Devextreme Datagrid provide?

Devextreme Datagrid comes with different editing options like row, cell, batch, popup, etc. to insert into and update data in Datagrid.

What type of applications can benefit from Data Grid?

Data Grid is a perfect choice for any modern business application that provides a vast variety of capabilities including data editing and validation, searching and filtering, etc.

How can we disable a field at the time of insertion but not during the update time?

If we want to make some field disable at the time of insertion, but not during the update time, then this can be set at the ‘OnEditorPreparing’ event and on the client-side.

How can we check a new row in latest versions of 19 series?

In Devextreme latest versions of 19 series, a new row can be checked with isNewRow property of row as shown below: e.editorOptions.disabled = !e.row.isNewRow;