Saturday, May 11, 2013

Jquery Multiselect plugin retain selection on postback in Asp.net

One can use Jquery Mutiselect plugin to allow user to select multiple items from the options available in dropdown. When we click on dropdown it looks something like below :

image
Check out the demo page of plugin here

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

Now let’s look at the code to bind the dropdown with plugin and retaining value on postback.
Make sure you’ve necessary scripts and css files added in your page:
  <link href="CSS/Jquery.multiselect.css" rel="stylesheet" type="text/css" />
  <link href="CSS/Jquery.multiselect.filter.css" rel="stylesheet" type="text/css" />
  <link href="CSS/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
  <script type="text/javascript" src="Js/jquery-ui.min.js"></script>
  <script type="text/javascript" src="Js/Jquery.multiselect.js"></script>
  <script src="JS/Jquery.multiselect.filter.js" type="text/javascript"></script>
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:
<script type="text/javascript">
        $('#<%= ddlUsers.ClientID %>').multiselect({
            //to remove check/uncheck all option
            header: '',
            //store user selected value in hidden field
            close: function (event, ui) {
                var array_of_SalesGroup = $('#<%= ddlUsers.ClientID %>').multiselect("getChecked").map(function () {
                    return this.value;
                }).get();
                $('#<%= hdnUsers.ClientID %>').val(array_of_SalesGroup);
            }
        }).multiselectfilter(); //adds filter to dropdown
    </script>

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

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

I hope it helps!

9 comments:

sandhya s.p. said...

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

Nilesh Thakker said...

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/#filter

Just add JS and CSS file, and you're ready to go, it will work as shown in blog post.

I hope it helps!

Arun Nagar said...

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

Nilesh Thakker said...

@Arun

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

raju k said...

how can i add check boxes to my dropdownlist.

Nilesh Thakker said...

@Raju K

For that you need to use Jquery Multiselect plugin as said in the post.

There's no out of the box solution.

Omkar Mhaiskar said...

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.

Sushma Madini said...

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

Nilesh Thakker said...

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