Adding a new row at the bottom of grid

[KBN]

I have tried the solution in the following post: Add new row at the bottom. The row is added to the bottom of the grid in edit mode, but once you click out of edit mode, the row then moves to the top of the grid. I need the row to stay at the bottom or in other words, add rows to the grid in order from top to bottom. How can this be done?

Thanks!

[THOMAS]

Hello,

I have the same problem, is there any solution ?
Using CSS or something but I don't see any class to customise...

Thanks

[Petur Subev]

Hello,

There is configuration which you can use to specify the insert position to be at the bottom. You do not need to use such work-around anymore.

"editable": {
    "confirmation": "Are you sure you want to delete this item?",
    "mode": "inline",
    "createAt": "bottom"
},

All the best,
Petur Subev
the Telerik team

[Sypher]

The createAt configuration option seems to do nothing for me. I am using v. 2012.3.1114. Would sorting options on the grid have an affect on the new item location? Also, the option does not seem to be listed in the documentation at http://docs.kendoui.com/api/web/grid#editable-booleanobject-default. Is this a new configuration option?

[Alexander Valchev]

Hi Bryan,

I tested this case with version 2012.3.1114 and got everything to work as expected. Here is an example.
In case the Grid is sorted this option will be ignored and the created record will be according to the sort criteria.

Yes the createAt configuration is a relatively new. I have added it to the documentation but it may take some time until changes are published live.

Kind regards,
Alexander Valchev
the Telerik team

[Sypher]

Okay, thanks for looking into it. I'd prefer the createAt to override the sort for the placement of the create line, but it's good to know it works as designed.

[Ankita]

Do we have similar functionality for Kendo UI Angular grid ?

[Dimiter Topalov]

Hello Ankita,

Adding the new Grid row at the bottom or other arbitrary position in the Grid table is currently not supported in the Kendo UI for Angular Grid. If you have the time, please support the following feature request in our Feedback portal to help us estimate the customer demand for such an enhancement, and prioritize accordingly when updating our roadmap:

https://feedback.telerik.com/kendo-angular-ui/1360584-kendo-ui-grid-inline-insert-new-row-at-a-specific-position-on-the-grid

Thank you in advance.

Meanwhile the only relatively straightforward workaround I can suggest is to use a custom implementation, based on external form editing, as demonstrated in the following section of our documentation:

http://www.telerik.com/kendo-angular-ui/components/grid/editing/external-editing/

... and apply some custom logic when saving the data that will ensure it is placed in the desired spot in the returned collection the Grid is bound to, e.g.:

private fetch(action: string = '', data?: any): Observable<any[]> {
        return this.http
            .jsonp(`https://demos.telerik.com/kendo-ui/service/Products/${action}?${this.serializeModels(data)}`, 'callback')
            .pipe(
              map(res => <any[]>res),
              map(response => {
              if(this.afterCreate){
                this.afterCreate = false;
                const newItem = response[0];
                newItem.Discontinued = true;

                response.splice(0, 1);
                response.splice(9, 0, newItem);
              }

              if(action === 'create'){
                this.afterCreate = true;
              }

              return response;
            }));
    }

    private serializeModels(data?: any): string {
        return data ? `&models=${JSON.stringify([data])}` : '';
    }

http://plnkr.co/edit/wmjiCFFTpPedT02Rvp03?p=preview

... or a similar approach but with inline editing:

http://plnkr.co/edit/0jCpi1iKO8hbTnelamo8?p=preview

Please mind that the example is designed only to show a sample approach for adding the new item edit form at the bottom of the Grid, and is not fully functional as further considerations and the respective custom logic implementation should be added based on the desired behavior when the "Cancel" button is pressed or where the newly added item should appear in the Grid.

I hope this will help pointing you in the right direction

Regards,
Dimiter Topalov
Progress Telerik

[Ankita]

Thank you so much for your reply.