@section MetaTags{
   <meta name="description" content="This example demonstrates how to localize the Ribbon in a ASP.NET Web MVC." >
}

@section SampleHeading{
    <span class="sampleName">Ribbon-Localization-ASP.NET MVC-SYNCFUSION</span>
}
@section ScriptReferenceSection{
    <script src="@Url.Content("~/Scripts/cultures/ej.culture.de-DE.min.js")"></script>
    <script src="@Url.Content("~/Scripts/cultures/ej.culture.es-ES.min.js")"></script>
}
@using Syncfusion.JavaScript.Models;
@section ControlsSection{
    @(Html.EJ().Ribbon("defaultRibbon")
     .Width("100%")
     .Locale("de-DE")
     .ShowQAT(true)
	  .ExpandPinSettings(exPin =>
       {
         exPin.ToolTip("Collapse the Ribbon");
       })
     .CollapsePinSettings(colPin =>
        {
         colPin.ToolTip("Pin the Ribbon");
        }) 
     .ApplicationTab(apptab =>
     {
        apptab.Type(ApplicationTabType.Menu).MenuItemID("ribbonmenu").MenuSettings(new MenuProperties()
               {
                   OpenOnClick = false
               });
    })
    .RibbonTabs(tab =>
    {
        tab.Id("home").Text("HOME").TabGroups(tabgrp =>
        {
            tabgrp.Text("Clipboard").AlignType(RibbonAlignType.Columns).Content(cnt =>
            {
                cnt.ContentGroups(cntgrp =>
                {
                    cntgrp.Id("paste").Text("Paste").ToolTip("Paste").QuickAccessMode(QuickAccessMode.ToolBar).SplitButtonSettings(new SplitButtonProperties()
                    {
                        ContentType = ContentType.ImageOnly,
                        PrefixIcon = "e-icon e-ribbon e-ribbonpaste",
                        TargetID = "pasteSplit",
                        ArrowPosition = ArrowPosition.Bottom,
                        ButtonMode = ButtonMode.Dropdown,
                        Click = "executeAction"
                    }).Add();
                }).ContentDefaults(df => df.Type(RibbonButtonType.SplitButton).Width("50px").Height("70px")).Add();
               }).Add();
            tabgrp.Text("Font").AlignType(RibbonAlignType.Rows).Content(cnt =>
            {
                cnt.ContentGroups(cntgrp =>
                {
                    cntgrp.Id("bold").ToolTip("Bold").QuickAccessMode(QuickAccessMode.ToolBar).Type(RibbonButtonType.ToggleButton).ToggleButtonSettings(new ToggleButtonProperties()
                    {
                        ContentType = ContentType.ImageOnly,
                        DefaultText = "Bold",
                        ActiveText = "Bold",
                        DefaultPrefixIcon = "e-icon e-ribbon bold",
                        ActivePrefixIcon = "e-icon e-ribbon bold",
                        Click = "executeAction"
                    }).Add();
                    cntgrp.Id("italic").ToolTip("Italic").QuickAccessMode(QuickAccessMode.ToolBar).Type(RibbonButtonType.ToggleButton).ToggleButtonSettings(new ToggleButtonProperties()
                    {
                        ContentType = ContentType.ImageOnly,
                        DefaultText = "Italic",
                        ActiveText = "Italic",
                        DefaultPrefixIcon = "e-icon e-ribbon e-ribbonitalic",
                        ActivePrefixIcon = "e-icon e-ribbon e-ribbonitalic",
                        Click = "executeAction"
                    }).Add();
                    cntgrp.Id("underline").ToolTip("Underline").QuickAccessMode(QuickAccessMode.ToolBar).Type(RibbonButtonType.ToggleButton).ToggleButtonSettings(new ToggleButtonProperties()
                    {
                        ContentType = ContentType.ImageOnly,
                        DefaultText = "Underline",
                        ActiveText = "Underline",
                        DefaultPrefixIcon = "e-icon e-ribbon e-ribbonunderline",
                        ActivePrefixIcon = "e-icon e-ribbon e-ribbonunderline",
                        Click = "executeAction"
                    }).Add();
                }).ContentDefaults(df => df.IsBig(false)).Add();
				 cnt.ContentGroups(cntgrp =>
                {
                    cntgrp.Id("strikethrough").ToolTip("Strikethrough").Type(RibbonButtonType.ToggleButton).ToggleButtonSettings(new ToggleButtonProperties()
                    {
                        ContentType = ContentType.ImageOnly,
                        DefaultText = "Strikethrough",
                        ActiveText = "Strikethrough",
                        DefaultPrefixIcon = "e-icon e-ribbon strikethrough",
                        ActivePrefixIcon = "e-icon e-ribbon strikethrough",
                        Click = "executeAction"
                    }).Add();
                    cntgrp.Id("superscript").Text("Superscript").ToolTip("Superscript").ButtonSettings(new ButtonProperties()
                    {
                        ContentType = ContentType.ImageOnly,
                        PrefixIcon = "e-icon e-ribbon e-superscripticon",
                        Click = "executeAction"
                    }).Add();
                    cntgrp.Id("subscript").Text("Subscript").ToolTip("Subscript").ButtonSettings(new ButtonProperties()
                    {
                        ContentType = ContentType.ImageOnly,
                        PrefixIcon = "e-icon e-ribbon e-subscripticon",
                        Click = "executeAction"
                    }).Add();
                }).ContentDefaults(df => df.IsBig(false)).Add();
            }).Add();
            tabgrp.Text("Alignment").AlignType(RibbonAlignType.Rows).Content(cnt =>
            {
                cnt.ContentGroups(cntgrp =>
                {
                    cntgrp.Id("bullet").Text("Bullet Format").QuickAccessMode(QuickAccessMode.ToolBar).ToolTip("Bullets").ButtonSettings(new ButtonProperties()
                    {
                        ContentType = ContentType.ImageOnly,
                        PrefixIcon = "e-icon e-ribbon e-bullet",
                        Click = "executeAction"
                    }).Add();
                    cntgrp.Id("number").Text("Number Format").QuickAccessMode(QuickAccessMode.ToolBar).ToolTip("Numbering").ButtonSettings(new ButtonProperties()
                    {
                        ContentType = ContentType.ImageOnly,
                        PrefixIcon = "e-icon e-ribbon e-numbericon",
                        Click = "executeAction"
                    }).Add();
                    cntgrp.Id("sortascending").Text("Sort").ToolTip("Sort").QuickAccessMode(QuickAccessMode.ToolBar).ButtonSettings(new ButtonProperties()
                    {
                        ContentType = ContentType.ImageOnly,
                        PrefixIcon = "e-icon e-ribbon e-sort",
                        Click = "executeAction"
                    }).Add();
                }).ContentDefaults(df => df.Type(RibbonButtonType.Button).IsBig(false)).Add();
                cnt.ContentGroups(cntgrp =>
                {
                    cntgrp.Id("alignleft").Text("JustifyLeft").ToolTip("Align Left").ButtonSettings(new ButtonProperties()
                    {
                        ContentType = ContentType.ImageOnly,
                        PrefixIcon = "e-icon e-ribbon alignleft",
                        Click = "executeAction"
                    }).Add();
                    cntgrp.Id("aligncenter").Text("JustifyCenter").ToolTip("Align Center").ButtonSettings(new ButtonProperties()
                    {
                        ContentType = ContentType.ImageOnly,
                        PrefixIcon = "e-icon e-ribbon aligncenter",
                        Click = "executeAction"
                    }).Add();
                    cntgrp.Id("alignright").Text("JustifyRight").ToolTip("Align Right").ButtonSettings(new ButtonProperties()
                    {
                        ContentType = ContentType.ImageOnly,
                        PrefixIcon = "e-icon e-ribbon alignright",
                        Click = "executeAction"
                    }).Add();
                }).ContentDefaults(df => df.Type(RibbonButtonType.Button).IsBig(false)).Add();
            }).Add();
            tabgrp.Text("Actions").AlignType(RibbonAlignType.Rows).Content(cnt =>
            {
                cnt.ContentGroups(cntgrp =>
                {
                    cntgrp.Id("undo").Text("Undo").ToolTip("Undo").ButtonSettings(new ButtonProperties()
                    {
                        ContentType = ContentType.TextAndImage,
                        ImagePosition = ImagePosition.ImageTop,
                        PrefixIcon = "e-icon e-ribbon e-undo",
                        Click = "executeAction"
                    }).Add();
                    cntgrp.Id("redo").Text("Redo").ToolTip("Redo").ButtonSettings(new ButtonProperties()
                    {
                        ContentType = ContentType.TextAndImage,
                        ImagePosition = ImagePosition.ImageTop,
                        PrefixIcon = "e-icon e-ribbon e-redo",
                        Click = "executeAction"
                    }).Add();
                }).ContentDefaults(df => df.Type(RibbonButtonType.Button).Width("40px").Height("70px")).Add();
            }).Add();
        }).Add();
        tab.Id("insert").Text("INSERT").TabGroups(tabgrp =>
        {
            tabgrp.Text("Tables").AlignType(RibbonAlignType.Columns).Content(cnt =>
            {
                cnt.ContentGroups(cntgrp =>
                {
                    cntgrp.Id("tables").Text("Tables").ToolTip("Tables").ButtonSettings(new ButtonProperties()
                    {
                        ContentType = ContentType.TextAndImage,
                        ImagePosition = ImagePosition.ImageTop,
                        PrefixIcon = "e-icon e-ribbon e-table",
                        Click = "executeAction"
                    }).Add();
                }).ContentDefaults(df => df.Type(RibbonButtonType.Button).Width("50px").Height("70px")).Add();
            }).Add();
            tabgrp.Text("Illustrations").AlignType(RibbonAlignType.Rows).Content(cnt =>
            {
                cnt.ContentGroups(cntgrp =>
                {
                    cntgrp.Id("pictures").Text("Pictures").ToolTip("Pictures").ButtonSettings(new ButtonProperties()
                    {
                        ContentType = ContentType.TextAndImage,
                        ImagePosition = ImagePosition.ImageTop,
                        PrefixIcon = "e-icon e-ribbon e-picture",
                        Click = "executeAction"
                    }).Add();
                    cntgrp.Id("videos").Text("Videos").ToolTip("Videos").ButtonSettings(new ButtonProperties()
                    {
                        ContentType = ContentType.TextAndImage,
                        ImagePosition = ImagePosition.ImageTop,
                        PrefixIcon = "e-icon e-ribbon e-video",
                        Click = "executeAction"
                    }).Add();
                    cntgrp.Id("shapes").Text("Shapes").ToolTip("Shapes").ButtonSettings(new ButtonProperties()
                    {
                        ContentType = ContentType.TextAndImage,
                        ImagePosition = ImagePosition.ImageTop,
                        PrefixIcon = "e-icon e-ribbon e-shape",
                        Click = "executeAction"
                    }).Add();
                    cntgrp.Id("charts").Text("Charts").ToolTip("Charts").ButtonSettings(new ButtonProperties()
                    {
                        ContentType = ContentType.TextAndImage,
                        ImagePosition = ImagePosition.ImageTop,
                        PrefixIcon = "e-icon e-ribbon e-chart",
                        Click = "executeAction"
                    }).Add();
                }).ContentDefaults(df => df.Type(RibbonButtonType.Button).Width("56px").Height("70px")).Add();
            }).Add();
            tabgrp.Text("Comments").AlignType(RibbonAlignType.Rows).Content(cnt =>
            {
                cnt.ContentGroups(cntgrp =>
                {
                    cntgrp.Id("comments").Text("Comments").ToolTip("Comments").ButtonSettings(new ButtonProperties()
                    {
                        ContentType = ContentType.TextAndImage,
                        ImagePosition = ImagePosition.ImageTop,
                        PrefixIcon = "e-icon e-ribbon e-comment",
                        Click = "executeAction"
                    }).Add();
                }).ContentDefaults(df => df.Type(RibbonButtonType.Button).Width("70px").Height("70px")).Add();
            }).Add();
       }).Add();
    }).ClientSideEvents(evt => evt.Create("createControl").QatMenuItemClick("qatMenuItemClick"))
    )

    <ul id="ribbonmenu">
        <li>
            <a>FILE</a>
            <ul>
                <li><a>New</a></li>
                <li><a>Open</a></li>
                <li><a>Save</a></li>
                <li><a>Save As</a></li>
                <li><a>Print</a></li>
            </ul>
        </li>
    </ul>

    <ul id="pasteSplit">
        <li><a>Paste</a></li>
    </ul>
    }
