Search results

Getting Started

This section explains about how to connect the EjsDataManager to a data source and perform queries on it in your Blazor Server-Side application. You can refer Getting Started with Syncfusion Blazor for Server-Side in Visual Studio 2019 Preview page for the introduction and configuring the common specifications.

Importing Syncfusion Blazor component in the application

  1. Install the Syncfusion.EJ2.Blazor NuGet package to the application by using the NuGet Package Manager. Please ensure to check the Include prerelease option.

  2. You can add the client-side resources through CDN or local npm package in the HEAD element of the ~/Pages/_Host.cshtml page.

    <head>
        <environment include="Development">
            <link href="https://cdn.syncfusion.com/ej2/17.3.29/fabric.css" rel="stylesheet" />
            <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.min.js"></script>
            <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ejs.interop.min.js"></script>
        </environment>
    </head>

Adding component package to the application

Open ~/_Imports.razor file and import the Syncfusion.EJ2.Blazor.Data package.

        @using Syncfusion.EJ2.Blazor.Data

Add Data Manager Component

To initialize the EjsDataManager component add the below code to your Index.razor view page which is present under ~/Pages folder.

<EjsDataManager>

</EjsDataManager>

Since the EjsDataManager component is mainly used in conjunction with Syncfusion Blazor components that supports data binding, we are going to use Blazor Grid component to depict the usage of EjsDataManager throughout this documentation.

Connection to a data source

The DataManager acts as a gateway for both local and remote data to interact with the data source based on the provided query.

Binding to JSON data

Local JSON data can be bound to the Grid component by assigning the array of objects to the Json property of the EjsDataManager component.

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

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

<EjsGrid TValue="EmployeeData" ID="Grid">
    <EjsDataManager Json=@Employees></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" }
    };
}

Binding to OData

Remote data can be bound to the Grid component by binding the EjsDataManager component to it and then assigning the service end point URL to the Url property of the EjsDataManager.

The following sample code demonstrates binding OData through the EjsDataManager to the Grid component,

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

<EjsGrid TValue="Order" ID="Grid" AllowPaging="true">
    <EjsDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" Adaptor="Adaptors.ODataAdaptor"></EjsDataManager>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="yMd" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</EjsGrid>

@code{
    public class Order {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}

Component binding

As mentioned the EjsDataManager can be used with Syncfusion components which supports data binding.

Here the EjsDataManager is bound with DropDownList component to demonstrate data binding for the components.

Local data binding

Local data can be bound to the DropDownList component by assigning the array of objects to the Json property of the EjsDataManager component.

The following sample code demonstrates binding local data through the EjsDataManager to the DropDownList component,

@using Syncfusion.EJ2.Blazor.Data
@using Syncfusion.EJ2.Blazor.DropDowns

<EjsDropDownList Placeholder="e.g. Australia" TValue="Countries">
    <EjsDataManager Json=@Country></EjsDataManager>
    <DropDownListFieldSettings Value="Name"></DropDownListFieldSettings>
</EjsDropDownList>

@code{
    public class Countries
    {
        public string Name { get; set; }

        public string Code { get; set; }
    }

    public Countries[] Country = new Countries[]
    {
        new Countries { Name = "Australia", Code = "AU" },
        new Countries { Name = "Bermuda", Code = "BM" },
        new Countries { Name = "Canada", Code = "CA" },
        new Countries { Name = "Cameroon", Code = "CM" }
    };
}

The following image represents DropDownList bound with local data through the EjsDataManager component, Local Data

Remote data binding

Remote data can be bound to the DropDownList component by binding the EjsDataManager component to it and then assigning the service end point URL to the Url property of the EjsDataManager.

The following sample code demonstrates binding remote data through the EjsDataManager to the DropDownList component,

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Data
@using Syncfusion.EJ2.Blazor.DropDowns

<EjsDropDownList Placeholder="Name" TValue="Contact">
    <EjsDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Customers" Adaptor="Adaptors.ODataV4Adaptor"></EjsDataManager>
    <DropDownListFieldSettings Value="CustomerID" Text="ContactName"></DropDownListFieldSettings>
</EjsDropDownList>

@code{
    public class Contact
    {
        public string ContactName { get; set; }

        public string CustomerID { get; set; }
    }
}

The following image represents DropDownList bound with remote data through the EjsDataManager component, Remote Data