Skip to content

Commit 14541ec

Browse files
IndrajithSrinivasanIndrajithSrinivasan
authored
Merge pull request #2879 from syncfusion-content/EJ2-866126-RibbonContent
866126: Added show/hide layout switcher topic for ribbon.
2 parents e88eeed + 8c45fe8 commit 14541ec

File tree

6 files changed

+165
-5
lines changed

6 files changed

+165
-5
lines changed

‎ej2-asp-core-mvc/code-snippet/ribbon/layouts/hideLayoutSwitcher/hideLayoutSwitcher.cs

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
public ActionResult HideLayoutSwitcher()
2+
{
3+
return View();
4+
}

‎ej2-asp-core-mvc/code-snippet/ribbon/layouts/hideLayoutSwitcher/razor

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
@{
2+
ViewBag.Title = "Home Page";
3+
}
4+
@using Syncfusion.EJ2
5+
@using Syncfusion.EJ2.Ribbon
6+
@using Syncfusion.EJ2.Navigations
7+
@using Syncfusion.EJ2.Buttons
8+
9+
@{
10+
List<MenuItem> tableOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Table" }, new MenuItem { Text = "This device" }, new MenuItem { Text = "Convert Table" }, new MenuItem { Text = "Excel SpreadSheet" } };
11+
}
12+
@Html.EJS().CheckBox("checked").Label("Show/Hide Layout Switcher").Checked(true).Change("OnChange").Render()
13+
@Html.EJS().Ribbon("ribbon").HideLayoutSwitcher(false).Tabs(tab =>
14+
{
15+
tab.Header("Home").Groups(group =>
16+
{
17+
group.Header("Clipboard").Collections(collection =>
18+
{
19+
collection.Items(items =>
20+
{
21+
items.Type(RibbonItemType.Button).ButtonSettings(button =>
22+
{
23+
button.IconCss("e-icons e-paste").Content("Paste");
24+
}).Add();
25+
}).Add();
26+
collection.Items(items =>
27+
{
28+
items.Type(RibbonItemType.Button).ButtonSettings(button =>
29+
{
30+
button.IconCss("e-icons e-cut").Content("Cut");
31+
}).Add();
32+
items.Type(RibbonItemType.Button).ButtonSettings(button =>
33+
{
34+
button.IconCss("e-icons e-copy").Content("Copy");
35+
}).Add();
36+
}).Add();
37+
}).Add();
38+
}).Add();
39+
tab.Header("Insert").Groups(groups =>
40+
{
41+
groups.Header("Tables").Collections(collections =>
42+
{
43+
collections.Items(items =>
44+
{
45+
items.Type(RibbonItemType.DropDown).DropDownSettings(dropDown =>
46+
{
47+
dropDown.IconCss("e-icons e-table").Content("Table").Items(tableOptions);
48+
}).Add();
49+
}).Add();
50+
}).Add();
51+
}).Add();
52+
}).Render()
53+
54+
<script>
55+
function OnChange(args) {
56+
var ribbonObj = document.getElementById('ribbon').ej2_instances[0];
57+
ribbonObj.hideLayoutSwitcher = !args.checked;
58+
}
59+
</script>
60+
61+
<style>
62+
#ribbon {
63+
margin-top: 30px;
64+
}
65+
</style>

