jQuery multiselect plugin retain selection on postback in Asp.net

The jQuery Mutiselect plugin allows users to select multiple items from the options available in the dropdown. When we click on the dropdown, it looks something like the below :

jQuery Multiselect


Check out the demo page of the plugin here.

The problem with the plugin is that it won’t remember the user selection, and value will be lost on postback. You can store the selected value delimited by a comma in the hidden field and restore the value on the page load.

Now let’s look at the code to bind the dropdown with the plugin and retain value on postback.

Make sure you have the necessary scripts and CSS files added to your page:

HTML:

<asp:DropDownList ID="ddlUsers" runat="server" multiple="multiple">
</asp:DropDownList> <asp:HiddenField ID="hdnUsers" runat="server" />
<asp:Button ID="btnSearch" runat="server" Text="Search" onclick="btnSearch_Click" />

Client Script:

$('#').multiselect({
    //to remove check/uncheck all option
    header: '',
    //store user selected value in hidden field
    close: function (event, ui) {
        var array_of_SalesGroup = $('#').multiselect("getChecked").map(
            function () {
                return this.value;
            }).get();
        $('#').val(array_of_SalesGroup);
    }
}).multiselectfilter(); //adds filter to dropdown

Now to check checkboxes marked by a user, we need to add the selected attribute to the original select (dropdown) options and call the refresh method of the plugin. You can do it as shown in the below scripts:

$(document).ready(function () {
    if ($('#').val() != '') {
        var selected = $('#').val().split(",");
        $("# > option").each(function () {
            if ($.inArray(this.value, selected) > -1) {
                $(this).attr("selected", "selected");
            }
        });
        $("#").multiselect('refresh');
    }
});

I hope it helps!


Posted

in

,

by

Comments

9 responses to “jQuery multiselect plugin retain selection on postback in Asp.net”

  1. Unknown Avatar

    Hi,The script code helped to retain the selected values in the checkbox, but on using this the filtering in the dropdown does not work!!

  2. Nilesh Thakkar Avatar

    Sorry for delayed answer.To make filtering work, you need to add filtering plugin in your code. Check out below link that shows the demo of filtering plugin and relevant links to plugin download.http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#filterJust add JS and CSS file, and you're ready to go, it will work as shown in blog post.I hope it helps!

  3. Unknown Avatar

    Dear Sir Using the same. but its not working i m using the plug in of jquery 1.8.2 doest it impact

  4. Nilesh Thakkar Avatar

    @ArunAre you unable to retain selection on postback? or something else is not working?If you've followed the post throughout, it should work. There's nothing complicated that it should not work.

  5. Unknown Avatar

    how can i add check boxes to my dropdownlist.

  6. Nilesh Thakkar Avatar

    @Raju KFor that you need to use Jquery Multiselect plugin as said in the post.There's no out of the box solution.

  7. Unknown Avatar

    Thanks For good Post. I am looking functionality like user has to add new text in the textbox which is not present in list. How can i achive it using code.Please guide me. Thanks in advance.Omkar Mhaiskar.

  8. Unknown Avatar

    i am unable to retain selected values after postback. what i have to do for that

  9. Nilesh Thakkar Avatar

    @Sushma Did you follow the article and still it is not working? Post your code.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: