WebApiAdaptor Json Case

[Albert K]

The webapiadaptor expect { Item: [ ], Count: 0}. Is it possible for the return Json be case agnostic? I mean a lot of backend returns the Json in CamelCase.

It would be wonderful if the adaptor is Case insensitive.

Thank you.

[Gowri Loganathan]

Hi Albert K, 

Greetings from Syncfusion Support. 

Query: Is it possible for the return Json be case agnostic 

We suggest you to refer the below general link to overcome case sensitivity issue.  

https://stackoverflow.com/questions/11263865/asp-net-webapi-json-binding-case-sensitivity 

After referred the above link, still facing an issue. Please get back to us, with the below details. 

1. Confirm whether are you using Essential Javascript 1  Or Essential Javascript 2.
2. Share the complete code example.

Regards, 

Gowri V L 

 

[Albert K]

For your information, the backend is Asp.net Core 3.1, with Angular 9 with ES2 latest.  The issue is that with core 3.x and above the default Json return is in CamelCase where the webapiadaptor is expecting PascalCase.

By forcing the json return to PascalCase will make the Syncfusion webapiadaptor work but other libraries that expect JSON to be in CamelCase.  My suggestions to not force Syncfusion to only expect PascalCase Json return.  The only exception is the OData adaptor which the default output is in PascalCase. 

namespace MyAppAPI.Controllers

{

    [Route("api/[controller]")]

    [ApiController]

    public class DataController : ControllerBase

    {

public DataController() {}

[HttpGet()]

        

        public async IActionResult Get()

        {

    // Get DB data

            var retval = new ReturnData<Car> { Items = new List<Car> { new Car { Make="Toyota", Model ="Vios" }, new Car { Make = "Honda", Model ="CRV" }  } };            

            return Ok(retval);

        }

        

        private class ReturnData<T>

        {

            public List<T> Items {get;set;}

            public int Count {get;set;}

        }

       private class Car

       {

            public string Make {get;set;}

            public string Model {get;set;}

       }

    }

}

 

[Sujith Kumar Rajkumar]

Hi Albert, 

As you have mentioned the ASP.NET Core returns the JSON results in camelCase format and you can serialize it to return it in the PascelCase format as documented in this help link. The Grid does not expect PascelCase format for the column field names but it does expect it for the response data properties to be returned as – “Items” and “Count” for the Web API adaptor. This is its default behavior. So if you need to change this in order to use the camel case data itself then we suggest you to achieve it using the Custom adaptor. The Custom Adaptor allows to create your own adaptor by extending the built-in adaptors. Using this you can override the ProcessResponse method(Triggers after data is returned from the server) to get the response data and return it as result and count properties to set it in the Grid as demonstrated in the below code snippet, 

// Grid’s created event handler 

function created(args) { 

        class CustomDataAdaptor extends ej.data.WebApiAdaptor { 

            // Triggers when response is received from the server 

            processResponse() { 

                // Calling base class processResponse function to execute the actions defined in the source method 

                var original = super.processResponse.apply(this, arguments); 

                // Data is returned in the below format 

                return { result: original.items, count: original.count }; 

            } 

        } 

       var grid = document.querySelector('#Grid').ej2_instances[0]; 

        // Grid data source is set here 

        grid.dataSource = new ej.data.DataManager({ 

            url: "/api/Orders", 

            adaptor: new CustomDataAdaptor() 

        }); 

   } 

You can now set the corresponding camel case field names itself to the Grid column field property as demonstrated in the below code snippet, 

<ejs-grid id="Grid"> 

    <e-grid-columns> 

        <e-grid-column field="make" headerText="Make"></e-grid-column> 

        <e-grid-column field="model" headerText="Model"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

More details on the Custom adaptor can be checked from the below help documentation link, 

Custom adaptor: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#custom-adaptor 

Let us know if you have any concerns. 

Regards, 

Sujith R