Create right-to-left SplitButton

17 Feb 20223 minutes to read

SplitButton component has RTL support. This can be achieved by setting enableRtl as true.

The following example illustrates how to enable right-to-left support in SplitButton component.

<ejs-splitbutton id="rtl" content="Message" items="ViewBag.items" iconCss="e-sb e-sigma" enableRtl="true"></ejs-splitbutton>

<style>

/* csslint ignore:start */
@@font-face {
  font-family: 'sb-icon';
  src:
  url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRsAAAEoAAAAVmNtYXDnEOdVAAABiAAAADZnbHlmFjFe0gAAAcgAAABIaGVhZBIxlUcAAADQAAAANmhoZWEHHANtAAAArAAAACRobXR4B+gAAAAAAYAAAAAIbG9jYQAkAAAAAAHAAAAABm1heHABDQAeAAABCAAAACBuYW1lakQFAwAAAhAAAAIlcG9zdEP61+cAAAQ4AAAAMwABAAADUv9qAFoEAAAAAAADbgABAAAAAAAAAAAAAAAAAAAAAgABAAAAAQAAj4iO918PPPUACwPoAAAAANfSqDwAAAAA19KoPAAAAAADbgPqAAAACAACAAAAAAAAAAEAAAACABIAAQAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQP0AZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAANS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAAAAACAAAAAwAAABQAAwABAAAAFAAEACIAAAAEAAQAAQAA5wD//wAA5wD//wAAAAEABAAAAAEAAAAAAAAAJAAAAAEAAAAAA24D6gARAAATHQETARUhEyMHIQEDIRUzESG65f7gAsolLBH9ywES9gIFLf1wA5xDQv6u/pBSAQNyAVwBaXIBBAAAAAAAEgDeAAEAAAAAAAAAAQAAAAEAAAAAAAEABwABAAEAAAAAAAIABwAIAAEAAAAAAAMABwAPAAEAAAAAAAQABwAWAAEAAAAAAAUACwAdAAEAAAAAAAYABwAoAAEAAAAAAAoALAAvAAEAAAAAAAsAEgBbAAMAAQQJAAAAAgBtAAMAAQQJAAEADgBvAAMAAQQJAAIADgB9AAMAAQQJAAMADgCLAAMAAQQJAAQADgCZAAMAAQQJAAUAFgCnAAMAAQQJAAYADgC9AAMAAQQJAAoAWADLAAMAAQQJAAsAJAEjIHNiLWljb25SZWd1bGFyc2ItaWNvbnNiLWljb25WZXJzaW9uIDEuMHNiLWljb25Gb250IGdlbmVyYXRlZCB1c2luZyBTeW5jZnVzaW9uIE1ldHJvIFN0dWRpb3d3dy5zeW5jZnVzaW9uLmNvbQAgAHMAYgAtAGkAYwBvAG4AUgBlAGcAdQBsAGEAcgBzAGIALQBpAGMAbwBuAHMAYgAtAGkAYwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAHMAYgAtAGkAYwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAdQBzAGkAbgBnACAAUwB5AG4AYwBmAHUAcwBpAG8AbgAgAE0AZQB0AHIAbwAgAFMAdAB1AGQAaQBvAHcAdwB3AC4AcwB5AG4AYwBmAHUAcwBpAG8AbgAuAGMAbwBtAAAAAAIAAAAAAAAACgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgECAQMACXN1bW1hdGlvbgAAAA==) format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* csslint ignore:stop */

.e-sb {
  font-family: 'sb-icon' !important;
  speak: none;
  font-size: 55px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.e-sigma::before {
  content: '\e700';
}


.e-split-btn-wrapper{
  margin: 20px 20px 5px 5px;
}

</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class SplitButtonController : Controller
    {
        public ActionResult Rtl()
        {
            // define the array of JSON
            List<object> items = new List<object>();
            items.Add(new
            {
                text = "Autosum"
            });
            items.Add(new
            {
                text = "Average"
            });
            items.Add(new
            {
                text = "Count numbers"
            });
            items.Add(new
            {
                text = "Min"
            });
            items.Add(new
            {
                text = "Max"
            });
            ViewBag.items = items;
            return View();
        }
    }
}