Skip to content

Commit b8328ae

Browse files
ManiRam94ManiRam94
authored
Merge pull request #4074 from syncfusion-content/EJ2-947317-Hotfix
947317: Including UG documentation for configuring the minimum width in the Pivot Table control
2 parents e0ab745 + 6493d43 commit b8328ae

File tree

8 files changed

+133
-1
lines changed

8 files changed

+133
-1
lines changed

‎ej2-asp-core-mvc/code-snippet/pivot-table/min-width/MinWidth.cs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
public ActionResult Index()
2+
{
3+
var data = GetPivotData();
4+
ViewBag.DataSource = data;
5+
return View();
6+
}

‎ej2-asp-core-mvc/code-snippet/pivot-table/min-width/razor

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@using Syncfusion.EJ2.PivotView
2+
3+
@Html.EJS().PivotView("PivotView").Width(250).DataSourceSettings(dataSourceSettings => dataSourceSettings.DataSource((IEnumerable<object>)ViewBag.DataSource).ExpandAll(false)
4+
.Rows(rows =>
5+
{
6+
rows.Name("Country").Add(); rows.Name("Products").Add();
7+
}).Columns(columns =>
8+
{
9+
columns.Name("Year").Caption("Year").Add(); columns.Name("Quarter").Add();
10+
}).Values(values =>
11+
{
12+
values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
13+
})).Load("onLoad").Render()
14+
15+
<script>
16+
function onLoad(args) {
17+
var pivotTableObj = document.getElementById('PivotView').ej2_instances[0];
18+
pivotTableObj.minWidth = 250;
19+
}
20+
</script>

‎ej2-asp-core-mvc/code-snippet/pivot-table/min-width/tagHelper

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<ejs-pivotview id="PivotView" width="250" load="onLoad">
2+
<e-datasourcesettings dataSource="@ViewBag.DataSource">
3+
<e-rows>
4+
<e-field name="Country"></e-field>
5+
<e-field name="Products"></e-field>
6+
</e-rows>
7+
<e-columns>
8+
<e-field name="Year" caption="Year"></e-field>
9+
<e-field name="Quarter"></e-field>
10+
</e-columns>
11+
<e-values>
12+
<e-field name="Sold" caption="Units Sold"></e-field>
13+
<e-field name="Amount" caption="Sold Amount"></e-field>
14+
</e-values>
15+
</e-datasourcesettings>
16+
</ejs-pivotview>
17+
18+
<script>
19+
function onLoad(args) {
20+
var pivotTableObj = document.getElementById('PivotView').ej2_instances[0];
21+
pivotTableObj.minWidth = 250;
22+
}
23+
</script>

