Search results

Data Adaptors

Each data source or remote service uses different way for accepting request and sending back the response. The EjsDataManager cannot anticipate every way a data source works. To tackle this problem the EjsDataManager uses adaptor concept to communicate with particular data source.

For local data sources, the role of the data adaptor is to query the object array based on the Query object and manipulate them.

For remote data source, the data adaptor is used to send the request that the server can understand which then processes the server response.

The adaptor can be assigned using the Adaptor property of the EjsDataManager.

Json adaptor

The JsonAdaptor is used to query and manipulate object array.

The following sample code demonstrates binding data to the Grid component through the EjsDataManager using JsonAdaptor,

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Data
@using Syncfusion.EJ2.Blazor.Grids

<EjsGrid TValue="EmployeeData" ID="Grid">
    <EjsDataManager Json=@Employees Adaptor="Adaptors.JsonAdaptor"></EjsDataManager>
    <GridColumns>
        <GridColumn Field=@nameof(EmployeeData.EmployeeID) TextAlign="TextAlign.Center" HeaderText="Employee ID" Width="120"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.Name) HeaderText="First Name" Width="130"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn>
    </GridColumns>
</EjsGrid>

@code{
    public class EmployeeData
    {
        public int EmployeeID { get; set; }
        public string Name { get; set; }
        public string Title { get; set; }
    }

    public EmployeeData[] Employees = new EmployeeData[]
    {
        new EmployeeData { EmployeeID = 1, Name = "Nancy Fuller", Title = "Vice President" },
        new EmployeeData { EmployeeID = 2, Name = "Steven Buchanan", Title = "Sales Manager" },
        new EmployeeData { EmployeeID = 3, Name = "Janet Leverling", Title = "Sales Representative" },
        new EmployeeData { EmployeeID = 4, Name = "Andrew Davolio", Title = "Inside Sales Coordinator" },
        new EmployeeData { EmployeeID = 5, Name = "Steven Peacock", Title = "Inside Sales Coordinator" },
        new EmployeeData { EmployeeID = 6, Name = "Janet Buchanan", Title = "Sales Representative" },
        new EmployeeData { EmployeeID = 7, Name = "Andrew Fuller", Title = "Inside Sales Coordinator" },
        new EmployeeData { EmployeeID = 8, Name = "Steven Davolio", Title = "Inside Sales Coordinato" },
        new EmployeeData { EmployeeID = 9, Name = "Janet Davolio", Title = "Sales Representative" },
        new EmployeeData { EmployeeID = 10, Name = "Andrew Buchanan", Title = "Sales Representative" }
    };
}

Url adaptor

The UrlAdaptor acts as the base adaptor for interacting with remote data services. Most of the built-in adaptors are derived from the UrlAdaptor.

The following sample code demonstrates binding data to the Grid component through the EjsDataManager using UrlAdaptor,

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Data
@using Syncfusion.EJ2.Blazor.Grids

<EjsGrid TValue="EmployeeData" ID="Grid" AllowPaging="true">
    <EjsDataManager Url="http://controller.com/actions" Adaptor="Adaptors.UrlAdaptor"></EjsDataManager>
    <GridColumns>
        <GridColumn Field=@nameof(EmployeeData.EmployeeID) TextAlign="TextAlign.Center" HeaderText="Employee ID" Width="120"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.Name) HeaderText="First Name" Width="130"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn>
    </GridColumns>
</EjsGrid>

@code{
    public class EmployeeData
    {
        public int EmployeeID { get; set; }
        public string Name { get; set; }
        public string Title { get; set; }
    }
}

The above provided url is given for reference purpose. In that place you can provide your service url.

UrlAdaptor expects response as a JSON object with properties result and count which contains the collection of entities and the total number of records respectively.

The sample response object should be as follows,

{
    "result": [{..}, {..}, {..}, ...],
    "count": 67
}

OData adaptor

OData is a standardized protocol for creating and consuming data. You can retrieve data from OData service using EjsDataManager. The ODataAdaptor helps you to interact with OData service.

The following sample code demonstrates binding remote data to the Grid component through the EjsDataManager using OData service,

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Data
@using Syncfusion.EJ2.Blazor.Grids

<EjsGrid TValue="EmployeeData" ID="Grid" AllowPaging="true">
    <EjsDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" Adaptor="Adaptors.ODataAdaptor"></EjsDataManager>
    <GridColumns>
        <GridColumn Field=@nameof(EmployeeData.OrderID) TextAlign="TextAlign.Center" HeaderText="Order ID" Width="120"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.CustomerID) TextAlign="TextAlign.Center" HeaderText="Customer Name" Width="130"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.EmployeeID) TextAlign="TextAlign.Center" HeaderText="Employee ID" Width="120"></GridColumn>
    </GridColumns>