@section PropertiesSection{
    <div id="ddl">
        <ul>
            <li>English</li>
            <li>Deutsch</li>
            <li>Español</li>
        </ul>
    </div>
    <div class="row">
        <div class="col-md-3">
            Selection Type
        </div>
        <div class="col-md-3">
            @(Html.EJ().DropDownList("language")
                .TargetID("ddl")
                .SelectedItemIndex(1)
                .ClientSideEvents(eve => eve.Change("onChange"))
                .Width("120px")
                )
        </div>
    </div>
}
@section ScriptSection{
    <script type="text/javascript">
        $(function () {
            $("#sampleProperties").ejPropertiesPanel();
        });
        function onChange(args) {
            if (args.itemId == 0)
                $("#defaultRibbon").ejRibbon("model.locale", "en-US");
            else if (args.itemId == 1)
                $("#defaultRibbon").ejRibbon("model.locale", "de-DE");
            else
                $("#defaultRibbon").ejRibbon("model.locale", "es-ES");
        }
        ej.Ribbon.Locale["es-ES"] = {
           CustomizeQuickAccess:"Agordu Rapida Aliro",
		   RemoveFromQuickAccessToolbar:"Forigu de Rapida Aliro Ilobreto",
		   AddToQuickAccessToolbar:"Aldoni al Rapida Aliro Ilobreto",
		   ShowAboveTheRibbon:"Montru Super la Ribbona",
		   ShowBelowTheRibbon:"Montru Sube la Ribbon",
		   MoreCommands:"pli Komando"
        };

        ej.Ribbon.Locale["de-DE"] = {
           CustomizeQuickAccess:"Aanpassen Quick Access", 
		   RemoveFromQuickAccessToolbar:"Verwijderen uit werkbalk Snelle toegang",
		   AddToQuickAccessToolbar:"Toevoegen aan werkbalk Snelle toegang",
           ShowAboveTheRibbon:"Toon Boven het lint",
		   ShowBelowTheRibbon:"Onder het lint weergeven",
		   MoreCommands:"meer Command"
         		   
        };
    </script>
}

@section StyleSection{
    <link href="~/Content/ejthemes/ribbon-css/ej.icons.css" rel="stylesheet" />
    <style>
        .e-ribbon.e-js .e-rbnquickaccessbar .e-ribbon.e-ribbonpaste:before {
            font-size: 27px;
            left: -5px;
            top: -6px;
        }
		.row .cols-sample-area {
           min-height: 490px !important;
        }
    </style>
}