diff --git a/ej2-asp-core-mvc/code-snippet/ribbon/layouts/hideLayoutSwitcher/hideLayoutSwitcher.cs b/ej2-asp-core-mvc/code-snippet/ribbon/layouts/hideLayoutSwitcher/hideLayoutSwitcher.cs new file mode 100644 index 0000000000..1314613a3a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/ribbon/layouts/hideLayoutSwitcher/hideLayoutSwitcher.cs @@ -0,0 +1,4 @@ +public ActionResult HideLayoutSwitcher() +{ + return View(); +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ribbon/layouts/hideLayoutSwitcher/razor b/ej2-asp-core-mvc/code-snippet/ribbon/layouts/hideLayoutSwitcher/razor new file mode 100644 index 0000000000..8c856b5e80 --- /dev/null +++ b/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 tableOptions = new List() { 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() + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/ribbon/layouts/hideLayoutSwitcher/tagHelper b/ej2-asp-core-mvc/code-snippet/ribbon/layouts/hideLayoutSwitcher/tagHelper new file mode 100644 index 0000000000..96990e9235 --- /dev/null +++ b/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 tableOptions = new List() { new MenuItem { Text = "Insert Table" }, new MenuItem { Text = "This device" }, new MenuItem { Text = "Convert Table" }, new MenuItem { Text = "Excel SpreadSheet" } }; +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/ribbon/EJ2_ASP.MVC/layouts.md b/ej2-asp-core-mvc/ribbon/EJ2_ASP.MVC/layouts.md index d98e18bfef..3269cd492a 100644 --- a/ej2-asp-core-mvc/ribbon/EJ2_ASP.MVC/layouts.md +++ b/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) \ No newline at end of file +![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) \ No newline at end of file diff --git a/ej2-asp-core-mvc/ribbon/EJ2_ASP.NETCORE/layouts.md b/ej2-asp-core-mvc/ribbon/EJ2_ASP.NETCORE/layouts.md index af2d774bcc..ab56a3bf57 100644 --- a/ej2-asp-core-mvc/ribbon/EJ2_ASP.NETCORE/layouts.md +++ b/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) diff --git a/ej2-asp-core-mvc/ribbon/images/ribbon-layout-switcher.png b/ej2-asp-core-mvc/ribbon/images/ribbon-layout-switcher.png new file mode 100644 index 0000000000..e8ecd944fa Binary files /dev/null and b/ej2-asp-core-mvc/ribbon/images/ribbon-layout-switcher.png differ