Adding a new row at the bottom of grid

1 Answer 1399 Views
Grid
KBN
Top achievements
Rank 1
KBN asked on 08 Aug 2012, 02:57 PM
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
Top achievements
Rank 2
commented on 20 Dec 2012, 08:26 AM

Hello,

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

Thanks

1 Answer, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 24 Dec 2012, 01:53 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Sypher
Top achievements
Rank 1
commented on 14 Jan 2013, 08:03 PM

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
Telerik team
commented on 17 Jan 2013, 03:25 PM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Sypher
Top achievements
Rank 1
commented on 17 Jan 2013, 04:33 PM

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
Top achievements
Rank 1
commented on 19 Feb 2019, 08:16 PM

Do we have similar functionality for Kendo UI Angular grid ?
Dimiter Topalov
Telerik team
commented on 22 Feb 2019, 11:37 AM

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Ankita
Top achievements
Rank 1
commented on 10 Mar 2019, 08:50 PM

Thank you so much for your reply.
Tags
Grid
Asked by
KBN
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or