Reset kendo Multi filter checkbox dataSource to reflect filtered data

To reset a Kendo UI MultiSelect widget with checkboxes and update the data source to reflect the filtered data, you can follow these steps:

1. Reference Kendo UI JavaScript Library: Make sure you have included the Kendo UI JavaScript library in your HTML.

2. Create MultiSelect Widget: Initialize the Kendo UI MultiSelect widget with checkboxes and set up the data source.

htmlCopy code
<select id="multiSelect" multiple="multiple"></select>

<script>
  $(document).ready(function() {
    $("#multiSelect").kendoMultiSelect({
      dataTextField: "text",
      dataValueField: "value",
      dataSource: [
        { text: "Option 1", value: "1" },
        { text: "Option 2", value: "2" },
        { text: "Option 3", value: "3" },
        { text: "Option 4", value: "4" },
        // Add more options here
      ]
    });
  });
</script>

3. Filter the Data Source and Update MultiSelect: When you want to filter the data source and update the MultiSelect widget, you can use the filter method of the Kendo UI DataSource and then trigger the dataBound event of the MultiSelect to refresh the view.

htmlCopy code
<button id="filterButton">Filter Data</button>
<button id="resetButton">Reset Filter</button>

<script>
  $(document).ready(function() {
    // Get a reference to the MultiSelect widget
    var multiSelect = $("#multiSelect").data("kendoMultiSelect");

    // Reference to the original data source
    var originalDataSource = multiSelect.dataSource.data();

    $("#filterButton").on("click", function() {
      // Filter the data source to show only options with values greater than 2
      multiSelect.dataSource.filter({ field: "value", operator: "gt", value: 2 });
      // Refresh the MultiSelect widget
      multiSelect.trigger("dataBound");
    });

    $("#resetButton").on("click", function() {
      // Reset the data source to show all options
      multiSelect.dataSource.data(originalDataSource);
      // Refresh the MultiSelect widget
      multiSelect.trigger("dataBound");
    });
  });
</script>

In this example, we are filtering the data source to show only options with values greater than 2 when the "Filter Data" button is clicked. To reset the data source and show all options again, we use the "Reset Filter" button.

Please note that the above example assumes you are using Kendo UI version 2021.1.330 or later. If you are using an older version, the syntax might vary slightly.

Make sure to adjust the filtering conditions and data source as per your specific requirements. The key is to use the filter method of the DataSource to filter the data and then trigger the dataBound event of the MultiSelect to update the view accordingly.