Search results

How To

The following section explains how to customize various aspects of the DropDownButton.

Hide dropdown arrow

You can hide the dropdown arrow from the DropDownButton by adding class e-caret-hide to DropDownButton element using cssClass property.

razor
hidearrow.cs
@section ControlsSection{

   @Html.EJS().DropDownButton("hide-arrow").Content("Edit").Items((IEnumerable<object>)ViewBag.items).CssClass("e-caret-hide").Render()

}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class DropDownButtonController : Controller
    {
        public IActionResult HideArrow()
        {
            List<object> items = new List<object>();
            items.Add(new
            {
                text = "Cut"
            });
            items.Add(new
            {
                text = "Copy"
            });
            items.Add(new
            {
                text = "Paste"
            });
            ViewBag.items = items;
            return View();
        }
    }
}

Change caret icon

Dropdown arrow can be customized on popup open and close. It can be handled in beforeOpen and beforeClose event.

In the following example, the up arrow is updated on popup close and down arrow is updated on popup open using beforeOpen and beforeClose event by adding and removing e-caret-up class.

razor
updown.cs
@section ControlsSection{

   @Html.EJS().DropDownButton("ddbtn").Content("Clipboard").Items((IEnumerable<object>)ViewBag.items)
   .BeforeOpen("beforeOpen").BeforeClose("beforeClose").Render()

}

<style>
    .e-caret {
        transform: rotate(0deg);
        transition: transform 200ms ease-in-out;
    }

    .e-caret-up .e-caret {
        transform: rotate(180deg);
    }
</style>

<script>
  // Removing 'e-caret-up' class.
  function beforeClose (args) {
     this.cssClass = '';
  }
  // Adding 'e-caret-up' class.
  function beforeOpen (args) {
     this.cssClass = 'e-caret-up';
  }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class DropDownButtonController : Controller
    {
        public IActionResult HideArrow()
        {
            List<object> items = new List<object>();
            items.Add(new
            {
                text = "Cut"
            });
            items.Add(new
            {
                text = "Copy"
            });
            items.Add(new
            {
                text = "Paste"
            });
            ViewBag.items = items;
            return View();
        }
    }
}

Group popup items with ListView component

Header in popup items is possible in DropdownButton by templating entire popup with ListView. Create ListView with id #listview and provide it as a target for DropDownButton.

In the following example, ListView element is given as target to DropDownButton and header can be achieved by groupBy property.

razor
listview.cs
@using Syncfusion.EJ2.Lists;
@section ControlsSection{
<div>
   @Html.EJS().ListView("listview").Enable(true).DataSource((IEnumerable<object>)ViewBag.listdata).ShowCheckBox(true).Fields(new ListViewFieldSettings { GroupBy = "category", Text = "text" }).Render()
   @Html.EJS().DropDownButton("ddbtn").CssClass("e-caret-hide").IconCss("e-icons e-down").target("#listview").Render()
</div>
}

