This is a migrated thread and some comments may be shown as answers.

Clear MultiSelect

5 Answers 875 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 29 Oct 2013, 04:45 PM
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

5 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 30 Oct 2013, 03:31 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tyrone
Top achievements
Rank 1
answered on 30 Apr 2014, 09:32 AM
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;
            }
        }
 
    }
}
0
Dimiter Madjarov
Telerik team
answered on 30 Apr 2014, 11:47 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Tyrone
Top achievements
Rank 1
answered on 30 Apr 2014, 12:38 PM
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 -->

0
Tyrone
Top achievements
Rank 1
answered on 30 Apr 2014, 02:47 PM
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();
});
Tags
MultiSelect
Asked by
Andrew
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Tyrone
Top achievements
Rank 1
Share this question
or