Underline a character in a text

28 Feb 20222 minutes to read

To underline a particular character in a text, it can be handled in beforeItemRender event 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:

CSHTML

<ejs-splitbutton id="splitbtn" items="ViewBag.items" beforeItemRender="itemRender" content='Paste'></ejs-splitbutton>

<script>
    function itemRender(args){
        if (args.item.text === 'Copy') {
            // To underline a particular text.
            args.element.innerHTML = '<u>C</u>opy';
        }
    }
</script>

<style>
    .e-split-btn-wrapper{
        margin: 20px 20px 5px 5px;
    }
</style>

Underline.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.SplitButtons;

namespace EJ2CoreSampleBrowser.Controllers.Button
{
    public partial class ButtonController : Controller
    {
        public ActionResult SplitButton()
        {
            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();
        }
    }
}