Search results

Types

The ChipList control has the following types.

  • Input Chip
  • Choice Chip
  • Filter Chip
  • Action Chip

Input Chip

Input Chip holds information in compact form. It converts user input into chips.

razor
default.cs
@Html.EJS().ChipList("chip-avatar").Chips(chip =>
                        {
                            chip.Text("Andrew").Enabled(true).Add();
                            chip.Text("Janet").Enabled(true).Add();
                            chip.Text("Laura").Enabled(true).Add();
                            chip.Text("Margaret").Enabled(true).Add();
                        }).Render()
public IActionResult Index()
    {
            return View();
    }

Choice Chip

Choice Chip allows you to select a single chip from the set of ChipList/ChipCollection. It can be enabled by setting the selection property to Single.

razor
default.cs
@Html.EJS().ChipList("chip-avatar").Selection(Selection.Single).Chips(chip =>
                        {
                            chip.Text("Small").Enabled(true).Add();
                            chip.Text("Medium").Enabled(true).Add();
                            chip.Text("Large").Enabled(true).Add();
                            chip.Text("Extra Large").Enabled(true).Add();
                        }).Render()
public IActionResult Index()
    {
            return View();
    }

Filter Chip

Filter Chip allows you to select a multiple chip from the set of ChipList/ChipCollection. It can be enabled by setting the selection property to Multiple.

razor
default.cs
@Html.EJS().ChipList("chip-avatar").Selection(Selection.Multiple).Chips(chip =>
                        {
                            chip.Text("Chai").Enabled(true).Add();
                            chip.Text("Chang").Enabled(true).Add();
                            chip.Text("Aniseed Syrup").Enabled(true).Add();
                            chip.Text("Ikura").Enabled(true).Add();
                        }).Render()
public IActionResult Index()
    {
            return View();
    }

Action Chip

The Action Chip triggers the event like click or delete, which helps doing action based on the event.

razor
default.cs
@Html.EJS().ChipList("chip-avatar").Chips(chip =>
                        {
                            chip.Text("Send a text").Enabled(true).Add();
                            chip.Text("Set a remainder").Enabled(true).Add();
                            chip.Text("Read my emails").Enabled(true).Add();
                            chip.Text("Set alarm").Enabled(true).Add();
                        }).Click("chipclick").Render()

<script>
    function chipclick(e){
        alert('you have clicked ' + e.text);
    }   
</script>
public IActionResult Index()
    {
            return View();
    }

Deletable Chip

Deletable Chip allows you to delete a chip from ChipList/ChipCollection. It can be enabled by setting the enableDelete property to true.

razor
default.cs
@Html.EJS().ChipList("chip-avatar").EnableDelete(true).Chips(chip =>
                        {
                            chip.Text("Send a text").Enabled(true).Add();
                            chip.Text("Set a remainder").Enabled(true).Add();
                            chip.Text("Read my emails").Enabled(true).Add();
                            chip.Text("Set alarm").Enabled(true).Add();
                        }).Render()
public IActionResult Index()
    {
            return View();
    }