‎ej2-asp-core-mvc/code-snippet/ribbon/layouts/hideLayoutSwitcher/tagHelper

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@using Syncfusion.EJ2
2+
@using Syncfusion.EJ2.Ribbon
3+
@using Syncfusion.EJ2.Navigations
4+
@using Syncfusion.EJ2.Buttons
5+
6+
@{
7+
List<MenuItem> tableOptions = new List<MenuItem>() { new MenuItem { Text = "Insert Table" }, new MenuItem { Text = "This device" }, new MenuItem { Text = "Convert Table" }, new MenuItem { Text = "Excel SpreadSheet" } };
8+
}
9+
10+
<ejs-checkbox id="default" label="Show/Hide Layout Switcher" checked="true" change="OnChange"></ejs-checkbox>
11+
<ejs-ribbon id="ribbon" hideLayoutSwitcher="false">
12+
<e-ribbon-tabs>
13+
<e-ribbon-tab header="Home">
14+
<e-ribbon-groups>
15+
<e-ribbon-group header="Clipboard">
16+
<e-ribbon-collections>
17+
<e-ribbon-collection>
18+
<e-ribbon-items>
19+
<e-ribbon-item type="Button">
20+
<e-ribbon-buttonsettings iconCss="e-icons e-paste" content="Paste"></e-ribbon-buttonsettings>
21+
</e-ribbon-item>
22+
</e-ribbon-items>
23+
</e-ribbon-collection>
24+
<e-ribbon-collection>
25+
<e-ribbon-items>
26+
<e-ribbon-item type=Button>
27+
<e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
28+
</e-ribbon-item>
29+
<e-ribbon-item type=Button>
30+
<e-ribbon-buttonsettings iconCss="e-icons e-copy" content="Copy"></e-ribbon-buttonsettings>
31+
</e-ribbon-item>
32+
</e-ribbon-items>
33+
</e-ribbon-collection>
34+
</e-ribbon-collections>
35+
</e-ribbon-group>
36+
</e-ribbon-groups>
37+
</e-ribbon-tab>
38+
<e-ribbon-tab header="Insert">
39+
<e-ribbon-groups>
40+
<e-ribbon-group header="Tables">
41+
<e-ribbon-collections>
42+
<e-ribbon-collection>
43+
<e-ribbon-items>
44+
<e-ribbon-item type=DropDown>
45+
<e-ribbon-dropdownsettings iconCss="e-icons e-table" content="Table" items="tableOptions"></e-ribbon-dropdownsettings>
46+
</e-ribbon-item>
47+
</e-ribbon-items>
48+
</e-ribbon-collection>
49+
</e-ribbon-collections>
50+
</e-ribbon-group>
51+
</e-ribbon-groups>
52+
</e-ribbon-tab>
53+
</e-ribbon-tabs>
54+
</ejs-ribbon>
55+
56+
<script>
57+
function OnChange(args) {
58+
var ribbonObj = document.getElementById('ribbon').ej2_instances[0];
59+
ribbonObj.hideLayoutSwitcher = !args.checked;
60+
}
61+
</script>
62+
63+
<style>
64+
#ribbon {
65+
margin-top: 30px;
66+
}
67+
</style>

‎ej2-asp-core-mvc/ribbon/EJ2_ASP.MVC/layouts.md

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name##
88
documentation: ug
99
---
1010

11-
# Ribbon Layouts
11+
# Layouts in ASP.NET MVC Ribbon control
1212

