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.

Position of the new rows

Thread ID:

Created:

Updated:

Platform:

Replies:

121176 Nov 17,2015 07:17 AM Nov 19,2015 11:54 PM ASP.NET Web Forms 5
loading
Tags: Grid
Jorge Pampin
Asked On November 17, 2015 07:17 AM

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 [Syncfusion]
Replied On November 18, 2015 03:50 AM

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
Replied On November 18, 2015 05:02 AM

Hello,

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

Thanks!

Sellappandi Ramu [Syncfusion]
Replied On November 19, 2015 01:38 AM

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
Replied On November 19, 2015 03:08 AM

It is perfect! Thanks!

Sellappandi Ramu [Syncfusion]
Replied On November 19, 2015 11:54 PM

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


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.

;