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

[Sandip]

Hello, I am using a syncfusioin grid with the remote data adapter. and I am using add and edit features of the grid. when I add a row in a grid it always adding it first. I wanted to add it at bottom of the grid. how can I achieve this?

I have looked into below article and followed it. but it's not working for me

https://www.syncfusion.com/forums/131930/how-to-position-new-rows-at-the-bottom-of-the-grid

In this when I use code of action complete it throws an error 

Uncaught TypeError: this.model.dataSource.shift is not a function

Below is my code for reference

In View

@(Html.EJ().Grid<AssignedProductMaterialViewModel>("GridProductMaterials")

                                                                                                          .Datasource(datasource => datasource.Json((IEnumerable<AssignedProductMaterialViewModel>)Model.ProductMaterials).UpdateURL(@Url.Action("UpdateProductMaterial")).InsertURL(@Url.Action("CreateProductMaterial")).RemoveURL(@Url.Action("RemoveProductMaterial")).Adaptor(AdaptorType.RemoteSaveAdaptor))

                                                                                                           .EditSettings(edit => { edit.AllowAdding().AllowEditing().AllowEditOnDblClick(false).EditMode(EditMode.InlineForm).ShowConfirmDialog(true).TitleColumn("Description"); })

                                                                                                               .Query("new ej.Query().addParams('ProductId', " +Model.Id +")")

                                                                                                               .ToolbarSettings(toolbar =>

                                                                                                               {

                                                                                                                   toolbar.ShowToolbar().ToolbarItems(items =>

                                                                                                                   {

                                                                                                                       items.AddTool(ToolBarItems.Add);

                                                                                                                   });

                                                                                                               })

                                                                                                         .AllowResizing(true).AllowRowDragAndDrop(true).SelectionType(SelectionType.Single)

                                                                                                         .EnableAltRow().AllowResizeToFit(true)

                                                                                                         .EnableHeaderHover()

                                                                                                         .Columns(col =>

                                                                                                         {

                                                                                                             col.Field(x => x.UnitQty)

                                                                                                                 .HeaderText("UnitQty")

                                                                                                                 .TextAlign(TextAlign.Center).EditType(EditingType.NumericEdit).NumericEditOptions(new EditorProperties() { DecimalPlaces = 0 })

                                                                                                                 .ValidationRules(v => v.AddRule("required", true).AddRule("maxlength", 255))

                                                                                                                 .Width(40)

                                                                                                                 .Add();

                                                                                                             col.Field(x => x.Id)

                                                                                                                  .HeaderText("Id")

                                                                                                                  .TextAlign(TextAlign.Left).IsPrimaryKey(true).IsIdentity(true).AllowEditing(false).Visible(false)

                                                                                                                  .Width(100)

                                                                                                                  .Add();

                                                                                                             col.Field(x => x.Description)

                                                                                                                    .HeaderText("Description")

                                                                                                                    .TextAlign(TextAlign.Center).EditType(EditingType.StringEdit)

                                                                                                                    .ValidationRules(v => v.AddRule("maxlength", 255))

                                                                                                                    .Width(110)

                                                                                                                    .Add();

                                                                                                             col.Field(x => x.BeamLength)

                                                                                                                   .HeaderText("BeamLength")

                                                                                                                   .TextAlign(TextAlign.Center)

                                                                                                                    .EditType(EditingType.NumericEdit).NumericEditOptions(new EditorProperties() { DecimalPlaces = 0 })

                                                                                                                 .ValidationRules(v => v.AddRule("required", true).AddRule("maxlength", 255))

                                                                                                                   .Width(60)

                                                                                                                   .Add();

                                                                                                             col.Field(x => x.SawDepth)

                                                                                                                  .HeaderText("SawDepth")

                                                                                                                  .TextAlign(TextAlign.Center)

                                                                                                                   .EditType(EditingType.NumericEdit).NumericEditOptions(new EditorProperties() { DecimalPlaces = 0 })

                                                                                                                 .ValidationRules(v => v.AddRule("required", true).AddRule("maxlength", 255))

                                                                                                                  .Width(50)

                                                                                                                  .Add();

                                                                                                             col.Field(x => x.Thickness)

                                                                                                                 .HeaderText("Thickness")

                                                                                                                 .TextAlign(TextAlign.Center)

                                                                                                                .EditType(EditingType.NumericEdit).NumericEditOptions(new EditorProperties() { DecimalPlaces = 0 })

                                                                                                                 .ValidationRules(v => v.AddRule("required", true).AddRule("maxlength", 255))

                                                                                                                 .Width(50)

                                                                                                                 .Add();

                                                                                                             col.Field(x => x.Machine)

                                                                                                                 .HeaderText("Machine")

                                                                                                                 .TextAlign(TextAlign.Center).EditType(EditingType.StringEdit)

                                                                                                                  .ValidationRules(v => v.AddRule("maxlength", 255))

                                                                                                                 .Width(70)

                                                                                                                 .Add();

                                                                                                             col.Field(x => x.Edge)

                                                                                                                .HeaderText("Edge")

                                                                                                                .TextAlign(TextAlign.Center)

                                                                                                                 .ValidationRules(v => v.AddRule("maxlength", 255))

                                                                                                                .Width(40)

                                                                                                                .Add();

                                                                                                             col.Field(x => x.TapeThickness)

                                                                                                               .HeaderText("TapeThickness")

                                                                                                               .TextAlign(TextAlign.Center)

                                                                                                              .EditType(EditingType.NumericEdit).NumericEditOptions(new EditorProperties() { DecimalPlaces = 0 })

                                                                                                                 .ValidationRules(v => v.AddRule("required", true).AddRule("maxlength", 255))

                                                                                                               .Width(70)

                                                                                                               .Add();

                                                                                                             col.Field(x => x.WorkInstruction)

                                                                                                               .HeaderText("WorkInstruction")

                                                                                                               .TextAlign(TextAlign.Center).EditType(EditingType.StringEdit)

                                                                                                               .ValidationRules(v => v.AddRule("maxlength", 255))

                                                                                                               .Width(75)

                                                                                                               .Add();

                                                                                                             col.Field(x => x.FinishedLength)

                                                                                                               .HeaderText("FinishedLength")

                                                                                                               .TextAlign(TextAlign.Center)

                                                                                                                  .EditType(EditingType.NumericEdit).NumericEditOptions(new EditorProperties() { DecimalPlaces = 0 })

                                                                                                                 .ValidationRules(v => v.AddRule("required", true).AddRule("maxlength", 255))

                                                                                                               .Width(75)

                                                                                                               .Add();

                                                                                                             col.Field(x => x.SizeDepth)

                                                                                                               .HeaderText("SizeDepth")

                                                                                                               .TextAlign(TextAlign.Center)

                                                                                                               .EditType(EditingType.NumericEdit).NumericEditOptions(new EditorProperties() { DecimalPlaces = 0 })

                                                                                                               .ValidationRules(v => v.AddRule("required", true).AddRule("maxlength", 255))

                                                                                                               .Width(60)

                                                                                                               .Add();

                                                                                                             col.HeaderText("Actions")

                                                                                                             .Template(

                                                                                                             "<a rel='nofollow' href='javascript:void(0)' data-productmaterial-id='{{:Id}}' class='btn-white btn btn-xs edit-data productmaterial-update-button'>Edit</a> &nbsp" +

                                                                                                             "<a rel='nofollow' href='javascript:void(0)' data-productmaterial-id='{{:Id}}' class='btn-white btn btn-xs edit-data productmaterial-delete-button'>Delete</a>"

                                                                                                         ).AllowEditing(false)

                                                                                                           .TextAlign(TextAlign.Center)

                                                                                                           .Width(70).

                                                                                                           Add();

                                                                                                         })

                                                                                         .ClientSideEvents(events =>

                                                                                         {

                                                                                             events.ActionFailure("mrp.productDetails.productMaterialActionFailure");

                                                                                             events.ActionComplete("mrp.productDetails.productMaterialActionComplete");

                                                                                             events.RowDrop("mrp.productDetails.productMaterialsRowDrop");

                                                                                         })

In Action Complete method as below 

 if (args.requestType == "save") {

            this.model.dataSource.shift(); // in this line it throws error.

            this.model.dataSource.push(args.data)// Push the newly added record in data source

            this.refreshContent();

        }

[Vignesh Natarajan]

Hi Sandip, 

 

Thanks for using Syncfusion products.  

 

Query:- Uncaught TypeError: this.model.dataSource.shift is not a function 

 

From your query, we understand that you are facing issue while implementing the suggestion provided in another forum. In that forum we have provided solution to achieve their requirement for local data. While using RemoteSave Adaptor we cannot get the this.model.dataSource. so the script error is thrown. Instead, you need to get the dataSource on this.model.dataSource.dataSource.json.shift() as like below code example 

 

@(Html.EJ().Grid<object>("FlatGrid") 

           .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).UpdateURL("/Grid/CellEditUpdate").InsertURL("/Grid/CellEditInsert").RemoveURL("/Grid/CellEditDelete").Adaptor(AdaptorType.RemoteSaveAdaptor)) 

             

            .Columns(col => 

            { 

                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right) 

                    .Width(90).Add(); 

                     .      .      . 

               }) 

                    .ClientSideEvents(eve => 

                    { 

                        eve.ActionComplete("complete"); 

                    }) 

) 

<script type="text/javascript"> 

    function complete(args) { 

        if (args.requestType == "save") { 

            this.model.dataSource.dataSource.json.shift();// Remove the newly added record from first position 

            this.model.dataSource.dataSource.json.push(args.data)// Push the newly added record in data source 

            this.refreshContent(); 

        } 

    } 

 

</script> 

 

 

Refer to the sample Link:- http://www.syncfusion.com/downloads/support/forum/141010/ze/Sample1458622003943433 

 

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

 

Note: above solution will work only for remoteSaveAdaptor, will not work for UrlAdaptor. 

 

Regards, 

Vignesh Natarajan