1313
The Ribbon allows to customize the layout by using the [ActiveLayout](https://help.syncfusion.com/cr/aspnetMVC-js2/Syncfusion.EJ2.Ribbon.Ribbon.html#Syncfusion_EJ2_Ribbon_Ribbon_ActiveLayout) property. The Ribbon control supports the following layouts:
1414

@@ -26,7 +26,7 @@ In classic layout, the Ribbon control organizes the items and groups in a tradit
2626

2727
### Defining items size
2828

29-
You can use the [AllowedSizes](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Ribbon.RibbonItem.html#Syncfusion_EJ2_Ribbon_RibbonItem_AllowedSizes) property to set the allowed size for an item. The Ribbon items can be appeared in three different sizes: Large(large icon with text), Medium(small icon with text) and Small(small icon only). On resizing, the items size can be changed based on the available width of the tab content from the order of Large-> Medium-> Small and viceversa.
29+
You can use the [AllowedSizes](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Ribbon.RibbonItem.html#Syncfusion_EJ2_Ribbon_RibbonItem_AllowedSizes) property to set the allowed size for an item. The Ribbon items can be appeared in three different sizes: Large(large icon with text), Medium(small icon with text) and Small(small icon only). On resizing, the items size can be changed based on the available width of the tab content from the order of Large-> Medium-> Small and vice versa.
3030

3131
{% tabs %}
3232
{% highlight cshtml tabtitle="CSHTML" %}
@@ -158,4 +158,16 @@ You can use the [IsMinimized](https://help.syncfusion.com/cr/aspnetMVC-js2/Syncf
158158
{% endhighlight %}
159159
{% endtabs %}
160160

161-
![ASP.NET MVC Ribbon Control in Minimized state](images/ribbon-minimize.png)
161+
![ASP.NET MVC Ribbon Control in Minimized state](images/ribbon-minimize.png)
162+
163+
## Show hide the layout switcher
164+
165+
You can use the [hideLayoutSwitcher](https://help.syncfusion.com/cr/aspnetMVC-js2/Syncfusion.EJ2.Ribbon.Ribbon.html#Syncfusion_EJ2_Ribbon_Ribbon_HideLayoutSwitcher) property to show/hide the Ribbon layout switcher button. By default, the value is `false`.
166+
167+
{% tabs %}
168+
{% highlight razor tabtitle="CSHTML" %}
169+
{% include code-snippet/ribbon/layouts/hideLayoutSwitcher/razor %}
170+
{% endhighlight %}
171+
{% endtabs %}
172+
173+
![ASP.NET MVC Ribbon Control layout switcher](./images/ribbon-layout-switcher.png)

‎ej2-asp-core-mvc/ribbon/EJ2_ASP.NETCORE/layouts.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name##
88
documentation: ug
99
---
1010

11-
# Ribbon Layouts
11+
# Layouts in ASP.NET Core Ribbon control
1212

1313
The Ribbon allows to customize the layout by using the [activeLayout](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Ribbon.Ribbon.html#Syncfusion_EJ2_Ribbon_Ribbon_ActiveLayout) property. The Ribbon control supports the following layouts:
1414

@@ -26,7 +26,7 @@ In classic layout, the Ribbon control organizes the items and groups in a tradit
2626

2727
### Defining items size
2828

29-
You can use the [allowedSizes](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Ribbon.RibbonItem.html#Syncfusion_EJ2_Ribbon_RibbonItem_AllowedSizes) property to set the allowed size for an item. The Ribbon items can be appeared in three different sizes: Large(large icon with text), Medium(small icon with text) and Small(small icon only). On resizing, the items size can be changed based on the available width of the tab content from the order of Large-> Medium-> Small and viceversa.
29+
You can use the [allowedSizes](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Ribbon.RibbonItem.html#Syncfusion_EJ2_Ribbon_RibbonItem_AllowedSizes) property to set the allowed size for an item. The Ribbon items can be appeared in three different sizes: Large(large icon with text), Medium(small icon with text) and Small(small icon only). On resizing, the items size can be changed based on the available width of the tab content from the order of Large-> Medium-> Small and vice versa.
3030

3131
{% tabs %}
3232
{% highlight cshtml tabtitle="CSHTML" %}
@@ -160,3 +160,15 @@ You can use the [isMinimized](https://help.syncfusion.com/cr/aspnetcore-js2/Sync
160160
{% endtabs %}
161161

162162
![ASP.NET Core Ribbon Control in Minimized state](./images/ribbon-minimize.png)
163+
164+
## Show or hide the layout switcher
165+
166+
You can use the [hideLayoutSwitcher](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Ribbon.Ribbon.html#Syncfusion_EJ2_Ribbon_Ribbon_HideLayoutSwitcher) property to show/hide the Ribbon layout switcher button. By default, the value is `false`.
167+
168+
{% tabs %}
169+
{% highlight cshtml tabtitle="CSHTML" %}
170+
{% include code-snippet/ribbon/layouts/hideLayoutSwitcher/tagHelper %}
171+
{% endhighlight %}
172+
{% endtabs %}
173+
174+
![ASP.NET Core Ribbon Control layout switcher](./images/ribbon-layout-switcher.png)

‎ej2-asp-core-mvc/ribbon/images/ribbon-layout-switcher.png

9.38 KB
Loading

0 commit comments

Comments
 (0)