We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. How to position new rows at the bottom of the grid?

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

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



3 Replies
SA Saravanan Arunachalam Syncfusion Team August 4, 2017 09:09 AM UTC

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. 
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> 
 
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. 


SO Samuel Otero August 4, 2017 04:01 PM UTC

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



SA Saravanan Arunachalam Syncfusion Team August 7, 2017 04:45 AM UTC

Hi Samuel,  
Thanks for your update.            
We are happy that the provided information helped you. 
Regards, 
Saravanan A. 


Loader.
Up arrow icon