How to position new rows at the bottom of the grid?

[Samuel Otero]

DISCLAIMER: The creation of this thread doesn't mean that I found a workaround for the bug that I posted in my previous thread.

Hello

I have a grid where I can add, edit and delete rows. I simply added those actions at the grid toolbar with the following code:

.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().RowPosition(RowPosition.Bottom); })

 

Now, the problem here is that when I save a new row, it goes to the top of the grid. This is exactly the opposite to the behavior that we are expecting from the grid. I need new rows to be added at the bottom of the grid. I found this thread where you guys give a workaround for that, but for me, it doesn't work. My .js "actionComplete" function never gets triggered after new records are added to the grid. Here is my grid code:

@(Html.EJ().Grid<object>("MultiplesImputacionesGrid")

                    .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().RowPosition(RowPosition.Bottom); })

                    .ToolbarSettings(toolbar =>

                    {

                        toolbar.ShowToolbar().ToolbarItems(items =>

                        {

                            items.AddTool(ToolBarItems.Add);

                            items.AddTool(ToolBarItems.Edit);

                            items.AddTool(ToolBarItems.Delete);

                            items.AddTool(ToolBarItems.Update);

                            items.AddTool(ToolBarItems.Cancel);

                        });

                    })

                    .ClientSideEvents(events => events.ActionComplete("actionComplete"))

                    .Columns(col =>

                    {

                        col.Field("Infraccion").HeaderText("Infracción").TextAlign(TextAlign.Center).Add();

                        col.Field("Fecha").HeaderText("Fecha").Format("{0:dd/MM/yyyy}").TextAlign(TextAlign.Center).EditType(EditingType.Datepicker).Add();

                        col.Field("Periodos").HeaderText("Periodos").TextAlign(TextAlign.Center).Add();

                        col.Field("MultaAdministrativa").HeaderText("Multa Administrativa").TextAlign(TextAlign.Center).Add();

                        col.Field("GastosAdministrativos").HeaderText("Gastos Administrativos").TextAlign(TextAlign.Center).Add();

                    })

                )

So, what's the correct workaround for this? 

Thank you

[Saravanan Arunachalam]

Hi Samuel, 

Thanks for contacting Syncfusion’s support. 

By default, the RowPosition property is used to render the add form either top/bottom based on its value (not position the added record into the Grid) and the new record will be added as first record on the Grid’s dataSource.  

Through that workaround, we have inserted a newly added a record as a last record of Grid’s dataSource instead of first record and you can view it while go to the last page. And we have analyzed your provided code, we suspect that you have render the Grid control without primary key column. So, we suggest you render Grid with any of the primary key columns. Please refer to the below documentation link. 

https://help.syncfusion.com/aspnetmvc/grid/editing  

https://help.syncfusion.com/api/js/ejgrid#members:columns-isprimarykey  

Also refer to the below code example and attached sample. 

@(Html.EJ().Grid<OrdersView>("Grid") 

        . . . 

        .Columns(col => 

        { 

            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 

              . . . 

        }) 

         

        .ClientSideEvents(e=>e.ActionComplete("onActionComplete")) 

) 

 

<script type="text/javascript"> 

    function onActionComplete(args) { 

        if (args.requestType == "save") { 

            this.model.dataSource.shift();// Remove the newly added record from first position 

            this.model.dataSource.push(args.data)// Push the newly added record in data source 

            this.refreshContent(); 

        } 

    } 

     

</script> 

 

http://www.syncfusion.com/downloads/support/forum/131930/ze/F1319301768631769  

If it is not your requirement, please provide the below details. 

1.       Do you want add a record at the bottom current page? 

2.       Did you use any adaptor? 

Regards, 

Saravanan A. 

[Samuel Otero]

I was able to get this to work following the first thread that I linked in the original post. The problem for me was that I had the Javascript function inside $(document).ready()

Thank  you guys

[Saravanan Arunachalam]

Hi Samuel,  

Thanks for your update.            

We are happy that the provided information helped you. 

Regards, 

Saravanan A.