Allow user to select only 5 items from syncfusion <ejs-listview

Question

Allow user to select only 5 items and 6 item click to show message 'Only 5 items can be checked' not allow to click 6 item

My code

<ejs-listview id="listview" dataSource="@Model.TestListViewModel" showCheckBox="true" select="CheckListBoxItems">
    <e-listview-fieldsettings text="Title" id="Id">
    </e-listview-fieldsettings>
</ejs-listview>

Markup

Copy

<script type="text/javascript">
    function CheckListBoxItems(args) {
        let listview = document.getElementById("listview")["ej2_instances"][0];
        let selectedItems = listview.getSelectedItems();
        let maxSelection = 5;

        if (selectedItems.data.length > maxSelection) {
            args.isChecked = false;
            oomNotify("Only 5 items can be checked", "warning");
        }
    }
</script>

JavaScript

Copy

Answer 1

Try this

<script type="text/javascript">
    let maxSelection = 5;

    function CheckListBoxItems(args) {
        let listview = document.getElementById("listview")["ej2_instances"][0];
        let selectedItems = listview.getSelectedItems();

        if (selectedItems.length > maxSelection) {
            args.cancel = true;
            oomNotify("Only 5 items can be checked", "warning");
        }
    }
</script>

Answer 2

Actual allow to select only 5 items but here allowed 6 items 

bellow screenshot

Answer 3

<script type="text/javascript">
    let maxSelection = 5;
    let lastSelectedItems = [];

    function CheckListBoxItems(args) {
        let listview = document.getElementById("listview")["ej2_instances"][0];
        let selectedItems = listview.getSelectedItems();

        if (selectedItems.data.length > maxSelection) {
            args.isChecked = false;
            if (lastSelectedItems.length === maxSelection) {
                oomNotify("Only 5 items can be checked", "warning");
            }
        } else {
            lastSelectedItems = selectedItems.data;
        }
    }
</script>