866126: Added show/hide layout switcher topic for ribbon.

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

@@ -0,0 +1,4 @@
+public ActionResult HideLayoutSwitcher()
+{
+    return View();
+}

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

@@ -0,0 +1,65 @@
+@{
+    ViewBag.Title = "Home Page";
+}
+@using Syncfusion.EJ2
+@using Syncfusion.EJ2.Ribbon
+@using Syncfusion.EJ2.Navigations
+@using Syncfusion.EJ2.Buttons
+
+@{
+    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" } };
+}
+@Html.EJS().CheckBox("checked").Label("Show/Hide Layout Switcher").Checked(true).Change("OnChange").Render()
+@Html.EJS().Ribbon("ribbon").HideLayoutSwitcher(false).Tabs(tab =>
+{
+    tab.Header("Home").Groups(group =>
+    {
+        group.Header("Clipboard").Collections(collection =>
+        {
+            collection.Items(items =>
+            {
+                items.Type(RibbonItemType.Button).ButtonSettings(button =>
+                {
+                    button.IconCss("e-icons e-paste").Content("Paste");
+                }).Add();
+            }).Add();
+            collection.Items(items =>
+            {
+                items.Type(RibbonItemType.Button).ButtonSettings(button =>
+                {
+                    button.IconCss("e-icons e-cut").Content("Cut");
+                }).Add();
+                items.Type(RibbonItemType.Button).ButtonSettings(button =>
+                {
+                    button.IconCss("e-icons e-copy").Content("Copy");
+                }).Add();
+            }).Add();
+        }).Add();
+    }).Add();
+    tab.Header("Insert").Groups(groups =>
+    {
+        groups.Header("Tables").Collections(collections =>
+        {
+            collections.Items(items =>
+            {
+                items.Type(RibbonItemType.DropDown).DropDownSettings(dropDown =>
+                {
+                    dropDown.IconCss("e-icons e-table").Content("Table").Items(tableOptions);
+                }).Add();
+            }).Add();
+        }).Add();
+    }).Add();
+}).Render()
+
+<script>
+    function OnChange(args) {
+        var ribbonObj = document.getElementById('ribbon').ej2_instances[0];
+        ribbonObj.hideLayoutSwitcher = !args.checked;
+    }
+</script>
+
+<style>
+    #ribbon {
+        margin-top: 30px;
+    }
+</style>

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

@@ -0,0 +1,67 @@
+@using Syncfusion.EJ2
+@using Syncfusion.EJ2.Ribbon
+@using Syncfusion.EJ2.Navigations
+@using Syncfusion.EJ2.Buttons
+
+@{
+    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" } };
+}
+
+<ejs-checkbox id="default" label="Show/Hide Layout Switcher" checked="true" change="OnChange"></ejs-checkbox>
+<ejs-ribbon id="ribbon" hideLayoutSwitcher="false">
+    <e-ribbon-tabs>
+        <e-ribbon-tab header="Home">
+            <e-ribbon-groups>
+                <e-ribbon-group header="Clipboard">
+                    <e-ribbon-collections>
+                        <e-ribbon-collection>
+                            <e-ribbon-items>
+                                <e-ribbon-item type="Button">
+                                    <e-ribbon-buttonsettings iconCss="e-icons e-paste" content="Paste"></e-ribbon-buttonsettings>
+                                </e-ribbon-item>
+                            </e-ribbon-items>
+                        </e-ribbon-collection>
+                        <e-ribbon-collection>
+                            <e-ribbon-items>
+                                <e-ribbon-item type=Button>
+                                    <e-ribbon-buttonsettings iconCss="e-icons e-cut" content="Cut"></e-ribbon-buttonsettings>
+                                </e-ribbon-item>
+                                <e-ribbon-item type=Button>
+                                    <e-ribbon-buttonsettings iconCss="e-icons e-copy" content="Copy"></e-ribbon-buttonsettings>
+                                </e-ribbon-item>
+                            </e-ribbon-items>
+                        </e-ribbon-collection>
+                    </e-ribbon-collections>
+                </e-ribbon-group>
+            </e-ribbon-groups>
+        </e-ribbon-tab>
+        <e-ribbon-tab header="Insert">
+            <e-ribbon-groups>
+                <e-ribbon-group header="Tables">
+                    <e-ribbon-collections>
+                        <e-ribbon-collection>
+                            <e-ribbon-items>
+                                <e-ribbon-item type=DropDown>
+                                    <e-ribbon-dropdownsettings iconCss="e-icons e-table" content="Table" items="tableOptions"></e-ribbon-dropdownsettings>
+                                </e-ribbon-item>
+                            </e-ribbon-items>
+                        </e-ribbon-collection>
+                    </e-ribbon-collections>
+                </e-ribbon-group>
+            </e-ribbon-groups>
+        </e-ribbon-tab>
+    </e-ribbon-tabs>
+</ejs-ribbon>
+
+<script>
+    function OnChange(args) {
+        var ribbonObj = document.getElementById('ribbon').ej2_instances[0];
+        ribbonObj.hideLayoutSwitcher = !args.checked;
+    }
+</script>
+
+<style>
+    #ribbon {
+        margin-top: 30px;
+    }
+</style>

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

@@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Ribbon Layouts
+# Layouts in ASP.NET MVC Ribbon control
 
 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:
 
@@ -26,7 +26,7 @@ In classic layout, the Ribbon control organizes the items and groups in a tradit
 
 ### Defining items size
 
-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.
+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.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -158,4 +158,16 @@ You can use the [IsMinimized](https://help.syncfusion.com/cr/aspnetMVC-js2/Syncf
 {% endhighlight %}
 {% endtabs %}
 
-![ASP.NET MVC Ribbon Control in Minimized state](images/ribbon-minimize.png)
+![ASP.NET MVC Ribbon Control in Minimized state](images/ribbon-minimize.png)
+
+## Show hide the layout switcher
+
+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`.
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/ribbon/layouts/hideLayoutSwitcher/razor %}
+{% endhighlight %}
+{% endtabs %}
+
+![ASP.NET MVC Ribbon Control layout switcher](./images/ribbon-layout-switcher.png)

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

@@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name##
 documentation: ug
 ---
 
-# Ribbon Layouts
+# Layouts in ASP.NET Core Ribbon control
 
 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:
 
@@ -26,7 +26,7 @@ In classic layout, the Ribbon control organizes the items and groups in a tradit
 
 ### Defining items size
 
-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.
+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.
 
 {% tabs %}
 {% highlight cshtml tabtitle="CSHTML" %}
@@ -160,3 +160,15 @@ You can use the [isMinimized](https://help.syncfusion.com/cr/aspnetcore-js2/Sync
 {% endtabs %}
 
 ![ASP.NET Core Ribbon Control in Minimized state](./images/ribbon-minimize.png)
+
+## Show or hide the layout switcher
+
+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`.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/ribbon/layouts/hideLayoutSwitcher/tagHelper %}
+{% endhighlight %}
+{% endtabs %}
+
+![ASP.NET Core Ribbon Control layout switcher](./images/ribbon-layout-switcher.png)