Clear MultiSelect

[Andrew]

All -

I have a multiselect and I would like to clear the "selected values" and bring the control back to its default state once I click the Add button. (see images for a better understanding). When viewing the images:

1. "1-DefaultState.png" shows what the control looks like on load.
2. "2-Add Clicked.png" shows what the control looks like after I select an item and click "Add"
3. Essentially, after I click the "Add" button I want the multi select control to look like it does in the image 1-DefaultState.png" 

I have tried several options such as changing the values array to null, but nothing seems to work.

Thanks,
Andrew

[Dimiter Madjarov]

Hi Andrew,


You could try to trigger the blur event of the multiselect input.
E.g.

var multi = $("#multiselect").data("kendoMultiSelect");
multi.value("");
multi.input.blur();

 

Regards,
Dimiter Madjarov
Telerik

[Tyrone]

Is there a way to do this for ever multi-select on a given form?  I tried the javascript .reset but that just brought the form back to the way the page was loaded... I have a form with a dozen or so multi-selects and depending on security role, I will not know at the js level what I have selected...

I have tried this... with no avail...  I am a C# developer, not a js one so I am just trying to fumble through this script...

   

function clearForm($form) {
    var thisForm = document.getElementById($form);


    for (i = 0; i < thisForm.elements.length; i++) {

        if (thisForm.elements[i].type == "checkbox") {
            thisForm.elements[i].checked = false;
        }

        else if (thisForm.elements[i].type == "select-multiple") {
            //get the listbox object from id.
            var selObject = thisForm.elements[i];
            for (j = 0; j < thisForm.elements[i].options.length; j++) {
                thisForm.elements[i].options[j].selected = false;
            }
        }

    }
}

[Dimiter Madjarov]

Hi Tyrone,


You could retrieve all MultiSelect widgets via their data-role attribute. Here is a sample implementation.
E.g.

$("[data-role='multiselect']").each(function(e){
    var multi = $(this).data("kendoMultiSelect");
    ...
});

Regards,
Dimiter Madjarov
Telerik

 

 

[Tyrone]

Thank you for the quick reply... this indeed helped me identify the fields that I need to clear, but how to I actually "deselect" the selected values that may be there... For example, the form is loaded with a multi-select with options A, B and C available in the multi-select list, and by default A is selected.  By default, this removes A from the selections available since it is already selected.  This by the way is awesome, however  I want to CLEAR the default value so nothing is selected.  This would return option A to the selectable values...

Here is the code that I tried based on your input...

function clear_form_elementsKendo(ele) {

    $("[data-role='multiselect']").each(function (e) {

        alert("The field name is: " + this.name +

" and it’s value is: " + this.value + " Type: " + this.type);

        var multi = $(this).data("kendoMultiSelect");

        $(this).val('');

});

and my form looks like this...  My partial renders the Kendo Multi-Selects

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "filterForm" }))
{
          <div class="modal-body">
          <!-- Filters -->
                <div class="filter_menu">
                    @Html.Partial("_ISFilterHeader", dfr)
                </div>
          <!-- end:Filters -->
          </div>
          <div class="modal-footer">
            <button type="button" class="btn" id="reset-filters" onmousedown="clear_form_elementsKendo(this.form);">Reset Filters</button>
            <button type="submit" class="btn" id="apply-filters">Apply Filters</button>
            <!-- button type="button" class="btn">Save changes</button -->
          </div>
}

<li class="item"><!-- Item -->
    <h2>Integration Type</h2>
    <select id="integration-type"></select>
    <script>
    $(document).ready(function() {
        $("#integration-type").kendoMultiSelect({
            placeholder: "Select products...",
            dataTextField: "ProductName",
            dataValueField: "ProductID",
            autoBind: false,
            dataSource: {
                type: "odata",
                serverFiltering: true,
                transport: {
                    read: {
                        url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
                    }
                }
            },
        });
    });
    </script>
</li><!-- end:item -->

[Tyrone]

Got it!!! Thanks for the help... The answer was in a combination of your posts... like I said, I am JS challanged....

function clear_form_elementsKendo(ele) {
    $("[data-role='multiselect']").each(function (e) {

        var multi = $(this).data("kendoMultiSelect");
        multi.value("");
        multi.input.blur();
});