ASP.NET Core Razor Pages Grid EJ2 RemoteSaveAdaptor json not working

[Luke]

I try to use the EJ2 Grid RemoteSaveAdaptor using Razor Pages in ASP.NET Core Syncfusion.EJ2.AspNet.Core (16.4.0.53)

However, for some reason, the json in e-data-manager is not accepted (See green section in the sample below). It gives the following error message:

Cannot implicitly convert type 'System.Collections.Generic.List<CoreRazorPages.Pages.Order>' to 'object[]'

Here is the HTML I use on the Index.cshtml page:

@page "{handler?}"
@model IndexModel
@{
    ViewData["Title"] = "EJ2 RemoteSaveAdaptor Grid Test"
}
<ejs-grid id="Grid" toolbar="@(new List<string>() { "Add","Delete","Update", "Cancel" })">
    <e-data-manager json="@Model.TestModel.Orderdata" adaptor="RemoteSaveAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete"></e-data-manager>
    <e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true"></e-grid-editSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

[Thavasianand Sankaranarayanan]

Hi Luke, 

Greetings from Syncfusion. 

We have analyzed the codes and problem details which you have shared with us. We suggest you to assign array of objects to the JSON property of DataManager. We suggest you to add the “ToArray()” in your code to achieve your requirement. Please refer the cod example below, 

[View page] 

 

<ejs-grid id="Grid" ...> 

   <e-data-manager json="@Model.DataSource.ToArray()" adaptor="RemoteSaveAdaptor"></e-data-manager> 

    ... 

</ejs-grid> 

 

[Controller code] 

 

namespace Razorpages.Pages 

{ 

    public class IndexModel : PageModel 

    { 

        public List<OrdersDetails> DataSource = OrdersDetails.GetAllRecords(); 

        public void OnGet() 

        { 

 

        } 

        ... 

    } 

} 

 

Documentation : https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/?no-cache=1#remote-save-adaptor 

 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S. 

[Luke]

This works, thanks!

Here is the complete Razor Pages Code, in case someone is interested:

CSHTML Batch Editing

@page
@model IndexModel
@{
    ViewData["Title"] = "EJ2 Grid Test Batch Edit Mode";
}

<ejs-grid id="Grid" toolbar="@(new List<string>() { "Add","Delete","Update", "Cancel" })">
    <e-data-manager json="@Model.Books.ToArray()" adaptor="RemoteSaveAdaptor" insertUrl="Index?handler=ActionHere" updateUrl="Index?handler=ActionHere" removeUrl="Index?handler=ActionHere" batchUrl="Index?handler=ActionHere"></e-data-manager>

    <e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true" mode="Batch"></e-grid-editSettings>
    <e-grid-columns>
        <e-grid-column field="Id" headerText="Id" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="BookName" headerText="Book Name" width="150"></e-grid-column>
        <e-grid-column field="EAN" headerText="EAN" width="130" textAlign="Right"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

CSHTML.cs Code Behind File

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Syncfusion.EJ2.Base;

namespace TheDefinitveGridEJ2.Pages
{
    [IgnoreAntiforgeryToken(Order = 1001)]
    public class IndexModel : PageModel
    {
        public List<Book> Books = new List<Book>();
        public void OnGet()
        {
            bool isEmpty = !Books.Any();
            if(isEmpty)
            {
                GetDataSource();
            }          
        }
       
        public void GetDataSource()
        {
            Books.Add(new Book() { Id = 44, BookName = "Cool", EAN = "4444444444444" });
            Books.Add(new Book() { Id = 55, BookName = "Cool1", EAN = "55555555555" });
            Books.Add(new Book() { Id = 66, BookName = "Cool2", EAN = "66666666666" });
        }

        public IActionResult OnPostActionHere([FromBody]CRUDModel<Book> myObject)
        {
            //  SET BREAKPOINT HERE. CRUD Operations can be made to a MS SQL Database at this place. Take a look at myObject during break, various information can be gathered from myObject.
            return Page();
        }

        public class Book
        {
            public int Id { get; set; }
            public string BookName { get; set; }
            public string EAN { get; set; }
        }
    }
}

[Thavasianand Sankaranarayanan]

Hi Lukas, 

Thanks for your update. 

We are happy that your problem has been resolved. 

Regards, 

Thavasianand S.