‎ej2-asp-core-mvc/pivot-table/EJ2_ASP.MVC/how-to/configuring-the-pivotview-control-minimum-width.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
layout: post
3+
title: Configuring the minimum width in the Syncfusion ##Platform_Name## Pivot Table control
4+
description: Learn all about configuring the minimum width in the Syncfusion ##Platform_Name## Pivot Table control of syncfusion and more.
5+
platform: ej2-asp-core-mvc
6+
control: Configuring the minimum width in the Pivot Table control.
7+
documentation: ug
8+
publishingplatform: ##Platform_Name##
9+
---
10+
# Configuring the minimum width in the ##Platform_Name## Pivot Table control
11+
12+
The pivot table control allows you to configure its minimum width using the `minWidth` property. This property is useful for ensuring the component maintains a consistent layout and responsiveness across different screen sizes.
13+
14+
> When the pivot table has the [Grouping Bar](https://ej2.syncfusion.com/aspnetmvc/documentation/pivot-table/grouping-bar) enabled, the `minWidth` property is set to **400** pixels by default to accommodate the grouping bar UI elements. Without the [Grouping Bar](https://ej2.syncfusion.com/aspnetmvc/documentation/pivot-table/grouping-bar), the `minWidth` property defaults to **310** pixels.
15+
16+
To customize the minimum width, set the `minWidth` property to your desired value (in pixels) as shown below:
17+
18+
{% if page.publishingplatform == "aspnet-core" %}
19+
20+
{% tabs %}
21+
{% highlight cshtml tabtitle="CSHTML" %}
22+
{% include code-snippet/pivot-table/min-width/tagHelper %}
23+
{% endhighlight %}
24+
{% highlight c# tabtitle="MinWidth.cs" %}
25+
{% include code-snippet/pivot-table/min-width/MinWidth.cs %}
26+
{% endhighlight %}
27+
{% endtabs %}
28+
29+
{% elsif page.publishingplatform == "aspnet-mvc" %}
30+
31+
{% tabs %}
32+
{% highlight razor tabtitle="CSHTML" %}
33+
{% include code-snippet/pivot-table/min-width/razor %}
34+
{% endhighlight %}
35+
{% highlight c# tabtitle="MinWidth.cs" %}
36+
{% include code-snippet/pivot-table/min-width/MinWidth.cs %}
37+
{% endhighlight %}
38+
{% endtabs %}
39+
{% endif %}
40+
41+
![Configuring the minimum width in the Pivot Table control](../images/min-width.png)

‎ej2-asp-core-mvc/pivot-table/EJ2_ASP.NETCORE/how-to/configuring-the-pivotview-control-minimum-width.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
layout: post
3+
title: Configuring the minimum width in the Syncfusion ##Platform_Name## Pivot Table control
4+
description: Learn all about configuring the minimum width in the Syncfusion ##Platform_Name## Pivot Table control of syncfusion and more.
5+
platform: ej2-asp-core-mvc
6+
control: Configuring the minimum width in the Pivot Table control.
7+
documentation: ug
8+
publishingplatform: ##Platform_Name##
9+
---
10+
# Configuring the minimum width in the ##Platform_Name## Pivot Table control
11+
12+
The pivot table control allows you to configure its minimum width using the `minWidth` property. This property is useful for ensuring the component maintains a consistent layout and responsiveness across different screen sizes.
13+
14+
> When the pivot table has the [Grouping Bar](https://ej2.syncfusion.com/aspnetcore/documentation/pivot-table/grouping-bar) enabled, the `minWidth` property is set to **400** pixels by default to accommodate the grouping bar UI elements. Without the [Grouping Bar](https://ej2.syncfusion.com/aspnetcore/documentation/pivot-table/grouping-bar), the `minWidth` property defaults to **310** pixels.
15+
16+
To customize the minimum width, set the `minWidth` property to your desired value (in pixels) as shown below:
17+
18+
{% if page.publishingplatform == "aspnet-core" %}
19+
20+
{% tabs %}
21+
{% highlight cshtml tabtitle="CSHTML" %}
22+
{% include code-snippet/pivot-table/min-width/tagHelper %}
23+
{% endhighlight %}
24+
{% highlight c# tabtitle="MinWidth.cs" %}
25+
{% include code-snippet/pivot-table/min-width/MinWidth.cs %}
26+
{% endhighlight %}
27+
{% endtabs %}
28+
29+
{% elsif page.publishingplatform == "aspnet-mvc" %}
30+
31+
{% tabs %}
32+
{% highlight razor tabtitle="CSHTML" %}
33+
{% include code-snippet/pivot-table/min-width/razor %}
34+
{% endhighlight %}
35+
{% highlight c# tabtitle="MinWidth.cs" %}
36+
{% include code-snippet/pivot-table/min-width/MinWidth.cs %}
37+
{% endhighlight %}
38+
{% endtabs %}
39+
{% endif %}
40+
41+
![Configuring the minimum width in the Pivot Table control](../images/min-width.png)

‎ej2-asp-core-mvc/pivot-table/images/min-width.png

8.7 KB
Loading

‎ej2-asp-core-toc.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2079,6 +2079,7 @@
20792079
<li><a href="/ej2-asp-core/pivot-table/how-to/hide-empty-headers">Hide empty headers</a></li>
20802080
<li><a href="/ej2-asp-core/pivot-table/how-to/customizing-loading-indicator">Customizing loading indicator</a></li>
20812081
<li><a href="/ej2-asp-core/pivot-table/how-to/changing-the-pivotview-component-minimum-height">Changing the Pivot Table component's minimum height</a></li>
2082+
<li><a href="/ej2-asp-core/pivot-table/how-to/configuring-the-pivotview-control-minimum-width">Configuring the minimum width in the pivot table control</a></li>
20822083
<li><a href="/ej2-asp-core/pivot-table/how-to/chart-based-on-pivot-table-selection">Render chart control based on cell selection</a></li>
20832084
<li><a href="/ej2-asp-core/pivot-table/how-to/drill-through-grid-cell-edit-type">Drill-through grid's cell edit type</a></li>
20842085
<li><a href="/ej2-asp-core/pivot-table/how-to/show-field-list-when-pivot-table-empty">Show field list when pivot table is empty</a></li>

‎ej2-asp-mvc-toc.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2036,6 +2036,7 @@
20362036
<li><a href="/ej2-asp-mvc/pivot-table/how-to/refresh-the-field-list">Refresh the field list while change the data source</a></li>
20372037
<li><a href="/ej2-asp-mvc/pivot-table/how-to/customizing-loading-indicator">Customizing loading indicator</a></li>
20382038
<li><a href="/ej2-asp-mvc/pivot-table/how-to/changing-the-pivotview-component-minimum-height">Changing the Pivot Table component's minimum height</a></li>
2039+
<li><a href="/ej2-asp-mvc/pivot-table/how-to/configuring-the-pivotview-control-minimum-width">Configuring the minimum width in the pivot table control</a></li>
20392040
<li><a href="/ej2-asp-mvc/pivot-table/how-to/chart-based-on-pivot-table-selection">Render chart control based on cell selection</a></li>
20402041
<li><a href="/ej2-asp-mvc/pivot-table/how-to/drill-through-grid-cell-edit-type">Drill-through grid's cell edit type</a></li>
20412042
<li><a href="/ej2-asp-mvc/pivot-table/how-to/show-field-list-when-pivot-table-empty">Show field list when pivot table is empty</a></li>
@@ -2047,7 +2048,6 @@
20472048
<li><a href="/ej2-asp-mvc/pivot-table/how-to/bind-complex-data-to-the-pivot-table">Convert complex JSON to flat JSON and assign it to the pivot table</a></li>
20482049
<li><a href="/ej2-asp-mvc/pivot-table/how-to/load-pre-defined-report-in-initial-rendering">Load desired report from the report list as default</a></li>
20492050
<li><a href="/ej2-asp-mvc/pivot-table/how-to/display-value-in-hrs-min-sec-format">Display string value to pivot table values</a></li>
2050-
<li><a href="/ej2-asp-mvc/pdfviewer/how-to/custom-font-signature-field">Custom fonts for Signature and Initial fields</a></li>
20512051
</ul>
20522052
</li>
20532053
<li>

0 commit comments

Comments
 (0)