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.
@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 ActionResult 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();
}
}
}