SelectionLimit.cshtml

@using Syncfusion.EJ2
@section ControlsSection{
    <div class="control-section col-lg-8">
        <div class="control-wrapper">
            <h4>CheckBox</h4>

            <ejs-multiselect id="checkList" dataSource="@ViewBag.data" mode="CheckBox" placeholder="Select countries" maximumSelectionLength="3"
                            showDropDownIcon="true"
                            popupHeight="350px">
                <e-multiselect-fields text="Name" value="Code"></e-multiselect-fields>
            </ejs-multiselect>
        </div>
    </div>
    <div class="col-lg-4 property-section">
        <div id="property" title="Properties">
            <table id="property" title="Properties">
                <tbody>
                    <tr>
                        <td>
                            <div>Selection Limit </div>
                        </td>
                        <td>
                            <div>
                                <ejs-numerictextbox id="maxsel" width="100%" format="n0" cssClass="form-control" value="3" max="19" min="1"></ejs-numerictextbox>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td style="padding-top:10px;">
                            <div>
                                <ejs-button id="buttonApply" cssClass="e-btn e-outline" content="Apply"></ejs-button>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <link href="../css/multiselect/selectionlimit.css" rel="stylesheet" />
    <script type="text/javascript">
        document.getElementById('buttonApply').onclick = function () {
            var checkList = document.getElementById('checkList').ej2_instances[0];
            var maxsel = parseFloat((document.getElementById('maxsel')).value);
            checkList.value = null;
            checkList.maximumSelectionLength = maxsel;
        };
    </script>
    <style>
        .control-fluid, .container-fluid {
            padding-right: 15px;
            padding-left: 15px;
        }
    </style>
}
@section Meta{
    <meta name="description" content="This example demonstrates the maximum selection limit functionalities with checkbox of the ASP.NET Core multiselect control."/>
}
@section ActionDescription{
    <div id="action-description">
        <p>This sample demonstrates the maximum selection limit functionalities with checkbox of the MultiSelect. MultiSelect value can set restrictions based on the maximum selection length that can be selected.</p>
    </div>
}
@section Description{
    <div id="description">
        <p>
            The MultiSelect has built-in support to limit the value selected in Multiselect component, when the <code>maximumSelectionLength</code> property is set as 3, maximum of only 3 value will be  selected in the MultiSelect.
        </p>

        <p>The selection limit sample illustrates  using the countries data. </p>

    </div>
}