Position of the new rows

[Jorge Pampin]

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!

[Sellappandi Ramu]

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

[Jorge Pampin]

Hello,

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

Thanks!

[Sellappandi Ramu]

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

[Jorge Pampin]

It is perfect! Thanks!

[Sellappandi Ramu]

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