Skip to content

Commit 2e2d703

Browse files
ManiRam94ManiRam94
authored
Merge pull request #7542 from syncfusion-content/EJ2-1006172-Hotfix
1006172: Revising getting started UG documentation content for Blazor Pivot Table
2 parents 36d2ffc + 6e4c8be commit 2e2d703

4 files changed

Lines changed: 148 additions & 76 deletions

File tree

‎blazor/pivot-table/getting-started-webapp.md‎

Lines changed: 79 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
156156

157157
## Add Import Namespaces
158158

159-
Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.PivotView` namespaces.
159+
Open the **~/Components/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.PivotView` namespaces.
160160

161161
{% tabs %}
162162
{% highlight C# tabtitle="~/_Imports.razor" %}
@@ -228,7 +228,7 @@ N> Explore the [Blazor Themes](https://blazor.syncfusion.com/documentation/appea
228228

229229
## Initializing Blazor pivot Table component
230230

231-
Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Floating Action Button component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
231+
Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table component to a Razor page located under the Pages folder (e.g., **~/Components/Pages/Home.razor**) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
232232

233233
| Interactivity Location | Render Mode | Code |
234234
| --- | --- | --- |
@@ -266,12 +266,14 @@ For demonstration purposes, a collection of objects containing sales details for
266266
{% tabs %}
267267
{% highlight razor %}
268268

269+
@page "/"
270+
269271
<SfPivotView TValue="ProductDetails">
270-
 <PivotViewDataSourceSettings DataSource="@dataSource">
271-
    </PivotViewDataSourceSettings>
272+
<PivotViewDataSourceSettings DataSource="@dataSource">
273+
</PivotViewDataSourceSettings>
272274
</SfPivotView>
273275

274-
@code{
276+
@code {
275277
public List<ProductDetails> dataSource { get; set; }
276278
protected override void OnInitialized()
277279
{
@@ -397,8 +399,10 @@ To define each field in its respective axis, configure the following basic prope
397399
{% tabs %}
398400
{% highlight razor %}
399401

402+
@page "/"
403+
400404
<SfPivotView TValue="ProductDetails" Height="300">
401-
<PivotViewDataSourceSettings DataSource="@dataSource">
405+
<PivotViewDataSourceSettings DataSource="@dataSource">
402406
<PivotViewColumns>
403407
<PivotViewColumn Name="Year"></PivotViewColumn>
404408
<PivotViewColumn Name="Quarter"></PivotViewColumn>
@@ -439,24 +443,26 @@ N> Formatting can only be applied to numeric fields in the value section of the
439443
{% tabs %}
440444
{% highlight razor %}
441445

446+
@page "/"
447+
442448
<SfPivotView TValue="ProductDetails" Height="300">
443-
 <PivotViewDataSourceSettings DataSource="@dataSource">
444-
        <PivotViewColumns>
445-
            <PivotViewColumn Name="Year"></PivotViewColumn>
446-
            <PivotViewColumn Name="Quarter"></PivotViewColumn>
447-
        </PivotViewColumns>
448-
        <PivotViewRows>
449-
            <PivotViewRow Name="Country"></PivotViewRow>
450-
            <PivotViewRow Name="Products"></PivotViewRow>
451-
        </PivotViewRows>
452-
        <PivotViewValues>
449+
<PivotViewDataSourceSettings DataSource="@dataSource">
450+
<PivotViewColumns>
451+
<PivotViewColumn Name="Year"></PivotViewColumn>
452+
<PivotViewColumn Name="Quarter"></PivotViewColumn>
453+
</PivotViewColumns>
454+
<PivotViewRows>
455+
<PivotViewRow Name="Country"></PivotViewRow>
456+
<PivotViewRow Name="Products"></PivotViewRow>
457+
</PivotViewRows>
458+
<PivotViewValues>
453459
<PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
454-
            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
455-
        </PivotViewValues>
460+
<PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
461+
</PivotViewValues>
456462
<PivotViewFormatSettings>
457463
<PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
458464
</PivotViewFormatSettings>
459-
    </PivotViewDataSourceSettings>
465+
</PivotViewDataSourceSettings>
460466
</SfPivotView>
461467

462468
@code{
@@ -484,8 +490,10 @@ To enable the field list, set the [ShowFieldList](https://help.syncfusion.com/cr
484490
{% tabs %}
485491
{% highlight razor %}
486492

493+
@page "/"
494+
487495
<SfPivotView TValue="ProductDetails" ShowFieldList="true" Height="300">
488-
<PivotViewDataSourceSettings DataSource="@dataSource">
496+
<PivotViewDataSourceSettings DataSource="@dataSource">
489497
<PivotViewColumns>
490498
<PivotViewColumn Name="Year"></PivotViewColumn>
491499
<PivotViewColumn Name="Quarter"></PivotViewColumn>
@@ -527,24 +535,26 @@ Users can also use the grouping bar to sort, filter, or remove fields quickly wi
527535
{% tabs %}
528536
{% highlight razor %}
529537

538+
@page "/"
539+
530540
<SfPivotView TValue="ProductDetails" ShowGroupingBar="true" Height="300">
531-
 <PivotViewDataSourceSettings DataSource="@dataSource">
532-
        <PivotViewColumns>
533-
            <PivotViewColumn Name="Year"></PivotViewColumn>
534-
            <PivotViewColumn Name="Quarter"></PivotViewColumn>
535-
        </PivotViewColumns>
536-
        <PivotViewRows>
537-
            <PivotViewRow Name="Country"></PivotViewRow>
538-
            <PivotViewRow Name="Products"></PivotViewRow>
539-
        </PivotViewRows>
540-
        <PivotViewValues>
541+
<PivotViewDataSourceSettings DataSource="@dataSource">
542+
<PivotViewColumns>
543+
<PivotViewColumn Name="Year"></PivotViewColumn>
544+
<PivotViewColumn Name="Quarter"></PivotViewColumn>
545+
</PivotViewColumns>
546+
<PivotViewRows>
547+
<PivotViewRow Name="Country"></PivotViewRow>
548+
<PivotViewRow Name="Products"></PivotViewRow>
549+
</PivotViewRows>
550+
<PivotViewValues>
541551
<PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
542-
            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
543-
        </PivotViewValues>
552+
<PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
553+
</PivotViewValues>
544554
<PivotViewFormatSettings>
545555
<PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
546556
</PivotViewFormatSettings>
547-
    </PivotViewDataSourceSettings>
557+
</PivotViewDataSourceSettings>
548558
</SfPivotView>
549559

550560
@code{
@@ -570,26 +580,28 @@ The following example shows how to add a field to the filter axis in a Blazor Pi
570580
{% tabs %}
571581
{% highlight razor %}
572582

583+
@page "/"
584+
573585
<SfPivotView TValue="ProductDetails" ShowGroupingBar="true" ShowFieldList="true" Height="300">
574-
 <PivotViewDataSourceSettings DataSource="@dataSource">
575-
        <PivotViewColumns>
576-
            <PivotViewColumn Name="Year"></PivotViewColumn>
577-
            <PivotViewColumn Name="Quarter"></PivotViewColumn>
578-
        </PivotViewColumns>
579-
       <PivotViewRows>
586+
<PivotViewDataSourceSettings DataSource="@dataSource">
587+
<PivotViewColumns>
588+
<PivotViewColumn Name="Year"></PivotViewColumn>
589+
<PivotViewColumn Name="Quarter"></PivotViewColumn>
590+
</PivotViewColumns>
591+
<PivotViewRows>
580592
<PivotViewRow Name="Products"></PivotViewRow>
581593
</PivotViewRows>
582594
<PivotViewFilters>
583595
<PivotViewFilter Name="Country"></PivotViewFilter>
584596
</PivotViewFilters>
585-
        <PivotViewValues>
597+
<PivotViewValues>
586598
<PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
587-
            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
588-
        </PivotViewValues>
599+
<PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
600+
</PivotViewValues>
589601
<PivotViewFormatSettings>
590602
<PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
591603
</PivotViewFormatSettings>
592-
    </PivotViewDataSourceSettings>
604+
</PivotViewDataSourceSettings>
593605
</SfPivotView>
594606

595607
@code{
@@ -621,29 +633,31 @@ Below is a sample code that shows how to set up calculated fields both through c
621633
{% tabs %}
622634
{% highlight razor %}
623635

636+
@page "/"
637+
624638
<SfPivotView TValue="ProductDetails" ShowFieldList="true" AllowCalculatedField="true" Height="300">
625-
 <PivotViewDataSourceSettings DataSource="@dataSource">
626-
        <PivotViewColumns>
627-
            <PivotViewColumn Name="Year"></PivotViewColumn>
628-
            <PivotViewColumn Name="Quarter"></PivotViewColumn>
629-
        </PivotViewColumns>
630-
        <PivotViewRows>
631-
            <PivotViewRow Name="Country"></PivotViewRow>
632-
            <PivotViewRow Name="Products"></PivotViewRow>
633-
        </PivotViewRows>
634-
        <PivotViewValues>
639+
<PivotViewDataSourceSettings DataSource="@dataSource">
640+
<PivotViewColumns>
641+
<PivotViewColumn Name="Year"></PivotViewColumn>
642+
<PivotViewColumn Name="Quarter"></PivotViewColumn>
643+
</PivotViewColumns>
644+
<PivotViewRows>
645+
<PivotViewRow Name="Country"></PivotViewRow>
646+
<PivotViewRow Name="Products"></PivotViewRow>
647+
</PivotViewRows>
648+
<PivotViewValues>
635649
<PivotViewValue Name="Sold" Caption="Unit Sold"></PivotViewValue>
636-
            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
650+
<PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
637651
<PivotViewValue Name="Total" Caption="Total Amount"></PivotViewValue>
638-
        </PivotViewValues>
639-
        <PivotViewFormatSettings>
640-
            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
652+
</PivotViewValues>
653+
<PivotViewFormatSettings>
654+
<PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
641655
<PivotViewFormatSetting Name="Total" Format="C"></PivotViewFormatSetting>
642-
        </PivotViewFormatSettings>
643-
 <PivotViewCalculatedFieldSettings>
644-
            <PivotViewCalculatedFieldSetting Name="Total" Formula="@totalPrice"></PivotViewCalculatedFieldSetting>
645-
        </PivotViewCalculatedFieldSettings>
646-
    </PivotViewDataSourceSettings>
656+
</PivotViewFormatSettings>
657+
<PivotViewCalculatedFieldSettings>
658+
<PivotViewCalculatedFieldSetting Name="Total" Formula="@totalPrice"></PivotViewCalculatedFieldSetting>
659+
</PivotViewCalculatedFieldSettings>
660+
</PivotViewDataSourceSettings>
647661
</SfPivotView>
648662

649663
@code{
@@ -670,6 +684,8 @@ The following code example shows how to display a server-side error message to t
670684
{% tabs %}
671685
{% highlight razor %}
672686

687+
@page "/"
688+
673689
<span class="error">@ErrorDetails</span>
674690
<SfPivotView TValue="PivotViewData" Width="100%" Height="450" AllowDataCompression="true" EnableVirtualization="true" ShowFieldList="true" ShowGroupingBar="true" MaxNodeLimitInMemberEditor="50">
675691
<PivotViewDataSourceSettings TValue="PivotViewData" Url="https://some.com/invalidUrl" ExpandAll="false" EnableSorting="true" EnableServerSideAggregation="true" AlwaysShowValueHeader="true">
@@ -698,7 +714,7 @@ The following code example shows how to display a server-side error message to t
698714
}
699715
</style>
700716

701-
@code{
717+
@code {
702718
public string ErrorDetails = "";
703719
public class PivotViewData
704720
{

‎blazor/pivot-table/getting-started-with-maui-app.md‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
7575

7676
## Add import namespaces
7777

78-
To use the Pivot Table component, open the **~/_Imports.razor** file and add the `Syncfusion.Blazor` and `Syncfusion.Blazor.PivotView` namespaces.
78+
To use the Pivot Table component, open the **~/Components/_Imports.razor** file and add the `Syncfusion.Blazor` and `Syncfusion.Blazor.PivotView` namespaces.
7979

8080
{% tabs %}
8181
{% highlight razor tabtitle="~/_Imports.razor" %}
@@ -126,7 +126,7 @@ namespace MauiBlazorWindow;
126126

127127
## Add stylesheet and script resources
128128

129-
To make the Pivot Table look and work correctly, add the stylesheet and script files from NuGet using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Place these in the `<head>` section of the **~/index.html** file.
129+
To make the Pivot Table look and work correctly, add the stylesheet and script files from NuGet using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Place these in the `<head>` section of the **~wwwroot/index.html** file.
130130

131131
```html
132132
<head>
@@ -143,7 +143,7 @@ N> You can learn more about adding themes to your Blazor app in the [Blazor Them
143143

144144
## Add Blazor Pivot Table component
145145

146-
Finally, add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table component to the **~/Pages/Index.razor** file to display it in your app.
146+
Finally, add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Pivot Table component to the **~/Pages/Home.razor** file to display it in your app.
147147

148148
{% tabs %}
149149
{% highlight razor %}
@@ -162,6 +162,8 @@ For demonstration purposes, a collection of objects containing sales details for
162162
{% tabs %}
163163
{% highlight razor %}
164164

165+
@page "/"
166+
165167
<SfPivotView TValue="ProductDetails">
166168
<PivotViewDataSourceSettings DataSource="@dataSource">
167169
</PivotViewDataSourceSettings>
@@ -293,6 +295,8 @@ To define each field in its respective axis, configure the following basic prope
293295
{% tabs %}
294296
{% highlight razor %}
295297

298+
@page "/"
299+
296300
<SfPivotView TValue="ProductDetails" Height="300">
297301
<PivotViewDataSourceSettings DataSource="@dataSource">
298302
<PivotViewColumns>
@@ -335,6 +339,8 @@ N> Formatting can only be applied to numeric fields in the value section of the
335339
{% tabs %}
336340
{% highlight razor %}
337341

342+
@page "/"
343+
338344
<SfPivotView TValue="ProductDetails" Height="300">
339345
<PivotViewDataSourceSettings DataSource="@dataSource">
340346
<PivotViewColumns>
@@ -394,6 +400,8 @@ To enable the field list, set the [ShowFieldList](https://help.syncfusion.com/cr
394400
{% tabs %}
395401
{% highlight razor %}
396402

403+
@page "/"
404+
397405
<SfPivotView TValue="ProductDetails" ShowFieldList="true" Height="300">
398406
<PivotViewDataSourceSettings DataSource="@dataSource">
399407
<PivotViewColumns>
@@ -437,6 +445,8 @@ Users can also use the grouping bar to sort, filter, or remove fields quickly wi
437445
{% tabs %}
438446
{% highlight razor %}
439447

448+
@page "/"
449+
440450
<SfPivotView TValue="ProductDetails" ShowGroupingBar="true" Height="300">
441451
<PivotViewDataSourceSettings DataSource="@dataSource">
442452
<PivotViewColumns>
@@ -480,6 +490,8 @@ The following example shows how to add a field to the filter axis in a Blazor Pi
480490
{% tabs %}
481491
{% highlight razor %}
482492

493+
@page "/"
494+
483495
<SfPivotView TValue="ProductDetails" ShowGroupingBar="true" ShowFieldList="true" Height="300">
484496
<PivotViewDataSourceSettings DataSource="@dataSource">
485497
<PivotViewColumns>
@@ -531,6 +543,8 @@ Below is a sample code that shows how to set up calculated fields both through c
531543
{% tabs %}
532544
{% highlight razor %}
533545

546+
@page "/"
547+
534548
<SfPivotView TValue="ProductDetails" ShowFieldList="true" AllowCalculatedField="true" Height="300">
535549
<PivotViewDataSourceSettings DataSource="@dataSource">
536550
<PivotViewColumns>
@@ -580,6 +594,8 @@ The following code example shows how to display a server-side error message to t
580594
{% tabs %}
581595
{% highlight razor %}
582596

597+
@page "/"
598+
583599
<span class="error">@ErrorDetails</span>
584600
<SfPivotView TValue="PivotViewData" Width="100%" Height="450" AllowDataCompression="true" EnableVirtualization="true" ShowFieldList="true" ShowGroupingBar="true" MaxNodeLimitInMemberEditor="50">
585601
<PivotViewDataSourceSettings TValue="PivotViewData" Url="https://some.com/invalidUrl" ExpandAll="false" EnableSorting="true" EnableServerSideAggregation="true" AlwaysShowValueHeader="true">

0 commit comments

Comments
 (0)