DataGrid and TreeList - New record position

[jsdmitry]

DataGrid and TreeList - New record position

Problem

When users add a new record to the DataGrid or TreeList, an empty row for it appears at the top. This behavior is inconvenient in scenarios when users want to add many records to the bottom of the table one by one - you have to go to the top to enter a new record and then scroll to the bottom to see it.

The Proposed Solution

We plan to add the index of the row to the change object of the changes array. To add a new record to the end of the DataGrid or TreeList, set the index to -1.

UPDATE: This functionality was released as a CTP in v21.1. However, after re-examining the use cases, we decided to use row keys instead of indices for the RTM release. To insert a new row at a custom position, you will need to specify the insertBeforeKey or insertAfterKey property. Both these properties accept the key of a row before/after which you want to insert the new row. As an alternative, we will add a newRowPosition property to allow you to choose a predefined position:

• newRowPosition: "first"/"last" - Insert a new row at the beginning/end of the dataset.
• newRowPosition: "pageTop"/"pageBottom" - Insert a new row at the top/bottom of the current page.
• newRowPosition: "viewportTop"/"viewportBottom" - Insert a new row at the top/bottom of the viewport

This revised API is due for release in v21.2.

Create a new record at a custom position

Angular

// app.component.html
<dx-data-grid
  [dataSource]="data"
  (onToolbarPreparing)="onToolbarPreparing($event)">
  <dxo-editing
    mode="row"
    [allowAdding]="true"
    [(changes)]="changes"
    [(editRowKey)]="editRowKey"
    [(editColumnName)]="editColumnName"> 
  </dxo-editing>
</dx-data-grid>

. . .

// app.component.ts
import Guid from "devextreme/core/guid";

. . .

export class AppComponent {
    data: any[];
    editRowKey: any;
    changes: Array<any>;

    constructor(service: Service) {
        this.data = service.getData();
        this.editRowKey = null;
        this.changes = [];
    }

    onToolbarPreparing(e) {
        const toolbarItem = e.toolbarOptions.items.find(
            (item) => item.name === "addRowButton"
        );
        toolbarItem.options.onClick = (ev) => {
            ev.event.stopPropagation();
            const key = new Guid().toString();
            this.changes = [...this.changes, {
                data: {},
                type: "insert",
                key,
                // v21.1
                index: 3,

                // v21.2
                insertAfterKey: 2,
                // or
                insertBeforeKey: 3
            }];
            this.editRowKey = key;
        };
    }
}

React

import Guid from "devextreme/core/guid";

. . .

const [editRowKey, setEditRowKey] = useState(null);
const [changes, setChanges] = useState([]);

function onEditCanceling(e) {
    setChanges([]);
    setEditRowKey(null);
}

function onSaving(e) {
    e.component.saveEditData().then(() => {
        setChanges([]);
        setEditRowKey(null);
    });
}

function onToolbarPreparing(e) {
    const toolbarItem = e.toolbarOptions.items.find(
        (item) => item.name === "addRowButton"
    );
    toolbarItem.options.onClick = (e) => {
        e.event.stopPropagation();
        const key = new Guid().toString();
        setChanges([
            ...changes,
            {
                data: {},
                type: "insert",
                key,
                // v21.1
                index: 3,

                // v21.2
                insertAfterKey: 2,
                // or
                insertBeforeKey: 3
            }
        ]);
        setEditRowKey(key);
    };
}

return (
  <React.Fragment>
    <DataGrid
      dataSource={data}
      keyExpr="ID"
      onToolbarPreparing={onToolbarPreparing}
      onEditCanceling={onEditCanceling}
      onSaving={onSaving}
    >
      <Editing 
        mode="row"
        changes={changes}
        allowAdding={true}
        editRowKey={editRowKey}
        onChangesChange={setChanges}
      />
    </DataGrid>
  </React.Fragment>
);

Vue

<template>
  <DxDataGrid
    :data-source="data"
    @toolbar-preparing="onToolbarPreparing($event)"
  >
    <DxPaging :enabled="true" />
    <DxEditing
      :allow-adding="true"
      v-model:changes="changes"
      v-model:edit-row-key="editRowKey"
      mode="row"
    />
  </DxDataGrid>
</template>

. . .

import Guid from "devextreme/core/guid";

. . .

export default {
  components: {
    DxDataGrid,
    DxEditing
  },
  data() {
    return {
      data: [...],
      editRowKey: null, 
      changes: [] 
    };
  },
  methods: {
    onToolbarPreparing(e) {
      const toolbarItem = e.toolbarOptions.items.find(
        (item) => item.name === "addRowButton"
      );
      toolbarItem.options.onClick = (ev) => {
        ev.event.stopPropagation();
        const key = new Guid().toString();
        this.changes = [...this.changes, {
            data: {},
            type: "insert",
            key,
            // v21.1
            index: 3,

            // v21.2
            insertAfterKey: 2,
            // or
            insertBeforeKey: 3
          },
        ];
        this.editRowKey = key;
      };
    }
  }
};

jQuery

$("#gridContainer").dxDataGrid({
    dataSource: data,
    onToolbarPreparing: (e) => {
        const addRowItem = e.toolbarOptions.items.find(item => item.name === 'addRowButton');
        addRowItem.options.onClick = (ev) => {
            ev.event.stopPropagation();
            const key = new DevExpress.data.Guid().toString();
            const changes = e.component.option('editing.changes');

            changes.push({
                data: {},
                type: 'insert',
                key,
                // v21.1
                index: 3,

                // v21.2
                insertAfterKey: 2,
                // or
                insertBeforeKey: 3
            });

            e.component.option('editing.changes', changes);
            e.component.option('editing.editRowKey', key);
        }
    }
});

We Need Your Feedback

Take a Quick Poll

Do you find the ability to set a new record position useful for your project?

Don't forget to subscribe to this thread for updates on this topic.

[NickMitrokhin]

Hello,

We encountered several complex issues when implementing the editing.newRowPosition option for TreeList. So, this option will not be available for TreeList in v21.2. We will schedule this feature for release for TreeList in one of our future major versions.

[Alyar666]

These features are now available in DataGrid in the v21.2 release. I'm closing this thread. In the case of bugs or questions, feel free to create a new ticket in our Support Center.