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

Position of the new rows

Hello,

I have this grid:

 <ej:grid runat='server' ID="GdCuentas" AllowScrolling="true">
<EditSettings RowPosition="Bottom"     />
<ClientSideEvents ActionBegin="beginCuentas"  QueryCellInfo="cellEventCuentas" CellSave="cellSaveCuentas" CellEdit="cellEditCuentas" />
</ej:grid>

When I add a new row this way:

 var addedRecord = gridObj.addRecord({ IdCuenta: createGuid(), Nombre: nombre, ID: '' });

The new row is always on top...

Thanks!

5 Replies

SR Sellappandi Ramu Syncfusion Team November 18, 2015 08:50 AM UTC

Hi Jorge,

Thanks for contacting Syncfusion support.

While setting RowPosition as Bottom in grid, the edit form will display in bottom of the grid, but the record will save show in top of the grid.

We need to call refreshContent method after invoking the addRecord() method. If we are not updating the database after completing CRUD operation,  we manually need to push the added records to end of the grid datasource and use refreshContent methid in actionComplete event with request type as “save” to display the added record at bottom.

Please refer to the code example and sample,

    <ej:button id="Button1" runat="server" type="Button" clientsideonclick="btnClick" text="Add Record"></ej:button>

    <ej:grid id="FlatGrid" runat="server" allowscrolling="true">

        <Columns>

               <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90">                  

               </ej:Column>

               <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90">                  

               </ej:Column>              

               <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="110"></ej:Column>

               <ej:Column Field="ShipCity" HeaderText="ShipCity" Width="90" />

            </Columns>

            <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" RowPosition="Bottom"></EditSettings>

        <ClientSideEvents ActionBegin="beginCuentas"  QueryCellInfo="cellEventCuentas" CellSave="cellSaveCuentas" CellEdit="cellEditCuentas" ActionComplete="actionComplete" />

            <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>

    </ej:grid>

    <script type="text/javascript">

        function btnClick(e) {

            var gridObject = $('#<%= FlatGrid.ClientID %>').data("ejGrid");

            gridObject.addRecord({ "OrderID": 10011, "CustomerID": "VINNET", "EmployeeID": 5, "ShipCity": "Itally"});

           

        }

        function actionComplete(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>


Sample: http://www.syncfusion.com/downloads/support/forum/121176/ze/Sample_1211761166858547

In the above sample we have used Add Record button to add the record dynamically and action complete event to push the added record at end of the grid dataSource.

Regards,
Sellappandi R


JP Jorge Pampin November 18, 2015 10:02 AM UTC

Hello,

It's works! But, how to select and scroll to the new record?

Thanks!


SR Sellappandi Ramu Syncfusion Team November 19, 2015 06:38 AM UTC

Hi Jorge,

We are happy that the provided suggestion helped you.

when we want to show the added record in grid, we need to perform the scroll and select operation dynamically, if the record is added in end of the grid row and the scroll feature is enabled.

Please refer to the code example and sample,

function actionComplete(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();

                var scrollObj = this.getScrollObject();

                scrollObj.model.scrollTop = scrollObj.model.height;// Scroll at end of the grid

                scrollObj.refresh();

                this.selectRows($.inArray(args.data, this.model.dataSource))// Perform selection dynamically

            }
        }


Sample: http://www.syncfusion.com/downloads/support/forum/121176/ze/Sample_121176164181230

Regards,
Sellappandi R


JP Jorge Pampin November 19, 2015 08:08 AM UTC

It is perfect! Thanks!


SR Sellappandi Ramu Syncfusion Team November 20, 2015 04:54 AM UTC

Hi Jorge, 

We are happy that the provided suggestion helped you. 

Please get back to us if you need any further assistance.  

Regards, 
Sellappandi R


Loader.
Live Chat Icon For mobile
Up arrow icon