<style>
    .e-down::before {
        content: '\e969';
    }

    #listview {
        display: block;
        max-width: 600px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }

    button {
        margin: 30% 5px 20px 30%;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.Button
{
    public partial class ButtonController : Controller
    {
        public IActionResult DropDownButton()
        {
            List<object> listdata = new List<object>();
            listdata.Add(new
            {
                text = "Print",
                id = "data1",
                category = "Customize Quick Access Toolbar"
            });
            listdata.Add(new
            {
                text = "Save As",
                id = "data2",
                category = "Customize Quick Access Toolbar"
            });
            listdata.Add(new
            {
                text = "Update Folder",
                id = "data3",
                category = "Customize Quick Access Toolbar"
            });
            listdata.Add(new
            {
                text = "Reply",
                id = "data4",
                category = "Customize Quick Access Toolbar"
            });
            ViewBag.listdata = listdata;
            return View();
        }
    }
}

Position popup open

Popup open position can be changed according to the requirement. Popup open position can be changed in open event by setting top and left for the popup element.

In the following example, the top position of the popup element is changed in open event.

razor
position.cs
@section ControlsSection{

   @Html.EJS().DropDownButton("ddbtn").Content("Clipboard").Items((IEnumerable<object>)ViewBag.items).CssClass("e-caret-up")
   .Open("onOpen").Render()

}

<style>
    button {
        margin: 25% 5px 20px 30%;
    }
</style>
<script>
    function onOpen(args){
        args.element.parentElement.style.top = document.getElementById('ddbtn').ej2_instances[0].element.getBoundingClientRect().top - args.element.parentElement.offsetHeight +'px';
    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Buttons;
namespace EJ2CoreSampleBrowser.Controllers.Button
{
    public partial class ButtonController : Controller
    {
        public IActionResult DropDownButton()
        {
            List<object> items = new List<object>();
            items.Add(new
            {
                text = "Cut"
            });
            items.Add(new
            {
                text = "Copy"
            });
            items.Add(new
            {
                text = "Paste"
            });
            ViewBag.items = items;
            return View();
        }
    }
}

Open a dialog on popup item click

This section explains about how to open a dialog on DropdownButton popup item click. This can be achieved by handling dialog open in select event of the DropdownButton.

In the following example, Dialog will open while selecting Other Folder... item.

razor
dialog.cs
@section ControlsSection{
<div>
   @Html.EJS().Dialog("dialog").Header("Move Items").Content("Move Items To 'Web Team'").Width("250px").Visible(false).Position(obj => obj.X("100").Y("100")).Buttons(ViewBag.button).Render()

   @Html.EJS().DropDownButton("ddbtn").Content("Move").Items((IEnumerable<object>)ViewBag.items).CssClass("e-vertical")
   .IconCss("ddb-icons e-folder").IconPosition("Top").Select("onSelect").Render()
</div>
}

<style>
    /* csslint ignore:start */
    @font-face {
        font-family: 'e-db-icons';
        src:
        url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0jSRoAAAEoAAAAVmNtYXDnFudgAAABkAAAADpnbHlmSrKTCAAAAdgAAAC4aGVhZBKtK8cAAADQAAAANmhoZWEHmQNtAAAArAAAACRobXR4D7gAAAAAAYAAAAAQbG9jYQB4ADoAAAHMAAAACm1heHABEAAYAAABCAAAACBuYW1lH00mDAAAApAAAAJJcG9zdIwkSr0AAATcAAAATQABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAABAABAAAAAQAAGc/PS18PPPUACwPoAAAAANfSc3wAAAAA19JzfAAAAAAD6gPqAAAACAACAAAAAAAAAAEAAAAEAAwAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPuAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wPnBQNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAJgAAAAQABAABAADnBf//AADnA///AAAAAQAEAAAAAQACAAMAAAAAAAAAHAA6AFwAAAACAAAAAAPqA2UABgAKAAA3IREjCQEjBRcBIQID6AL+Dv4NAQEY3QG4/I+IAsL+GAHonroBcwAAAAIAAAAAA8YD6gAFAAoAADchESMJASUHCQImA6AD/jL+MQEEywGWAZb+agICX/4+AcLXsv6cAWQBZAAAAAEAAAAAA+oD6gALAAATCQEXCQE3CQEnCQECATP+zcIBMgEzwf7OATLB/s3+zgMp/s3+zsIBM/7NwgEyATPB/s4BMgAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAKAAEAAQAAAAAAAgAHAAsAAQAAAAAAAwAKABIAAQAAAAAABAAKABwAAQAAAAAABQALACYAAQAAAAAABgAKADEAAQAAAAAACgAsADsAAQAAAAAACwASAGcAAwABBAkAAAACAHkAAwABBAkAAQAUAHsAAwABBAkAAgAOAI8AAwABBAkAAwAUAJ0AAwABBAkABAAUALEAAwABBAkABQAWAMUAAwABBAkABgAUANsAAwABBAkACgBYAO8AAwABBAkACwAkAUcgZS1kYi1pY29uc1JlZ3VsYXJlLWRiLWljb25zZS1kYi1pY29uc1ZlcnNpb24gMS4wZS1kYi1pY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAZQAtAGQAYgAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGUALQBkAGIALQBpAGMAbwBuAHMAZQAtAGQAYgAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAZQAtAGQAYgAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAQIBAwEEAQUADG1lc3NhZ2UtbWFpbAtyZWFkLXVucmVhZAZkZWxldGUAAAAAAA==) format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    /* csslint ignore:stop */

    .ddb-icons {
        font-family: 'e-db-icons' !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-folder::before {
        content: '\e703';
    }

    button {
      margin: 25px 5px 20px 20px;
    }
</style>

<script>
    function onSelect(args){
        if (args.item.text === 'Other Folder...') {
            document.getElementById('dialog').ej2_instances[0].show();
        }
    }
    function btnClick () {
        document.getElementById('dialog').ej2_instances[0].hide();
    }
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Buttons;
namespace EJ2CoreSampleBrowser.Controllers.Button
{
    public partial class ButtonController : Controller
    {
        public IActionResult DropDownButton()
        {
            List<object> items = new List<object>();
            items.Add(new
            {
                text = "Archive"
            });
            items.Add(new
            {
                text = "Inbox"
            });
            items.Add(new
            {
                text = "HR Portal"
            });
            items.Add(new
            {
                separator = true
            });
            items.Add(new
            {
                text = "Other Folder..."
            });
            items.Add(new
            {
                text = "Copy to Folder"
            });
            ViewBag.button = new
            {
                content="OK", cssClass="e-flat", isPrimary = true
            };
            ViewBag.items = items;
            return View();
        }
    }
}

Underline a character in the item text

Underline a particular character in a text can be handled in beforeItemRenderevent by adding <u> tag in between the text and given as innerHTML in li rendering.

In the following example, C is underlined in the text Copy.

razor
underline.cs
@section ControlsSection{

   @Html.EJS().DropDownButton("ddbtn").Content("Clipboard").Items((IEnumerable<object>)ViewBag.items).BeforeItemRender("itemRender").Render()

}

<style>
    button {
      margin: 25px 5px 20px 20px;
    }
</style>

<script>
function itemRender(args){
    if (args.item.text === 'Copy') {
        //To underline a particular text.
        args.element.innerHTML = '<u>C</u>opy';
    }
}
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Buttons;
namespace EJ2CoreSampleBrowser.Controllers.Button
{
    public partial class ButtonController : Controller
    {
        public IActionResult DropDownButton()
        {
            List<object> items = new List<object>();
            items.Add(new
            {
                text = "Cut"
            });
            items.Add(new
            {
                text = "Copy"
            });
            items.Add(new
            {
                text = "Paste"
            });
            ViewBag.items = items;
            return View();
        }
    }
}

Customize icon and width

Width of the DropDownButton can be customized by setting required width to the dropdown element.

The following UI can be achieved by setting iconPosition as Top, width as 85px and size of the font icon as 40px by adding e-custom class.

razor
underline.cs
@section ControlsSection{

   @Html.EJS().DropDownButton("ddbtn").Content("Clipboard").Items((IEnumerable<object>)ViewBag.items).BeforeItemRender("itemRender").Render()

}

<style>
    button {
      margin: 25px 5px 20px 20px;
    }
</style>

<script>
function itemRender(args){
    if (args.item.text === 'Copy') {
        //To underline a particular text.
        args.element.innerHTML = '<u>C</u>opy';
    }
}
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Buttons;
namespace EJ2CoreSampleBrowser.Controllers.Button
{
    public partial class ButtonController : Controller
    {
        public IActionResult DropDownButton()
        {
            List<object> items = new List<object>();
            items.Add(new
            {
                text = "Cut"
            });
            items.Add(new
            {
                text = "Copy"
            });
            items.Add(new
            {
                text = "Paste"
            });
            ViewBag.items = items;
            return View();
        }
    }
}

Create DropDownButton with rounded corner

DropDownButton with rounded corner can be achieved by adding border-radius CSS property to button element.

In the following example, e-round-corner class is defined with 5px border-radius property and added that class to button element using cssClass property.

razor
round.cs
@section ControlsSection{

   @Html.EJS().DropDownButton("ddbtn").Content("Clipboard").Items((IEnumerable<object>)ViewBag.items).CssClass("e-round-corner").Render()

}

<style>
    .e-round-corner {
        border-radius: 5px;
    }


    button {
      margin: 25px 5px 20px 20px;
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.Buttons;
namespace EJ2CoreSampleBrowser.Controllers.Button
{
    public partial class ButtonController : Controller
    {
        public IActionResult DropDownButton()
        {
            List<object> items = new List<object>();
            items.Add(new
            {
                text = "Cut"
            });
            items.Add(new
            {
                text = "Copy"
            });
            items.Add(new
            {
                text = "Paste"
            });
            ViewBag.items = items;
            return View();
        }
    }
}

Disable a DropDownButton

DropdownButton component can be enabled/disabled by giving disabled property. To disable DropdownButton component, the disabled property can be set as true.

razor
disabled.cs
@section ControlsSection{

    @Html.EJS().DropDownButton("disabled").Content("Message").Items((IEnumerable<object>)ViewBag.items).IconCss("ddb-icons e-message").Disabled(true).Render()

}

<styles>
/* csslint ignore:start */
@@font-face {
  font-family: 'e-db-icons';
  src:
  url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0jSRoAAAEoAAAAVmNtYXDnFudgAAABkAAAADpnbHlmSrKTCAAAAdgAAAC4aGVhZBKtK8cAAADQAAAANmhoZWEHmQNtAAAArAAAACRobXR4D7gAAAAAAYAAAAAQbG9jYQB4ADoAAAHMAAAACm1heHABEAAYAAABCAAAACBuYW1lH00mDAAAApAAAAJJcG9zdIwkSr0AAATcAAAATQABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAABAABAAAAAQAAGc/PS18PPPUACwPoAAAAANfSc3wAAAAA19JzfAAAAAAD6gPqAAAACAACAAAAAAAAAAEAAAAEAAwAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPuAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wPnBQNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAJgAAAAQABAABAADnBf//AADnA///AAAAAQAEAAAAAQACAAMAAAAAAAAAHAA6AFwAAAACAAAAAAPqA2UABgAKAAA3IREjCQEjBRcBIQID6AL+Dv4NAQEY3QG4/I+IAsL+GAHonroBcwAAAAIAAAAAA8YD6gAFAAoAADchESMJASUHCQImA6AD/jL+MQEEywGWAZb+agICX/4+AcLXsv6cAWQBZAAAAAEAAAAAA+oD6gALAAATCQEXCQE3CQEnCQECATP+zcIBMgEzwf7OATLB/s3+zgMp/s3+zsIBM/7NwgEyATPB/s4BMgAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAKAAEAAQAAAAAAAgAHAAsAAQAAAAAAAwAKABIAAQAAAAAABAAKABwAAQAAAAAABQALACYAAQAAAAAABgAKADEAAQAAAAAACgAsADsAAQAAAAAACwASAGcAAwABBAkAAAACAHkAAwABBAkAAQAUAHsAAwABBAkAAgAOAI8AAwABBAkAAwAUAJ0AAwABBAkABAAUALEAAwABBAkABQAWAMUAAwABBAkABgAUANsAAwABBAkACgBYAO8AAwABBAkACwAkAUcgZS1kYi1pY29uc1JlZ3VsYXJlLWRiLWljb25zZS1kYi1pY29uc1ZlcnNpb24gMS4wZS1kYi1pY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAZQAtAGQAYgAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGUALQBkAGIALQBpAGMAbwBuAHMAZQAtAGQAYgAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAZQAtAGQAYgAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAQIBAwEEAQUADG1lc3NhZ2UtbWFpbAtyZWFkLXVucmVhZAZkZWxldGUAAAAAAA==) format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* csslint ignore:stop */

.ddb-icons {
  font-family: 'e-db-icons' !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-message::before {
  content: '\e703';
}

button {
  margin: 25px 5px 20px 20px;
}

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

namespace WebApplication1.Controllers
{
    public class DropDownButtonController : Controller
    {
        public IActionResult DEisabled()
        {
            List<object> items = new List<object>();
            items.Add(new
            {
                text = "Edit"
            });
            items.Add(new
            {
                text = "Delete"
            });
            items.Add(new
            {
                text = "Mark as Read"
            });
            items.Add(new
            {
                text = "Like Message"
            });
            ViewBag.items = items;
            return View();
        }
    }
}

Create right-to-left DropDownButton

DropDownButton 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 DropDownButton component.

razor
rtl.cs
@section ControlsSection{

    @Html.EJS().DropDownButton("rtl").Content("Message").Items("ViewBag.items").IconCss("ddb-icons e-message").EnableRtl(true).Render()

}

<styles>

/* csslint ignore:start */
@@font-face {
  font-family: 'e-db-icons';
  src:
  url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0jSRoAAAEoAAAAVmNtYXDnFudgAAABkAAAADpnbHlmSrKTCAAAAdgAAAC4aGVhZBKtK8cAAADQAAAANmhoZWEHmQNtAAAArAAAACRobXR4D7gAAAAAAYAAAAAQbG9jYQB4ADoAAAHMAAAACm1heHABEAAYAAABCAAAACBuYW1lH00mDAAAApAAAAJJcG9zdIwkSr0AAATcAAAATQABAAADUv9qAFoEAAAA//4D6gABAAAAAAAAAAAAAAAAAAAABAABAAAAAQAAGc/PS18PPPUACwPoAAAAANfSc3wAAAAA19JzfAAAAAAD6gPqAAAACAACAAAAAAAAAAEAAAAEAAwAAgAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPuAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wPnBQNS/2oAWgPqAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAA+gAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAJgAAAAQABAABAADnBf//AADnA///AAAAAQAEAAAAAQACAAMAAAAAAAAAHAA6AFwAAAACAAAAAAPqA2UABgAKAAA3IREjCQEjBRcBIQID6AL+Dv4NAQEY3QG4/I+IAsL+GAHonroBcwAAAAIAAAAAA8YD6gAFAAoAADchESMJASUHCQImA6AD/jL+MQEEywGWAZb+agICX/4+AcLXsv6cAWQBZAAAAAEAAAAAA+oD6gALAAATCQEXCQE3CQEnCQECATP+zcIBMgEzwf7OATLB/s3+zgMp/s3+zsIBM/7NwgEyATPB/s4BMgAAAAASAN4AAQAAAAAAAAABAAAAAQAAAAAAAQAKAAEAAQAAAAAAAgAHAAsAAQAAAAAAAwAKABIAAQAAAAAABAAKABwAAQAAAAAABQALACYAAQAAAAAABgAKADEAAQAAAAAACgAsADsAAQAAAAAACwASAGcAAwABBAkAAAACAHkAAwABBAkAAQAUAHsAAwABBAkAAgAOAI8AAwABBAkAAwAUAJ0AAwABBAkABAAUALEAAwABBAkABQAWAMUAAwABBAkABgAUANsAAwABBAkACgBYAO8AAwABBAkACwAkAUcgZS1kYi1pY29uc1JlZ3VsYXJlLWRiLWljb25zZS1kYi1pY29uc1ZlcnNpb24gMS4wZS1kYi1pY29uc0ZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAZQAtAGQAYgAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGUALQBkAGIALQBpAGMAbwBuAHMAZQAtAGQAYgAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAZQAtAGQAYgAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIAB1AHMAaQBuAGcAIABTAHkAbgBjAGYAdQBzAGkAbwBuACAATQBlAHQAcgBvACAAUwB0AHUAZABpAG8AdwB3AHcALgBzAHkAbgBjAGYAdQBzAGkAbwBuAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAQIBAwEEAQUADG1lc3NhZ2UtbWFpbAtyZWFkLXVucmVhZAZkZWxldGUAAAAAAA==) format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* csslint ignore:stop */

.ddb-icons {
  font-family: 'e-db-icons' !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-message::before {
  content: '\e703';
}

button {
  margin: 25px 5px 20px 20px;
}

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

namespace WebApplication1.Controllers
{
    public class DropDownButtonController : Controller
    {
        public IActionResult Rtl()
        {
            List<object> items = new List<object>();
            items.Add(new
            {
                text = "Edit"
            });
            items.Add(new
            {
                text = "Delete"
            });
            items.Add(new
            {
                text = "Mark as Read"
            });
            items.Add(new
            {
                text = "Like Message"
            });
            ViewBag.items = items;
            return View();
        }
    }
}