Change caret icon

11 Apr 20222 minutes to read

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.

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