GroupingAndIcon.cshtml

@using Syncfusion.EJ2
@section ControlsSection{
    <div class="control-section">
        <div class="control-wrapper">
            <h4>Grouping</h4>
            <ejs-multiselect id="group" placeholder="Select a vegetables" dataSource="@ViewBag.groupdata">
                <e-multiselect-fields groupBy="Category" text="Vegetable" value="Id"></e-multiselect-fields>
            </ejs-multiselect>
        </div>
    </div>
    <style>
        .control-fluid, .container-fluid {
            padding-right: 15px;
            padding-left: 15px;
        }

        .control-content .control-section{
            border-width: 0px !important;
        }
    </style>
    <link href="../css/multiselect/grouping.css" rel="stylesheet" />

}
@section Meta{
    <meta name="description" content="This example demonstrates how to group based on the different categories with individual header and icon support using the ASP.NET Core multiselect control."/>
}
@section ActionDescription{
    <div id="action-description">
        <p>
            This sample demonstrates the grouping supports of the MultiSelect. Type a character in the MultiSelect element
            or click on this element to choose one or more items from the categorized list.
        </p>
    </div>
}
@section Description{
    <div id="description">
        <p>
            The MultiSelect allows to group the relevant items under a corresponding category by mapping the
            <code>groupBy</code> field, and allows to load the list items.
        </p>

        <p>The grouping sample illustrates how the vegetables are grouped based on its category.</p>

        <p>
            More information on the grouping feature configuration can be found in the
            <a href="https://ej2.syncfusion.com/aspnetcore/documentation/multi-select/grouping/" target="_blank"> documentation section</a>.
        </p>
    </div>
}