Devexpress Angular Read Only Field Invisible on Popup Editor

Editing

User Interaction

Users can add, delete, and update grid data. To enable these operations, assign true to the corresponding fields of the editing object. Yous can prepare a column's allowEditing property to false if its data should not be edited.

Grid data can be edited in several modes. Set the editing.mode property to specify the mode.

jQuery

JavaScript

$(office() {     $("#dataGridContainer").dxDataGrid({         // ...         editing: {             allowUpdating: true,              allowAdding: truthful,              allowDeleting: true,             mode: 'row' // 'batch' | 'cell' | 'class' | 'popup'         },         columns: [             { dataField: 'id', allowEditing: false },             // ...         ]     }); });
Angular

HTML

TypeScript

<dx-data-filigree ... >     <dxo-editing         [allowUpdating]="true"         [allowAdding]="true"         [allowDeleting]="truthful"         mode="row"> <!-- 'batch' | 'cell' | 'class' | 'popup' -->     </dxo-editing>     <dxi-column dataField="id" [allowEditing]="false"></dxi-column> </dx-data-grid>
import { DxDataGridModule } from "devextreme-angular"; // ... export form AppComponent {     // ... } @NgModule({     imports: [         // ...         DxDataGridModule     ],     // ... })
Vue

App.vue

<template>     <DxDataGrid ... >         <DxEditing             :allow-updating="true"             :allow-adding="true"             :allow-deleting="true"             mode="row" /> <!-- 'batch' | 'jail cell' | 'form' | 'popup' -->         <DxColumn information-field="id" :allow-editing="false" />     </DxDataGrid> </template>  <script> import 'devextreme/dist/css/dx.lite.css';  import DxDataGrid, {     DxEditing,     DxColumn } from 'devextreme-vue/information-grid';  export default {     components: {         DxDataGrid,         DxEditing,         DxColumn     } } </script>
React

App.js

import React from 'react';  import 'devextreme/dist/css/dx.light.css';  import DataGrid, {     Editing,     Column } from 'devextreme-react/data-filigree';  class App extends React.Component {     render() {         return (             <DataGrid ... >                 <Editing                     allowUpdating={true}                     allowAdding={true}                     allowDeleting={true}                     mode="row" /> {/* 'batch' | 'cell' | 'form' | 'popup' */}                 <Cavalcade dataField="id" allowEditing={fake} />             </DataGrid>         );     } } export default App;

The following sections item the DataGrid's appearance and behavior in each editing way.

Row Style

In this way a user edits data row by row. When a user clicks an "Edit" button, the corresponding row enters the editing state, and the "Relieve" and "Cancel" buttons appear in the edit cavalcade. The UI component saves changes but if the "Salvage" button is clicked. If a user starts editing another row, sorts or filters data, it discards the changes.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Row Mode Editing State

Clicking the "Delete" button invokes the confirmation dialog that allows a user to cancel row deletion. confirmDelete property to hide this dialog.

jQuery

JavaScript

$(office() {     $("#dataGridContainer").dxDataGrid({         // ...         editing: {             // ...             fashion: 'row',             allowDeleting: truthful,             confirmDelete: imitation         }     }); });
Athwart

HTML

TypeScript

<dx-data-grid ... >     <dxo-editing          mode="row"          [allowDeleting]="truthful"         [confirmDelete]="simulated">     </dxo-editing> </dx-data-grid>
import { DxDataGridModule } from "devextreme-athwart"; // ... export class AppComponent {     // ... } @NgModule({     imports: [         // ...         DxDataGridModule     ],     // ... })
Vue

App.vue

<template>     <DxDataGrid ... >         <DxEditing             mode="row"             :allow-deleting="true"             :confirm-delete="faux"         />     </DxDataGrid> </template>  <script> import { DxDataGrid, DxEditing } from 'devextreme-vue/data-filigree';  export default {     components: {         DxDataGrid,          DxEditing     },     data() {} } </script>
React

App.js

import React from 'react';  import { DataGrid, Editing } from 'devextreme-react/data-filigree';  class App extends React.Component {     render() {         return (             <DataGrid ... >                 <Editing                     mode="row"                     confirmDelete={false}                     allowDeleting={true}                  />             </DataGrid>         );     } } export default App;                

View Demo

See Also
  • Information Validation

Jail cell Style

In the cell mode, a user edits data cell by cell. Changes are saved once a cell loses the focus, or discarded if a user presses Esc. An added row is saved only when the focus is shifted from it. Cull this fashion if any changes should exist saved to the data source immediately.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Cell Mode

If you lot validate information, a cell is locked in the editing state until a user enters a valid value or clicks the "Abolish Changes" button.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Cell Mode Validation

Clicking the "Delete" button invokes the confirmation dialog that allows a user to cancel row deletion. Use the confirmDelete belongings to hide this dialog.

jQuery

JavaScript

$(role() {     $("#dataGridContainer").dxDataGrid({         // ...         editing: {             mode: 'cell',              confirmDelete: imitation         }     }); });
Athwart

HTML

TypeScript

<dx-data-grid ... >     <dxo-editing          mode="cell"          [allowDeleting]="true"         [confirmDelete]="false">     </dxo-editing> </dx-information-grid>
import { DxDataGridModule } from "devextreme-athwart"; // ... consign class AppComponent {     // ... } @NgModule({     imports: [         // ...         DxDataGridModule     ],     // ... })
Vue

App.vue

<template>     <DxDataGrid ... >         <DxEditing             mode="row"             :allow-deleting="truthful"             :confirm-delete="simulated"         />     </DxDataGrid> </template>  <script> import { DxDataGrid, DxEditing } from 'devextreme-vue/data-grid';  consign default {     components: {         DxDataGrid,          DxEditing     },     data() {} } </script>
React

App.js

import React from 'react';  import { DataGrid, Editing } from 'devextreme-react/data-filigree';  form App extends React.Component {     return() {         render (             <DataGrid ... >                 <Editing                     style="row"                     confirmDelete={simulated}                     allowDeleting={truthful}                  />             </DataGrid>         );     } } export default App;

View Demo

See Likewise
  • Data Validation

Batch Mode

In the batch style, similar in the cell mode, a user edits data jail cell by jail cell. However, in this style, the UI component stores changes in a buffer until a user clicks the global "Relieve" button instead of saving them immediately. This mode is useful when y'all need to defer saving multiple changes.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Batch Mode

When a user clicks a row's "Delete" button, the UI component only marks the row as deleted. Users can restore this row by clicking the "Undelete" button if they have not saved the changes yet. They can also discard all unsaved changes past clicking the "Revert" button.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Batch Mode Deletion

View Demo

See Too
  • Data Validation

Form Mode

In course edit way, row cells become editable grade fields. Course fields are sorted like columns in the columns array.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Form Mode

Configure the course using the editing.form object. The DataGrid uses the DevExtreme Course UI component, and then y'all can specify any Form properties in this object except those listed in its description.

For example, you can specify the items assortment to reorder editable fields (or "elementary items", every bit they are called in the Form UI component), or organize them in groups and tabs.

In the following code, the items with the specified dataField are elementary items. Identical dataFields connect a simple detail with a column:

jQuery

JavaScript

$(office() {     $("#dataGridContainer").dxDataGrid({         // ...         editing: {             allowUpdating: true,             fashion: "form",             course: {                 items: [{                     itemType: "group",                     caption: "Personal Data",                     items: [                         { dataField: "Prefix" },                         { dataField: "Full_Name" },                         { dataField: "Position" },                         { dataField: "Duties", editorType: "dxTextArea" }                     ]                     // or just                     // items: ["Prefix", "Full_Name", "Position"]                 }, {                     itemType: "grouping",                     explanation: "Contacts",                     items: ["Email", "Skype"]                 }]             }         },         columns: [              { dataField: "Full_Name" },              { dataField: "Prefix" },             { dataField: "Position" },             { dataField: "Duties" },             { dataField: "Email" },             { dataField: "Skype" }          ]     }); });
Angular

HTML

TypeScript

<dx-data-grid ... >     <dxo-editing         [allowUpdating]="truthful"         mode="form">         <dxo-form>             <dxi-item itemType="group" caption="Personal Data">                 <dxi-detail dataField="Prefix"></dxi-item>                 <dxi-item dataField="Full_Name"></dxi-item>                 <dxi-particular dataField="Position"></dxi-detail>                 <dxi-item dataField="Duties" editorType="dxTextArea"></dxi-detail>             </dxi-particular>             <dxi-detail itemType="grouping" caption="Contacts">                 <dxi-item dataField="Electronic mail"></dxi-item>                 <dxi-item dataField="Skype"></dxi-particular>             </dxi-detail>         </dxo-form>     </dxo-editing>     <dxi-cavalcade dataField="Full_Name"></dxi-column>     <dxi-cavalcade dataField="Prefix"></dxi-column>     <dxi-cavalcade dataField="Position"></dxi-cavalcade>     <dxi-cavalcade dataField="Duties"></dxi-column>     <dxi-column dataField="E-mail"></dxi-column>     <dxi-column dataField="Skype"></dxi-column> </dx-data-grid>
import { DxDataGridModule } from "devextreme-angular"; // ... export class AppComponent {     // ... } @NgModule({     imports: [         // ...         DxDataGridModule     ],     // ... })
Vue

App.vue

<template>     <DxDataGrid ... >         <DxEditing             :allow-updating="truthful"             way="grade">             <DxForm>                 <DxGroupItem caption="Personal Information">                     <DxSimpleItem data-field="Prefix" />                     <DxSimpleItem data-field="Full_Name" />                     <DxSimpleItem data-field="Position" />                     <DxSimpleItem data-field="Duties" editor-type="dxTextArea" />                 </DxGroupItem>                 <DxGroupItem caption="Contacts">                     <DxSimpleItem data-field="E-mail" />                     <DxSimpleItem data-field="Skype" />                 </DxGroupItem>             </DxForm>         </DxEditing>         <DxColumn data-field="Full_Name" />         <DxColumn data-field="Prefix" />         <DxColumn data-field="Position" />         <DxColumn data-field="Duties" />         <DxColumn data-field="Email" />         <DxColumn data-field="Skype" />     </DxDataGrid> </template>  <script> import 'devextreme/dist/css/dx.calorie-free.css';  import DxDataGrid, {     DxEditing,     DxForm,     DxColumn } from 'devextreme-vue/data-filigree';  import {     DxSimpleItem,     DxGroupItem } from 'devextreme-vue/form';  import 'devextreme-vue/text-surface area';  export default {     components: {         DxDataGrid,         DxEditing,         DxForm,         DxColumn,         DxSimpleItem,         DxGroupItem     } } </script>
React

App.js

import React from 'react';  import 'devextreme/dist/css/dx.light.css';  import DataGrid, {     Editing,     Form,     Column } from 'devextreme-react/data-filigree';  import {     SimpleItem,     GroupItem } from 'devextreme-react/form';  import 'devextreme-react/text-area';  class App extends React.Component {     render() {         return (             <DataGrid ... >                 <Editing                     allowUpdating={true}                     style="form">                     <Form>                         <GroupItem caption="Personal Data">                             <SimpleItem dataField="Prefix" />                             <SimpleItem dataField="Full_Name" />                             <SimpleItem dataField="Position" />                             <SimpleItem dataField="Duties" editorType="dxTextArea" />                         </GroupItem>                         <GroupItem caption="Contacts">                             <SimpleItem dataField="Email" />                             <SimpleItem dataField="Skype" />                         </GroupItem>                     </Form>                 </Editing>                 <Cavalcade dataField="Full_Name" />                 <Cavalcade dataField="Prefix" />                 <Column dataField="Position" />                 <Column dataField="Duties" />                 <Column dataField="Email" />                 <Cavalcade dataField="Skype" />             </DataGrid>         );     } } export default App;
ASP.Net MVC Controls

Razor C#

@(Html.DevExtreme().DataGrid()     // ...     .Editing(due east => e         .AllowUpdating(true)         .Mode(GridEditMode.Form)         .Form(f => f             .Items(i => {                 i.AddGroup()                     .Caption("Personal Information")                     .Items(groupItems => {                         groupItems.AddSimple().DataField("Prefix");                         groupItems.AddSimple().DataField("Full_Name");                         groupItems.AddSimple().DataField("Position");                         groupItems.AddSimple().DataField("Duties")                             .Editor(e => due east.TextArea());                     });                 i.AddGroup()                     .Caption("Contacts")                     .Items(groupItems => {                         groupItems.AddSimple().DataField("Email");                         groupItems.AddSimple().DataField("Skype");                     });             })         )     )     .Columns(cols => {         cols.Add().DataField("Full_Name");         cols.Add().DataField("Prefix");         cols.Add().DataField("Position");         cols.Add().DataField("Duties");         cols.Add().DataField("Email");         cols.Add().DataField("Skype");     }) )
Meet As well
  • Organize Simple Items

You lot can use a cavalcade's formItem object to customize an individual simple item. Come across an example in its description.

If yous need to validate course values, specify validation rules equally described in the Information Validation commodity.

View Demo

Popup Mode

The popup fashion is the class mode with the course placed in a popup window.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Popup Mode

Use the editing.popup object to customize the popup window. This object can comprise the Popup UI component's fields. However, you should refer to the popup object'due south description for information on restrictions that use.

jQuery

JavaScript

$(function() {     $("#dataGridContainer").dxDataGrid({         // ...         editing: {             allowUpdating: truthful,             mode: "popup",             form: {                 labelLocation: "top"             },             popup: {                 showTitle: true,                 title: "Row in the editing country"             }         }     }); });
Angular

HTML

TypeScript

<dx-data-grid ... >     <dxo-editing         [allowUpdating]="true"         mode="popup">         <dxo-form labelLocation="top"></dxo-form>         <dxo-popup [showTitle]="true" title="Row in the editing land"></dxo-popup>     </dxo-editing> </dx-information-grid>
import { DxDataGridModule } from "devextreme-angular"; // ... export form AppComponent {     // ... } @NgModule({     imports: [         // ...         DxDataGridModule     ],     // ... })
Vue

App.vue

<template>     <DxDataGrid ... >         <DxEditing             :allow-updating="true"             mode="popup">             <DxForm                 label-location="top"             />             <DxPopup                 :bear witness-title="truthful"                 championship="Row in the editing state"             />         </DxEditing>     </DxDataGrid> </template>  <script> import 'devextreme/dist/css/dx.light.css';  import DxDataGrid, {     DxEditing,     DxForm,     DxPopup } from 'devextreme-vue/data-grid';  export default {     components: {         DxDataGrid,         DxEditing,         DxForm,         DxPopup     } } </script>
React

App.js

import React from 'react';  import 'devextreme/dist/css/dx.light.css';  import DataGrid, {     Editing,     Form,     Popup } from 'devextreme-react/data-filigree';  class App extends React.Component {     render() {         return (             <DataGrid ... >                 <Editing                     allowUpdating={true}                     mode="popup">                     <Class                         labelLocation="top"                     />                     <Popup                         showTitle={true}                         title="Row in the editing state"                     />                 </Editing>             </DataGrid>         );     } } consign default App;

Since the popup and grade modes are very similar, you can use the aforementioned columns.formItem and editing.form backdrop to customize items and layout in both modes. Come across the Form Way topic for more details on course customization.

View Demo

See Also
  • Data Validation

API

Add together

Use the addRow() method to add together an empty row.

jQuery

JavaScript

$("#dataGridContainer").dxDataGrid("addRow");
Angular

TypeScript

import { ..., ViewChild } from "@angular/core"; import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular"; // ... consign class AppComponent {     @ViewChild(DxDataGridComponent, { static: imitation }) dataGrid: DxDataGridComponent;     // Prior to Athwart 8     // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;     addRow () {        this.dataGrid.instance.addRow();     } } @NgModule({     imports: [         // ...         DxDataGridModule     ],     // ... })
Vue

App.vue

<template>     <DxDataGrid ...         ref="myDataGrid">     </DxDataGrid> </template>  <script> import 'devextreme/dist/css/dx.light.css';  import DxDataGrid from 'devextreme-vue/data-grid';  export default {     components: {         DxDataGrid     },     methods: {         addNewRow() {             this.$refs['myDataGrid'].instance.addRow();         }     } } </script>
React

App.js

import React from 'react';  import 'devextreme/dist/css/dx.low-cal.css';  import DataGrid from 'devextreme-react/data-grid';  grade App extends React.Component {     constructor(props) {         super(props);         this.dataGridRef = React.createRef();         this.addNewRow = this.addNewRow.bind(this);     }      addNewRow() {         this.dataGridRef.current.instance.addRow();     }      return() {         return (             <DataGrid ...                 ref={this.dataGridRef}>             </DataGrid>         );     } } export default App;

You can specify initial values for a newly added row in the onInitNewRow issue handler.

jQuery

JavaScript

$(function() {     $("#dataGridContainer").dxDataGrid({         // ...         columns: [{             dataField: "Hire_Date",             dataType: "date"         },             // ...         ],         onInitNewRow: function(e) {             e.information.Hire_Date = new Date();         }     }); });
Athwart

HTML

TypeScript

<dx-data-grid ...     (onInitNewRow)="onInitNewRow($event)">     <dxi-column dataField="Hire_Date" dataType="date"></dxi-column> </dx-information-filigree>
import { DxDataGridModule } from "devextreme-angular"; // ... export course AppComponent {     onInitNewRow (east) {         east.data.Hire_Date = new Engagement();     } } @NgModule({     imports: [         // ...         DxDataGridModule     ],     // ... })
Vue

App.vue

<template>     <DxDataGrid ...         @init-new-row="setHireDate">         <DxColumn data-field="Hire_Date" data-blazon="date" />     </DxDataGrid> </template>  <script> import 'devextreme/dist/css/dx.light.css';  import DxDataGrid, {     DxColumn } from 'devextreme-vue/information-grid';  consign default {     components: {         DxDataGrid,         DxColumn     },     methods: {         setHireDate(e) {             e.information.Hire_Date = new Date();         }     } } </script>
React

App.js

import React from 'react';  import 'devextreme/dist/css/dx.lite.css';  import DataGrid, {     Column } from 'devextreme-react/information-filigree';  class App extends React.Component {     setHireDate(e) {         due east.information.Hire_Date = new Date();     }      render() {         return (             <DataGrid ...                 onInitNewRow={this.setHireDate}>                 <Column dataField="Hire_Date" dataType="appointment" />             </DataGrid>         );     } } export default App;
See Also
  • Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

Update

The cellValue(rowIndex, visibleColumnIndex, value) method updates a cell's value. This cell can be located using its row and column indexes. If the cell'southward data field is known, yous can pass information technology instead of the column index. After a value is updated, salve information technology to the data source by calling the saveEditData() method.

jQuery

JavaScript

$(function() {     $("#dataGridContainer").dxDataGrid({ ... });      $("#updateCellButton").dxButton({         text: "Update Cell",         onClick: office() {             $("#dataGridContainer").dxDataGrid("cellValue", 1, "Position", "CTO");             $("#dataGridContainer").dxDataGrid("saveEditData");         }     }); });
Athwart

TypeScript

HTML

import { DxDataGridModule, DxButtonModule } from "devextreme-angular"; // ... consign class AppComponent {     @ViewChild(DxDataGridComponent, { static: simulated }) dataGrid: DxDataGridComponent;     // Prior to Angular 8     // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;     updateCell () {         this.dataGrid.instance.cellValue(one, "Position", "CTO");         this.dataGrid.instance.saveEditData();     } } @NgModule({     imports: [         // ...         DxDataGridModule,         DxButtonModule     ],     // ... })
<dx-data-grid ... ></dx-information-grid> <dx-push button     text="Update Cell"     (onClick)="updateCell()"> </dx-button>
Vue

App.vue

<template>     <div>         <DxDataGrid ...             :ref="dataGridRefKey">         </DxDataGrid>         <DxButton             text="Update Cell"             @click="updateCell"         />     </div> </template>  <script> import 'devextreme/dist/css/dx.low-cal.css';  import DxDataGrid from 'devextreme-vue/data-grid'; import DxButton from 'devextreme-vue/button';  const dataGridRefKey = 'myDataGrid';  consign default {     components: {         DxDataGrid,         DxButton     },     information: function() {         render {             dataGridRefKey         }     },     methods: {         updateCell() {             this.dataGrid.cellValue(i, "Position", "CTO");             this.dataGrid.saveEditData();         }     },     computed: {         dataGrid: function() {             return this.$refs[dataGridRefKey].example;         }     } } </script>
React

App.js

import React from 'react';  import 'devextreme/dist/css/dx.light.css';  import DataGrid from 'devextreme-react/data-grid'; import Push button from 'devextreme-react/push button';  class App extends React.Component {     constructor(props) {         super(props);         this.dataGridRef = React.createRef();         this.updateCell = this.updateCell.demark(this);     }      get dataGrid() {         render this.dataGridRef.current.instance;     }      updateCell() {         this.dataGrid.cellValue(1, "Position", "CTO");         this.dataGrid.saveEditData();     }      render() {         return (             <React.Fragment>                 <DataGrid ...                     ref={this.dataGridRef}>                 </DataGrid>                 <Button                     text="Update Cell"                     onClick={this.updateCell}                 />             </React.Fragment>         );     } } export default App;

To process an updated cell value earlier saving it to the information source, implement the columns.setCellValue function. Refer to the function'south description for an instance.

You can check if there are whatsoever unsaved changes past calling the hasEditData() method. Use the saveEditData() or cancelEditData() method to save or cancel them, respectively.

jQuery

JavaScript

$(role() {     $("#dataGridContainer").dxDataGrid({ ... });      $("#saveChangesButton").dxButton({         text: "Save changes",         onClick: function() {             var dataGrid = $("#dataGridContainer").dxDataGrid("case");             if(dataGrid.hasEditData()) {                 dataGrid.saveEditData().and then(() => {                     if(!dataGrid.hasEditData()) {                         // Saved successfully                     } else {                         // Saving failed                     }                 });             }         }     }); });
Angular

TypeScript

HTML

import { DxDataGridModule, DxButtonModule } from "devextreme-angular"; // ... export class AppComponent {     @ViewChild(DxDataGridComponent, { static: faux }) dataGrid: DxDataGridComponent;     // Prior to Athwart 8     // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;     saveEditData() {         if(this.dataGrid.instance.hasEditData()) {             this.dataGrid.instance.saveEditData().and so(() => {                 if(!this.dataGrid.instance.hasEditData()) {                     // Saved successfully                 } else {                     // Saving failed                 }             });         }     } } @NgModule({     imports: [         // ...         DxDataGridModule,         DxButtonModule     ],     // ... })
<dx-data-grid ... ></dx-data-grid> <dx-button     text="Save changes"     (onClick)="saveEditData()"> </dx-button>
Vue

App.vue

<template>     <div>         <DxDataGrid ...             :ref="dataGridRefKey">         </DxDataGrid>         <DxButton             text="Save changes"             @click="saveChanges"         />     </div> </template>  <script> import 'devextreme/dist/css/dx.calorie-free.css';  import DxDataGrid from 'devextreme-vue/data-grid'; import DxButton from 'devextreme-vue/button';  const dataGridRefKey = 'myDataGrid';  export default {     components: {         DxDataGrid,         DxButton     },     data: function() {         return {             dataGridRefKey         }     },     methods: {         saveChanges() {             if(this.dataGrid.hasEditData()) {                 this.dataGrid.saveEditData().then(() => {                     if(!this.dataGrid.hasEditData()) {                         // Saved successfully                     } else {                         // Saving failed                     }                 });             }         }     },     computed: {         dataGrid: function() {             render this.$refs[dataGridRefKey].instance;         }     } } </script>
React

App.js

import React from 'react';  import 'devextreme/dist/css/dx.light.css';  import DataGrid from 'devextreme-react/data-filigree'; import Button from 'devextreme-react/push button';  grade App extends React.Component {     constructor(props) {         super(props);         this.dataGridRef = React.createRef();         this.saveChanges = this.saveChanges.demark(this);     }      get dataGrid() {         return this.dataGridRef.electric current.instance;     }      saveChanges() {         if(this.dataGrid.hasEditData()) {             this.dataGrid.saveEditData().then(() => {                 if(!this.dataGrid.hasEditData()) {                     // Saved successfully                 } else {                     // Saving failed                 }             });         }     }      render() {         render (             <React.Fragment>                 <DataGrid ...                     ref={this.dataGridRef}>                 </DataGrid>                 <Button                     text="Save changes"                     onClick={this.saveChanges}                 />             </React.Fragment>         );     } } export default App;
See Also
  • Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

Delete

Call the deleteRow(rowIndex) method to delete a specific row from the data source. This method invokes a confirmation dialog that allows a user to cancel deletion. The confirmDelete belongings allows you to hibernate this dialog instantly deleting the selected row from the data source.

jQuery

JavaScript

$(function() {     var dataGrid = $("#dataGridContainer").dxDataGrid({         // ...         editing: {             mode: "row",              allowDeleting: true,             confirmDelete: faux         }     }).dxDataGrid("instance");      $("#deleteRowButton").dxButton({         text: "Delete Row",         onClick: function() {             // Deletes the second row             dataGrid.deleteRow(1);         }     }); });
Athwart

HTML

TypeScript

<dx-information-grid>     <dxo-editing         style="row"         [allowDeleting]="true"         [confirmDelete]="false">     </dxo-editing> </dx-data-grid> <dx-button     text="Delete Row"     (onClick)="deleteRow()"> </dx-button>
import { DxDataGridModule, DxButtonModule } from "devextreme-athwart"; // ... export class AppComponent {     @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;     // Prior to Angular eight     // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;     deleteRow () {         // Deletes the second row         this.dataGrid.example.deleteRow(1);     } } @NgModule({     imports: [         // ...         DxDataGridModule,         DxButtonModule     ],     // ... })
Vue

App.vue

<template>     <DxDataGrid         ref="dataGrid">         <DxEditing             mode="row"             :allow-deleting="true"             :confirm-delete="faux"         />     </DxDataGrid>     <DxButton         text="Delete Row"         @click="deleteRow"     /> </template>  <script> import { DxDataGrid, DxEditing } from 'devextreme-vue/data-grid';  import DxButton from 'devextreme-vue/push button';  export default {     components: {         DxDataGrid,          DxEditing,         DxButton     },     methods: {         deleteRow() {             this.$refs.dataGrid.instance.deleteRow(1);         }     },     data() {} } </script>
React

App.js

import React from 'react';  import { DataGrid, Editing } from 'devextreme-react/data-filigree'; import Button from 'devextreme-react/push button';  class App extends React.Component {     constructor(props) {         super(props);          this.dataGridRef = React.createRef();         this.deleteRow = this.deleteRow.bind(this);     }     get dataGrid() {         return this.dataGridRef.current.instance;     }      deleteRow() {         this.dataGrid.deleteRow(1);     }      render() {         return (             <DataGrid                   ref={this.dataGridRef}>                 <Editing                     mode="row"                     confirmDelete={faux}                     allowDeleting={truthful}                  />             </DataGrid>             <Button                 text="Delete Row"                 onClick={this.deleteRow}             />         );     } } export default App;

Note that in batch fashion a row is only marked as deleted. To save changes, phone call the saveEditData() method. Calling the undeleteRow(rowIndex) method cancels row deletion.

jQuery

JavaScript

$("#dataGridContainer").dxDataGrid("undeleteRow", 1);
Athwart

TypeScript

import { DxDataGridModule } from "devextreme-athwart"; // ... export class AppComponent {     @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;     // Prior to Angular 8     // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;     undeleteRow () {         this.dataGrid.example.undeleteRow(i);     } } @NgModule({     imports: [         // ...         DxDataGridModule     ],     // ... })
Vue

App.vue

<template>     <DxDataGrid         ref="dataGrid">     </DxDataGrid> </template>  <script> import { DxDataGrid } from 'devextreme-vue/information-filigree';  export default {     components: {         DxDataGrid     },     methods: {         undeleteRow() {             this.$refs.dataGrid.instance.undeleteRow(1);         }     },     data() {} } </script>
React

App.js

import React from 'react';  import { DataGrid } from 'devextreme-react/information-grid';  form App extends React.Component {     constructor(props) {         super(props);          this.dataGridRef = React.createRef();         this.undeleteRow = this.undeleteRow.bind(this);     }     get dataGrid() {         return this.dataGridRef.current.instance;     }      undeleteRow() {         this.dataGrid.undeleteRow(1);     }      render() {         return (             <DataGrid                   ref={this.dataGridRef}             />         );     } } export default App;                
See Also
  • Telephone call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

Get Electric current Cell Values

To get electric current jail cell values, call the cellValue(rowIndex, dataField) method. If a cell is being edited, this method returns the unsaved jail cell value.

The cellValue(rowIndex, dataField) method requires a row alphabetize. Use the getRowIndexByKey(key) method to use a cardinal to go the row index. Obtaining the key to use depends on your particular scenario. If y'all desire to get the central of the row existence edited, y'all can use the parameter passed to the onEditingStart event handler:

jQuery

alphabetize.js

$(function() {     var editRowKey;     var dataGridInstance = $("#dataGridContainer").dxDataGrid({         // ...         onEditingStart: office(east) {             editRowKey = e.key;         }     }).dxDataGrid("instance");     // ...     var editRowIndex = dataGridInstance.getRowIndexByKey(editRowKey);     var cellValue = dataGridInstance.cellValue(editRowIndex, "EmployeeName"); });
Athwart

app.component.html

app.component.ts

app.module.ts

<dx-data-grid ...     (onEditingStart)="onEditingStart($event)"> </dx-data-grid>
import { Component, ViewChild } from "@angular/core"; import { DxDataGridComponent } from "devextreme-athwart";  @Component({     selector: 'app-root',     templateUrl: './app.component.html',     styleUrls: ['./app.component.css'] }) export grade AppComponent {     @ViewChild(DxDataGridComponent, { static: false }, { static: fake }) dataGrid: DxDataGridComponent     // Prior to Angular viii     // @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent      editRowKey: number;      onEditingStart(e) {         this.editRowKey = eastward.primal;         // ...     }      getCellValue() {         const editRowIndex = this.dataGrid.instance.getRowIndexByKey(this.editRowKey);         if(editRowIndex >= 0) {             render this.dataGrid.instance.cellValue(editRowIndex, "EmployeeName");         }         render null;     } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component';  import { DxDataGridModule } from 'devextreme-angular';  @NgModule({     declarations: [         AppComponent     ],     imports: [         BrowserModule,         DxDataGridModule     ],     bootstrap: [AppComponent] }) export class AppModule { }
Vue

App.vue

<template>     <DxDataGrid ...         :ref="dataGridRefKey"         @editing-outset="onEditingStart">     </DxDataGrid> </template>  <script> import 'devextreme/dist/css/dx.light.css';  import DxDataGrid from 'devextreme-vue/information-grid';  const dataGridRefKey = 'myDataGrid';  consign default {     components: {         DxDataGrid     },     data: part() {         render {             dataGridRefKey,             editRowKey         }     },     methods: {         onEditingStart(e) {             this.editRowKey = e.cardinal;             // ...         },         getCellValue() {             const editRowIndex = this.dataGrid.getRowIndexByKey(this.editRowKey);             if(editRowIndex >= 0) {                 render this.dataGrid.cellValue(editRowIndex, "EmployeeName");             }             return aught;         }     },     computed: {         dataGrid: role() {             return this.$refs[dataGridRefKey].example;         }     } } </script>
React

App.js

import React from 'react';  import 'devextreme/dist/css/dx.light.css';  import DataGrid from 'devextreme-react/data-grid';  course App extends React.Component {     constructor(props) {         super(props);         this.dataGridRef = React.createRef();         this.getCellValue = this.getCellValue.bind(this);         this.onEditingStart = this.onEditingStart.bind(this);     }      get dataGrid() {         return this.dataGridRef.electric current.example;     }      getCellValue() {         const editRowIndex = this.dataGrid.getRowIndexByKey(this.state.editRowKey);         if(editRowIndex >= 0) {             return this.dataGrid.cellValue(editRowIndex, "EmployeeName");         }         return null;     }      onEditingStart(due east) {         this.setState({             editRowKey: e.key         });         // ...     }      render() {         render (             <DataGrid ...                 ref={this.dataGridRef}                 onEditingStart={this.onEditingStart}>             </DataGrid>         );     } } export default App;

To access a cell value after the user has edited it, but before it is saved to the data source, use the setCellValue office as an alternative. In addition to edited cell values, it allows y'all to get the jail cell values before user edits. setCellValue is ready individually for each column.

jQuery

index.js

$(office() {     $("#dataGridContainer").dxDataGrid({         // ...         columns: [             // ...             {                 dataField: "EmployeeName",                 setCellValue: function(newData, value, currentRowData) {                     // currentRowData contains the row information before the edit                     // value contains the edited value                 }             }         ]     }); });
Angular

app.component.html

app.component.ts

app.module.ts

<dx-data-grid ... >     <dxi-column         dataField="EmployeeName"         [setCellValue]="setCellValue">     </dxi-column> </dx-information-grid>
import { Component } from "@angular/core"; import { DxDataGridComponent } from "devextreme-angular";  @Component({     selector: 'app-root',     templateUrl: './app.component.html',     styleUrls: ['./app.component.css'] }) export class AppComponent {     setCellValue (newData, value, currentRowData) {         // currentRowData contains the row information earlier the edit         // value contains the edited value     } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component';  import { DxDataGridModule } from 'devextreme-athwart';  @NgModule({     declarations: [         AppComponent     ],     imports: [         BrowserModule,         DxDataGridModule     ],     bootstrap: [AppComponent] }) export class AppModule { }
Vue

App.vue

<template>     <DxDataGrid ... >         <DxColumn             data-field="EmployeeName"             :set-cell-value="setCellValue"         />     </DxDataGrid> </template>  <script> import 'devextreme/dist/css/dx.calorie-free.css';  import DxDataGrid, {     DxColumn } from 'devextreme-vue/data-grid';  export default {     components: {         DxDataGrid,         DxColumn     },     methods: {         setCellValue(newData, value, currentRowData) {             // currentRowData contains the row data before the edit             // value contains the edited value         }     } } </script>
React

App.js

import React from 'react';  import 'devextreme/dist/css/dx.light.css';  import DataGrid, {     Column } from 'devextreme-react/data-grid';  class App extends React.Component {     setCellValue(newData, value, currentRowData) {         // currentRowData contains the row data before the edit         // value contains the edited value     }      render() {         return (             <DataGrid ... >                 <Column                     dataField="Full_Name"                     setCellValue={this.setCellValue}                 />             </DataGrid>         );     } } export default App;
Encounter Also
  • Phone call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout

Events

The DataGrid UI component raises events before and after a row is inserted, updated or removed from the data source. If the upshot handlers are going to remain unchanged during the UI component's lifetime, assign them to corresponding onEventName properties:

  • onRowInserting
  • onRowInserted
  • onRowUpdating
  • onRowUpdated
  • onRowRemoving
  • onRowRemoved
jQuery

JavaScript

$(function(){     $("#dataGridContainer").dxDataGrid({         // ...         onRowInserting: function(east) {             // Handler of the "rowInserting" event         }     }); });
Angular

HTML

TypeScript

<dx-information-grid ...     (onRowInserting)="onRowInserting($event)"> </dx-data-grid>
import { DxDataGridModule } from "devextreme-angular"; // ... export grade AppComponent {     onRowInserting (e) {         // Handler of the "rowInserting" event     } } @NgModule({     imports: [         // ...         DxDataGridModule     ],     // ... })
Vue

App.vue

<template>     <DxDataGrid ...         @row-inserting="onRowInserting">     </DxDataGrid> </template>  <script> import 'devextreme/dist/css/dx.light.css';  import DxDataGrid from 'devextreme-vue/data-grid';  export default {     components: {         DxDataGrid     },     methods: {         onRowInserting(e) {             // Handler of the "rowInserting" event         }     } } </script>
React

App.js

import React from 'react';  import 'devextreme/dist/css/dx.light.css';  import DataGrid from 'devextreme-react/information-grid';  class App extends React.Component {     onRowInserting(e) {         // Handler of the "rowInserting" upshot     }      render() {         render (             <DataGrid ...                 onRowInserting={this.onRowInserting}>             </DataGrid>         );     } } export default App;

If you are going to change the consequence handlers at runtime, or if y'all need to attach several handlers to a single event, subscribe to this event using the on(eventName, eventHandler) method. This approach is more typical of jQuery.

JavaScript

var rowUpdatingEventHandler1 = function(e) {     // First handler of the "rowUpdating" event };  var rowUpdatingEventHandler2 = role(e) {     // Second handler of the "rowUpdating" event };  $("#dataGridContainer").dxDataGrid("instance")     .on("rowUpdating", rowUpdatingEventHandler1)     .on("rowUpdating", rowUpdatingEventHandler2);

In add-on, the DataGrid raises the initNewRow event when a new row is added and the editingStart event when a row enters the editing state. These events can exist handled but like others - using the onEventName property or the on(eventName, eventHandler) method. In the following case, the onInitNewRow event handler specifies initial values for an added row:

jQuery

JavaScript

$(function () {     $("#dataGridContainer").dxDataGrid({         // ...         onInitNewRow: part(due east) { // Handler of the "initNewRow" event             // Sets an initial value for the "Hire_Date" field             e.information.Hire_Date = new Engagement();         }     }); });
Angular

HTML

TypeScript

<dx-data-grid ...     (onInitNewRow)="onInitNewRow($event)"> </dx-data-grid>
import { DxDataGridModule } from "devextreme-angular"; // ... consign class AppComponent {     onInitNewRow (e) { // Handler of the "initNewRow" event         // Sets an initial value for the "Hire_Date" field         eastward.data.Hire_Date = new Date();     } } @NgModule({     imports: [         // ...         DxDataGridModule     ],     // ... })
Vue

App.vue

<template>     <DxDataGrid ...         @init-new-row="onInitNewRow">     </DxDataGrid> </template>  <script> import 'devextreme/dist/css/dx.calorie-free.css';  import DxDataGrid from 'devextreme-vue/data-filigree';  export default {     components: {         DxDataGrid     },     methods: {         onInitNewRow(e) { // Handler of the "initNewRow" event             // Sets an initial value for the "Hire_Date" field             e.data.Hire_Date = new Engagement();         }     } } </script>
React

App.js

import React from 'react';  import 'devextreme/dist/css/dx.light.css';  import DataGrid from 'devextreme-react/data-grid';  class App extends React.Component {     onInitNewRow(e) { // Handler of the "initNewRow" outcome         // Sets an initial value for the "Hire_Date" field         eastward.data.Hire_Date = new Date();     }      render() {         return (             <DataGrid ...                 onInitNewRow={this.onInitNewRow}>             </DataGrid>         );     } } export default App;
See Also
  • Handle Events: Athwart | Vue | React | jQuery | AngularJS | Knockout

Customize Editors

The columns's dataType defines a cell'due south editor that can be configured using the editorOptions object. Notwithstanding, this object cannot be used to change the editor'southward type or onValueChanged event handler. Instead, apply the onEditorPreparing function as shown in the post-obit code. The function'due south parameter provides the editorName and editorOptions fields for changing the used editor and its configuration.

jQuery

JavaScript

$(function() {     $("#dataGridContainer").dxDataGrid({         // ...         columns: [{             dataField: "Notation",             editorOptions: {                 height: 200             }         }, // ...         ],         onEditorPreparing: office(e) {             if (e.dataField == "Notation" && due east.parentType === "dataRow") {                 const defaultValueChangeHandler = e.editorOptions.onValueChanged;                 east.editorName = "dxTextArea"; // Modify the editor'south type                 e.editorOptions.onValueChanged = office (args) {  // Override the default handler                     // ...                     // Custom commands go here                     // ...                     // If you want to alter the editor value, phone call the setValue role:                     // eastward.setValue(newValue);                     // Otherwise, call the default handler:                     defaultValueChangeHandler(args);                 }             }         }     }); });
Angular

HTML

TypeScript

<dx-data-filigree ...     (onEditorPreparing)="onEditorPreparing($outcome)">     <dxi-column         dataField="Note"         [editorOptions]="{ height: 200 }">     </dxi-column> </dx-data-grid>
import { DxDataGridModule, DxTextAreaModule } from "devextreme-angular"; // ... export form AppComponent {     onEditorPreparing (e) {         if (eastward.dataField == "Note" && e.parentType === "dataRow") {             const defaultValueChangeHandler = e.editorOptions.onValueChanged;             e.editorName = "dxTextArea"; // Change the editor'southward type             e.editorOptions.onValueChanged = office (args) {  // Override the default handler                 // ...                 // Custom commands become here                 // ...                 // If yous want to modify the editor value, call the setValue part:                 // e.setValue(newValue);                 // Otherwise, call the default handler:                 defaultValueChangeHandler(args);             }         }     } } @NgModule({     imports: [         // ...         DxDataGridModule,         DxTextAreaModule     ],     // ... })
Vue

App.vue

<template>     <DxDataGrid ...         @editor-preparing="onEditorPreparing">         <DxColumn             data-field="Note"             :editor-options="textAreaOptions"         />     </DxDataGrid> </template>  <script> import 'devextreme/dist/css/dx.light.css';  import DxDataGrid, {     DxColumn } from 'devextreme-vue/data-grid'; import 'devextreme-vue/text-area';  export default {     components: {         DxDataGrid,         DxColumn     },     data() {         return {             textAreaOptions: { peak: 200 }         }     },     methods: {         onEditorPreparing(e) {             if(eastward.dataField == "Note" && due east.parentType === "dataRow") {                 const defaultValueChangeHandler = due east.editorOptions.onValueChanged;                 due east.editorName = "dxTextArea"; // Change the editor's type                 e.editorOptions.onValueChanged = part (args) {  // Override the default handler                     // ...                     // Custom commands become here                     // ...                     // If yous desire to modify the editor value, phone call the setValue function:                     // e.setValue(newValue);                     // Otherwise, phone call the default handler:                     defaultValueChangeHandler(args);                 }             }         }     } } </script>
React

App.js

import React from 'react';  import 'devextreme/dist/css/dx.light.css';  import DataGrid, {     Column } from 'devextreme-react/information-grid'; import 'devextreme-react/text-area';  form App extends React.Component {     textAreaOptions = { summit: 200 };     onEditorPreparing(e) {         if(east.dataField == "Note" && e.parentType === "dataRow") {             const defaultValueChangeHandler = e.editorOptions.onValueChanged;             eastward.editorName = "dxTextArea"; // Modify the editor'due south type             e.editorOptions.onValueChanged = function (args) {  // Override the default handler                 // ...                 // Custom commands go here                 // ...                 // If you want to change the editor value, call the setValue function:                 // east.setValue(newValue);                 // Otherwise, call the default handler:                 defaultValueChangeHandler(args);             }         }     }      render() {         return (             <DataGrid ...                 onEditorPreparing={this.onEditorPreparing}>                 <Cavalcade                     dataField="Note"                     editorOptions={this.textAreaOptions}                 />             </DataGrid>         );     } } export default App;
ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().DataGrid()     // ...     .Columns(cols => {         // ...         cols.Add().DataField("Annotation")             .EditorOptions(new { peak = 200 });     })     .OnEditorPreparing("dataGrid_editorPreparing") )  <script type="text/javascript">     role dataGrid_editorPreparing(e) {         if (e.dataField == "Annotation" && e.parentType === "dataRow") {             const defaultValueChangeHandler = e.editorOptions.onValueChanged;             e.editorName = "dxTextArea"; // Modify the editor'south type             e.editorOptions.onValueChanged = role (args) {  // Override the default handler                 // ...                 // Custom commands become here                 // ...                 // If you desire to alter the editor value, call the setValue office:                 // east.setValue(newValue);                 // Otherwise, telephone call the default handler:                 defaultValueChangeHandler(args);             }         }     } </script>

Implement the column's editCellTemplate for more all-encompassing customization. In this template, yous should specify your custom component's appearance and behavior in full. The following lawmaking uses the template to substitute the Switch UI component for a default editor. This configuration may be useful in batch editing mode.

jQuery

JavaScript

$(part() {     $("#dataGridContainer").dxDataGrid({         // ...         columns: [{             dataField: "isChecked",             editCellTemplate: function(cellElement, cellInfo) {                 $("<div />").dxSwitch({                     width: 50,                     switchedOnText: "Yep",                     switchedOffText: "NO",                     value: cellInfo.value,                     onValueChanged: function(eastward) {                         cellInfo.setValue(e.value);                     }                 }).appendTo(cellElement);             }         }],         editing: {             manner: "batch",             allowUpdating: truthful         }     }); });
Angular

HTML

TypeScript

<dx-data-grid ... >     <dxi-column         dataField="isChecked"         editCellTemplate="editCellTemplate">     </dxi-column>     <div *dxTemplate="let cellInfo of 'editCellTemplate'">         <dx-switch             [width]="50"             switchedOnText="YES"             switchedOffText="NO"             [(value)]="cellInfo.value"             (onValueChanged)="setEditedValue($issue, cellInfo)">         </dx-switch>     </div>     <dxo-editing manner="batch" [allowUpdating]="true"></dxo-editing> </dx-information-filigree>
import { DxDataGridModule, DxSwitchModule } from "devextreme-athwart"; // ... export class AppComponent {     setEditedValue (valueChangedEventArg, cellInfo) {         cellInfo.setValue(valueChangedEventArg.value);     } } @NgModule({     imports: [         // ...         DxDataGridModule,         DxSwitchModule     ],     // ... })
Vue

App.vue

<template>     <DxDataGrid ... >         <DxColumn             data-field="isChecked"             edit-cell-template="switch"         />         <template #switch="{ data }">             <DxSwitch                 :width="50"                 switched-on-text="YES"                 switched-off-text="NO"                 :value="data.value"                 @value-changed="setEditedValue($event, data)"             />         </template>         <DxEditing             fashion="batch"             :allow-updating="true"         />     </DxDataGrid> </template>  <script> import 'devextreme/dist/css/dx.light.css';  import DxDataGrid, {     DxColumn,     DxEditing } from 'devextreme-vue/data-grid';  import DxSwitch from 'devextreme-vue/switch';  export default {     components: {         DxDataGrid,         DxColumn,         DxEditing,         DxSwitch     },     methods: {         setEditedValue(valueChangedEventArg, cellInfo) {             cellInfo.setValue(valueChangedEventArg.value);         }     } } </script>
React

App.js

import React from 'react';  import 'devextreme/dist/css/dx.calorie-free.css';  import DataGrid, {     Column,     Editing } from 'devextreme-react/data-grid';  import Switch from 'devextreme-react/switch';  class App extends React.Component {     renderSwitch(cellInfo) {         const setEditedValue = valueChangedEventArg => {             cellInfo.setValue(valueChangedEventArg.value);         }         return (             <Switch                 width={fifty}                 switchedOnText="YES"                 switchedOffText="NO"                 defaultValue={cellInfo.value}                 onValueChanged={setEditedValue}             />         )     }      render() {         return (             <DataGrid ... >                 <Column                     dataField="isChecked"                     editCellRender={this.renderSwitch}                 />                 <Editing                     fashion="batch"                     allowUpdating={true}                 />             </DataGrid>         );     } } consign default App;
ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().DataGrid()     // ...     .Columns(cols => {         // ...         cols.Add().DataField("isChecked")             .EditCellTemplate(new TemplateName("edit-cells"));     })     .Editing(k => grand.Mode(GridEditMode.Batch).AllowUpdating(truthful)) )  @using (Html.DevExtreme().NamedTemplate("edit-cells")) {     @(Html.DevExtreme().Switch()         .Width(50)         .SwitchedOnText("YES")         .SwitchedOffText("NO")         .Value(new JS("value"))         .OnValueChanged("function(e) { setValue(eastward.value) }")     ) }

Editors are displayed in cells in the normal country too if you set the columns.showEditorAlways holding to true.

jQuery

JavaScript

$(function() {     $("#dataGridContainer").dxDataGrid({         // ...         columns: [{             dataField: "Hidden",             dataType: "boolean",             showEditorAlways: true         }]     }); });
Angular

HTML

TypeScript

<dx-data-grid ... >     <dxi-column         dataField="Hidden"         dataType="boolean"         [showEditorAlways]="true">     </dxi-column> </dx-data-grid>
import { DxDataGridModule } from "devextreme-angular"; // ... export class AppComponent {     // ... } @NgModule({     imports: [         // ...         DxDataGridModule     ],     // ... })
Vue

App.vue

<template>     <DxDataGrid ... >         <DxColumn             data-field="Hidden"             data-type="boolean"             :evidence-editor-ever="true"         />     </DxDataGrid> </template>  <script> import 'devextreme/dist/css/dx.lite.css';  import DxDataGrid, {     DxColumn } from 'devextreme-vue/information-grid';  export default {     components: {         DxDataGrid,         DxColumn     } } </script>
React

App.js

import React from 'react';  import 'devextreme/dist/css/dx.light.css';  import DataGrid, {     Cavalcade } from 'devextreme-react/information-grid';  grade App extends React.Component {     render() {         return (             <DataGrid ... >                 <Column                     dataField="Hidden"                     dataType="boolean"                     showEditorAlways={true}                 />             </DataGrid>         );     } } export default App;
ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().DataGrid()     // ...     .Columns(cols => {         // ...         cols.Add().DataField("Hidden")             .DataType(GridColumnDataType.Boolean)             .ShowEditorAlways(true);     }) )
Run into Also
  • Columns - Customize Cells
  • Create a Cavalcade with Custom Buttons

Information Validation

User input is validated against a set of validation rules. Yous can configure them in a column's validationRules array. Validation rules are attached to the editors and do not depend on the current edit style.

jQuery

JavaScript

$(function() {     $("#dataGridContainer").dxDataGrid({         // ...         columns: [{             dataField: "Full_Name",             validationRules: [{ type: "required" }]         }, {             dataField: "Login",             validationRules: [{                  type: "stringLength",                  min: 3,                  message: "Login should be at least iii symbols long"              }]         },         // ...         ]     }); });
Angular

HTML

TypeScript

<dx-information-grid ... >     <dxi-cavalcade dataField="Full_Name">         <dxi-validation-rule type="required"></dxi-validation-dominion>     </dxi-column>     <dxi-column dataField="Login">         <dxi-validation-rule             type="stringLength"             [min]="3"             message="Login should be at to the lowest degree 3 symbols long" >         </dxi-validation-rule>     </dxi-column> </dx-data-grid>
import { DxDataGridModule } from "devextreme-angular"; // ... export class AppComponent {     // ... } @NgModule({     imports: [         // ...         DxDataGridModule     ],     // ... })
Vue

App.vue

<template>     <DxDataGrid ... >         <DxColumn data-field="Full_Name">             <DxRequiredRule />         </DxColumn>         <DxColumn data-field="Login">             <DxStringLengthRule                 :min="3"                 message="Login should be at least 3 symbols long"             />         </DxColumn>     </DxDataGrid> </template>  <script> import 'devextreme/dist/css/dx.light.css';  import DxDataGrid, {     DxColumn,     DxRequiredRule,     DxStringLengthRule } from 'devextreme-vue/information-grid';  export default {     components: {         DxDataGrid,         DxColumn,         DxRequiredRule,         DxStringLengthRule     } } </script>
React

App.js

import React from 'react';  import 'devextreme/dist/css/dx.lite.css';  import DataGrid, {     Column,     RequiredRule,     StringLengthRule } from 'devextreme-react/information-filigree';  class App extends React.Component {     render() {         render (             <DataGrid ... >                 <Column dataField="Full_Name">                     <RequiredRule />                 </Column>                 <Column dataField="Login">                     <StringLengthRule                         min={3}                         bulletin="Login should be at least 3 symbols long"                     />                 </Column>             </DataGrid>         );     } } export default App;

The onRowValidating handler allows you to perform an activity before a notification that a validation rule has been broken is displayed. For example, y'all can perform additional checks in this handler and change the validation result by changing the handler parameter's isValid field.

jQuery

JavaScript

$(part() {     $("#dataGridContainer").dxDataGrid({         // ...         onRowValidating: role (e) {             if (e.isValid && e.newData.Login === "Ambassador") {                 e.isValid = false;                 e.errorText = "You cannot log in as Administrator";             }         }     }); });
Angular

TypeScript

HTML

import { DxDataGridModule } from "devextreme-angular"; // ... consign class AppComponent {     denyAdminLogin (e) {         if (e.isValid && due east.newData.Login === "Administrator") {             e.isValid = false;             due east.errorText = "You cannot log in equally Administrator";         }     } } @NgModule({     imports: [         // ...         DxDataGridModule     ],     // ... })
<dx-data-grid ...     (onRowValidating)="denyAdminLogin($event)"> </dx-data-grid>
Vue

App.vue

<template>     <DxDataGrid ...         @row-validating="denyAdminLogin">     </DxDataGrid> </template>  <script> import 'devextreme/dist/css/dx.light.css';  import DxDataGrid from 'devextreme-vue/data-grid';  export default {     components: {         DxDataGrid     },     methods: {         denyAdminLogin(e) {             if(e.isValid && e.newData.Login === "Administrator") {                 due east.isValid = imitation;                 e.errorText = "Yous cannot log in as Administrator";             }         }     } } </script>
React

App.js

import React from 'react';  import 'devextreme/dist/css/dx.light.css';  import DataGrid from 'devextreme-react/data-grid';  class App extends React.Component {     denyAdminLogin(e) {         if(due east.isValid && e.newData.Login === "Administrator") {             east.isValid = false;             eastward.errorText = "You cannot log in as Ambassador";         }     }      render() {         return (             <DataGrid ...                 onRowValidating={this.denyAdminLogin}>             </DataGrid>         );     } } consign default App;

View Demo

See Also
  • Information Validation

wilsonstunion.blogspot.com

Source: https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/Editing/

Related Posts

0 Response to "Devexpress Angular Read Only Field Invisible on Popup Editor"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel