Search results

Data Binding

The pivot table uses EjsDataManager, which supports both RESTful JSON data service binding and local JavaScript object array binding. The DataSource property can be assigned either with the instance of EjsDataManager or list of objects. It supports two kinds of data binding method:

  • Local data
  • Remote data

Local Data

To bind local data to the pivot table, user can assign a list of object to the DataSource property under PivotViewDataSourceSettings class. The list data source can also be provided as an instance of the EjsDataManager class.

By default, EjsDataManager uses JsonAdaptor for local data-binding.

    @using Syncfusion.EJ2.Blazor.PivotView

    <EjsPivotView TValue="ProductDetails">
         <PivotViewDataSourceSettings DataSource="@data">
            <PivotViewColumns>
                <PivotViewColumn Name="Year"></PivotViewColumn>
                <PivotViewColumn Name="Quarter"></PivotViewColumn>
            </PivotViewColumns>
            <PivotViewRows>
                <PivotViewRow Name="Country"></PivotViewRow>
                <PivotViewRow Name="Products"></PivotViewRow>
            </PivotViewRows>
            <PivotViewValues>
                <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
                <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
            </PivotViewValues>
            <PivotViewFormatSettings>
                <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
            </PivotViewFormatSettings>
        </PivotViewDataSourceSettings>
    </EjsPivotView>

    @code{
        public List<ProductDetails> data { get; set; }
        protected override void OnInitialized()
        {
            this.data = ProductDetails.GetProductData().ToList();
           //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
        }
    }

output

Remote Data

To interact with remote data source, provide the endpoint Url within EjsDataManager class along with appropriate Adaptor. By default, EjsDataManager uses ODataAdaptor for remote data-binding.

When using EjsDataManager for data binding then the TValue must be provided explicitly in the PivotViewDataSourceSettings class.

Binding with OData services

OData is a standardized protocol for creating and consuming data. User can retrieve data from OData service using the EjsDataManager class. Refer to the following code example for remote data binding using OData service.

    @using Syncfusion.EJ2.Blazor.PivotView
    @using Syncfusion.EJ2.Blazor.Data

    <EjsPivotView TValue="OrderDetails" Width="800" Height="340">
        <PivotViewDataSourceSettings TValue="OrderDetails">
            <EjsDataManager Url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/?$top=7"   Adaptor="Syncfusion.EJ2.Blazor.Adaptors.ODataAdaptor"></EjsDataManager>
            <PivotViewColumns>
                <PivotViewColumn Name="OrderDate"></PivotViewColumn>
                <PivotViewColumn Name="ShipCity"></PivotViewColumn>
            </PivotViewColumns>
            <PivotViewRows>
                <PivotViewRow Name="OrderID"></PivotViewRow>
                <PivotViewRow Name="CustomerID"></PivotViewRow>
            </PivotViewRows>
            <PivotViewValues>
                <PivotViewValue Name="Freight"></PivotViewValue>
            </PivotViewValues>
            </PivotViewDataSourceSettings>
    </EjsPivotView>

    @code{
        public class OrderDetails
        {
            public int OrderID { get; set; }
            public string OrderDate { get; set; }
            public string CustomerID { get; set; }
            public string ShipCity { get; set; }
            public double Freight { get; set; }
        }
    }

Binding with OData V4 services

The OData V4 is an improved version of OData protocols, and the EjsDataManager class can be used to retrieve and consume OData V4 services. For more details on OData V4 services, refer to the OData documentation. To bind OData V4 service, use the ODataV4Adaptor.

    @using Syncfusion.EJ2.Blazor.PivotView
    @using Syncfusion.EJ2.Blazor.Data

    <EjsPivotView TValue="OrderDetails" Width="800" Height="340">
        <PivotViewDataSourceSettings TValue="OrderDetails">
            <EjsDataManager Url="http://services.odata.org/V4/Northwind/Northwind.svc/Orders/"   Adaptor="Syncfusion.EJ2.Blazor.Adaptors.ODataV4Adaptor"></EjsDataManager>
            <PivotViewColumns>
                <PivotViewColumn Name="OrderDate"></PivotViewColumn>
                <PivotViewColumn Name="ShipCity"></PivotViewColumn>
            </PivotViewColumns>
            <PivotViewRows>
                <PivotViewRow Name="OrderID"></PivotViewRow>
                <PivotViewRow Name="CustomerID"></PivotViewRow>
            </PivotViewRows>
            <PivotViewValues>
                <PivotViewValue Name="Freight"></PivotViewValue>
            </PivotViewValues>
            </PivotViewDataSourceSettings>
    </EjsPivotView>

    @code{
        public class OrderDetails
        {
            public int OrderID { get; set; }
            public string OrderDate { get; set; }
            public string CustomerID { get; set; }
            public string ShipCity { get; set; }
            public double Freight { get; set; }
        }
    }

Web API

User can use WebApiAdaptor to bind pivot table with Web API created using OData endpoint.

    @using Syncfusion.EJ2.Blazor.PivotView
    @using Syncfusion.EJ2.Blazor.Data

    <EjsPivotView TValue="OrderDetails">
        <PivotViewDataSourceSettings TValue="ProductDetails" ExpandAll="true" EnableSorting="true">
            <EjsDataManager Url="https://bi.syncfusion.com/northwindservice/api/orders" Adaptor="Syncfusion.EJ2.Blazor.Adaptors.WebApiAdaptor"></EjsDataManager>
            <PivotViewColumns>
                <PivotViewColumn Name="ProductName"></PivotViewColumn>
            </PivotViewColumns>
            <PivotViewRows>
                <PivotViewRow Name="ShipCountry"></PivotViewRow>
                <PivotViewRow Name="ShipCity"></PivotViewRow>
            </PivotViewRows>
            <PivotViewValues>
                <PivotViewValue Name="Quantity" Caption="Quantity"></PivotViewValue>
                <PivotViewValue Name="UnitPrice" Caption="Unit Price"></PivotViewValue>
            </PivotViewValues>
            <PivotViewFormatSettings>
                <PivotViewFormatSetting Name="UnitPrice" Format="C"></PivotViewFormatSetting>
            </PivotViewFormatSettings>
            </PivotViewDataSourceSettings>
    </EjsPivotView>

    @code{
        public class ProductDetails
        {
           public int Quantity { get; set; }
           public double UnitPrice { get; set; }
           public string ProductName { get; set; }
           public string ShipCountry { get; set; }
           public string ShipCity { get; set; }
        }
    }

Values in row axis

By default, the value fields are plotted in column axis. To plot those fields in row axis, use the ValueAxis property by setting its value as row. By default, it holds the value column.

    @using Syncfusion.EJ2.Blazor.PivotView

    <EjsPivotView TValue="ProductDetails">
         <PivotViewDataSourceSettings DataSource="@data" ValueAxis="row">
            <PivotViewColumns>
                <PivotViewColumn Name="Year"></PivotViewColumn>
                <PivotViewColumn Name="Quarter"></PivotViewColumn>
            </PivotViewColumns>
            <PivotViewRows>
                <PivotViewRow Name="Country"></PivotViewRow>
                <PivotViewRow Name="Products"></PivotViewRow>
            </PivotViewRows>
            <PivotViewValues>
                <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
                <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
            </PivotViewValues>
            <PivotViewFormatSettings>
                <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
            </PivotViewFormatSettings>
        </PivotViewDataSourceSettings>
    </EjsPivotView>

    @code{
        public List<ProductDetails> data { get; set; }
        protected override void OnInitialized()
        {
            this.data = ProductDetails.GetProductData().ToList();
           //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
        }
    }

output

Show ‘no data’ items

By default, the pivot table only shows the field item if it has data in its row or column combination. To show all items that do not have data in row and column combination in the pivot table, use the ShowNoDataItems property by settings its value to true for the desired fields. In the following code sample, rows of the “County” and “State” fields do not have data in all combination with “Date” column field.

    @using Syncfusion.EJ2.Blazor.PivotView

    <EjsPivotView TValue="ProductDetails">
         <PivotViewDataSourceSettings DataSource="@data" ExpandAll="true">
            <PivotViewColumns>
                <PivotViewColumn Name="Year" ShowNoDataItems="true"></PivotViewColumn>
                <PivotViewColumn Name="Quarter" ShowNoDataItems="true"></PivotViewColumn>
            </PivotViewColumns>
            <PivotViewRows>
                <PivotViewRow Name="Country" ShowNoDataItems="true"></PivotViewRow>
                <PivotViewRow Name="Products" ShowNoDataItems="true"></PivotViewRow>
            </PivotViewRows>
            <PivotViewValues>
                <PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
                <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
            </PivotViewValues>
            <PivotViewFormatSettings>
                <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
            </PivotViewFormatSettings>
        </PivotViewDataSourceSettings>
    </EjsPivotView>

    @code{
        public List<ProductDetails> data { get; set; }
        protected override void OnInitialized()
        {
            this.data = ProductDetails.GetProductData().ToList();
           //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
        }
    }

output

Show value headers always

To show value header always in pivot table, even if it holds a single value, use the AlwaysShowValueHeader property by settings its value as true.

    @using Syncfusion.EJ2.Blazor.PivotView

    <EjsPivotView TValue="ProductDetails">
         <PivotViewDataSourceSettings DataSource="@data" AlwaysShowValueHeader="true">
            <PivotViewColumns>
                <PivotViewColumn Name="Year"></PivotViewColumn>
                <PivotViewColumn Name="Quarter"></PivotViewColumn>
            </PivotViewColumns>
            <PivotViewRows>
                <PivotViewRow Name="Country"></PivotViewRow>
                <PivotViewRow Name="Products"></PivotViewRow>
            </PivotViewRows>
            <PivotViewValues>
                <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
            </PivotViewValues>
            <PivotViewFormatSettings>
                <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
            </PivotViewFormatSettings>
        </PivotViewDataSourceSettings>
    </EjsPivotView>

    @code{
        public List<ProductDetails> data { get; set; }
        protected override void OnInitialized()
        {
            this.data = ProductDetails.GetProductData().ToList();
           //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
        }
    }

output

Customize empty value cells

User can show custom string in empty value cells using the EmptyCellsTextContent property in PivotViewDataSourceSettings class of the pivot table. Since the property is of string data type, user can fill empty value cells with any value like “0”, ”-”, ”*”, “(blank)”, etc. Its common for all value fields and can be configured through code behind.

    @using Syncfusion.EJ2.Blazor.PivotView

    <EjsPivotView TValue="ProductDetails">
        <PivotViewDataSourceSettings DataSource="@data" EmptyCellsTextContent="**" ExpandAll="true">
            <PivotViewColumns>
                <PivotViewColumn Name="Year"></PivotViewColumn>
                <PivotViewColumn Name="Quarter"></PivotViewColumn>
            </PivotViewColumns>
            <PivotViewRows>
                <PivotViewRow Name="Country"></PivotViewRow>
                <PivotViewRow Name="Products"></PivotViewRow>
            </PivotViewRows>
            <PivotViewValues>
                <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
                <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
            </PivotViewValues>
        </PivotViewDataSourceSettings>
    </EjsPivotView>

    @code{
        public List<ProductDetails> data { get; set; }
        protected override void OnInitialized()
        {
            this.data = ProductDetails.GetProductData().ToList();
           //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
        }
    }

output

Event

The event OnLoad fires before initiate rendering of pivot table. It holds following parameters likeDataSourceSettings, FieldsType and PivotView. In this event user can customize data source settings before initiating pivot table render module.

    @using Syncfusion.EJ2.Blazor.PivotView

    <EjsPivotView TValue="ProductDetails" ShowGroupingBar="true">
        <PivotViewDataSourceSettings DataSource="@data" EmptyCellsTextContent="**" ExpandAll="true">
            <PivotViewColumns>
                <PivotViewColumn Name="Year"></PivotViewColumn>
                <PivotViewColumn Name="Quarter"></PivotViewColumn>
            </PivotViewColumns>
            <PivotViewRows>
                <PivotViewRow Name="Country"></PivotViewRow>
                <PivotViewRow Name="Products"></PivotViewRow>
            </PivotViewRows>
            <PivotViewValues>
                <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
                <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
            </PivotViewValues>
            <PivotViewEvents TValue="ProductDetails" OnLoad="load"></PivotViewEvents>
        </PivotViewDataSourceSettings>
    </EjsPivotView>

    @code{
        public List<ProductDetails> data { get; set; }
        protected override void OnInitialized()
        {
            this.data = ProductDetails.GetProductData().ToList();
           //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
        }
        public void load(LoadEventArgs<ProductDetails> args)
        {
            args.DataSourceSettings.EmptyCellsTextContent = "###";
            args.DataSourceSettings.Columns[0].Caption = "Full Year";
            args.DataSourceSettings.ExpandAll = false;
        }
    }

output