Clear MultiSelect

6 posts, 0 answers
  1. Andrew
    Andrew avatar
    2 posts
    Member since:
    Oct 2013

    Posted 29 Oct 2013 Link to this post

    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
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 30 Oct 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Tyrone
    Tyrone avatar
    13 posts
    Member since:
    Feb 2014

    Posted 30 Apr 2014 in reply to Dimiter Madjarov Link to this post

    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;
                }
            }
     
        }
    }
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 30 Apr 2014 Link to this post

    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.

     
  6. Tyrone
    Tyrone avatar
    13 posts
    Member since:
    Feb 2014

    Posted 30 Apr 2014 Link to this post

    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 -->

  7. Tyrone
    Tyrone avatar
    13 posts
    Member since:
    Feb 2014

    Posted 30 Apr 2014 Link to this post

    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();
    });
Back to Top
UI for ASP.NET MVC is VS 2017 Ready