</EjsGrid>

@code{
    public class EmployeeData
    {
        public int OrderID { get; set; }
        public string CustomerID { get; set; }
        public int EmployeeID { get; set; }
    }
}

By default, ODataAdaptor is used by DataManager.

ODataV4 adaptor

The ODataV4 is an improved version of OData protocols and the EjsDataManager can also retrieve and consume OData v4 services. For more details on OData v4 Services, refer the odata documentation. You can use the ODataV4Adaptor to interact with ODataV4 service.

The following sample code demonstrates binding remote data to the Grid component through the EjsDataManager using ODataV4 service,

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Data
@using Syncfusion.EJ2.Blazor.Grids

<EjsGrid TValue="EmployeeData" ID="Grid" AllowPaging="true">
    <EjsDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders/" Adaptor="Adaptors.ODataV4Adaptor"></EjsDataManager>
    <GridColumns>
        <GridColumn Field=@nameof(EmployeeData.OrderID) TextAlign="TextAlign.Center" HeaderText="Order ID" Width="120"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.CustomerID) TextAlign="TextAlign.Center" HeaderText="Customer Name" Width="130"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.EmployeeID) TextAlign="TextAlign.Center" HeaderText="Employee ID" Width="120"></GridColumn>
    </GridColumns>
</EjsGrid>

@code{
    public class EmployeeData
    {
        public int OrderID { get; set; }
        public string CustomerID { get; set; }
        public int EmployeeID { get; set; }
    }
}

Web API adaptor

You can use the WepApiAdaptor to interact with Web APIs created with OData endpoint. The WebApiAdaptor is extended from the ODataAdaptor. Hence to use WebApiAdaptor, the endpoint should understand the OData formatted queries sent along with request.

To enable OData query option for Web API, please refer to this documentation.

The following sample code demonstrates binding remote data to the Grid component through the EjsDataManager using Web API service,

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Data
@using Syncfusion.EJ2.Blazor.Grids

<EjsGrid TValue="EmployeeData" ID="Grid">
    <EjsDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Employees" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager>
    <GridColumns>
        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID" Width="120"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="130"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.Designation) HeaderText="Designation" Width="120"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.Country) HeaderText="Country" Width="120"></GridColumn>
    </GridColumns>
</EjsGrid>

@code{
    public class EmployeeData
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string Designation { get; set; }
        public string Country { get; set; }
    }
}

WebApiAdaptor expects JSON response from the server and the response object should contain properties Items and Count whose values are collection of entities and total count of the entities respectively.

The sample response object should look like below.

{
    "Items": [{..}, {..}, {..}, ...],
    "Count": 830
}

WebMethod adaptor

You can use the WepApiAdaptor to interact with Web APIs created with OData endpoint. The WebApiAdaptor is extended from the ODataAdaptor. Hence to use WebApiAdaptor, the endpoint should understand the OData formatted queries sent along with request.

To enable OData query option for Web API, please refer to this documentation.

The following sample code demonstrates binding remote data to the Grid component through the EjsDataManager using Web method service,

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Data
@using Syncfusion.EJ2.Blazor.Grids

<EjsGrid TValue="EmployeeData" ID="Grid">
    <EjsDataManager Url="https://demoUrl/action" Adaptor="Adaptors.WebMethodAdaptor"></EjsDataManager>
    <GridColumns>
        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID" Width="120"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="130"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.Designation) HeaderText="Designation" Width="120"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.Country) HeaderText="Country" Width="120"></GridColumn>
    </GridColumns>
</EjsGrid>

@code{
    public class EmployeeData
    {
        public int EmployeeID { get; set; }
        public string FirstName { get; set; }
        public string Designation { get; set; }
        public string Country { get; set; }
    }
}

The above provided url is given for reference purpose. In that place you can provide your service url.

WebMethodAdaptor expects JSON response from the server and the response object should contain properties result and count whose values are collection of entities and total count of the entities respectively.

The sample response object should look like below.

{
    "result": [{..}, {..}, {..}, ...],
    "count": 830
}

The controller method’s data parameter name must be value.

Writing custom adaptor

Sometimes the built-in adaptors do not meet your requirements and in such cases you can create your own adaptor.

To create and use custom adaptor, please follow the following steps,

  • Create a class which extended from DataAdaptor class. DataAdaptor class will act as base class for your custom adaptor.
  • Override the desired method to achieve your requirement.
  • Assign the custom adaptor class to the AdaptorInstance property of EjsDataManager component.

You can refer to this link for more details on the working of custom adaptor.