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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

131930 Aug 3,2017 03:50 PM Aug 7,2017 12:45 AM ASP.NET MVC 3
loading
Tags: Grid
Samuel Otero
Asked On August 3, 2017 03:50 PM

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 [Syncfusion]
Replied On August 4, 2017 05:09 AM

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. 


Samuel Otero
Replied On August 4, 2017 12:01 PM

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 [Syncfusion]
Replied On August 7, 2017 12:45 AM

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;