GroupingWithCheckBox.cshtml

@using Syncfusion.EJ2
@section ControlsSection{
    <div class="control-section">
        <div class="control-wrapper">
            <h4>Grouping with CheckBox</h4>
            <ejs-multiselect id="group" placeholder="Select a vegetables" enableSelectionOrder="false" dataSource="@ViewBag.groupdata" mode="CheckBox" allowFiltering="true" showSelectAll="true" filterBarPlaceholder="Search Vegetables" enableGroupCheckBox="true">
                <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 select the grouped list item values through checkbox in the ASP.NET Core MultiSelect control." />
}
@section ActionDescription{
    <div id="action-description">
        <p>
            This sample demonstrates the grouping functionalities of the MultiSelect in checkbox mode. Clicking the checkbox in group will select all the items grouped under it. Click the MultiSelect element and then type
            the character in the search box. It will display the filtered list items based on the typed characters and then select
            the multiple values through the checkbox.
        </p>
    </div>
}
@section Description{
    <div id="description">
        <p>
            The MultiSelect has built-in support to select the multiple values through the checkbox, when the <code>mode</code> property
            is set to <code>CheckBox</code>. To perform the checkbox feature in MultiSelect, the <code>CheckBoxSelection</code> module
            should be injected in the application end.
        </p>
    </div>
}