Free upload your portfolio by mailing us the screenshots @pixellabdesk@gmail.com.

Javascript Chosen with checkbox

Monday 18 January 2016
pixel-lab
Hi Everyone, in this post I am going to discuss about a very necessary JavaScript plugins. Most of the designer and the client prefer to use the searchable select, for the large amount of data. Means if you have large number of data in your select box and you need to make these more user friendly for the users and in addition they can get the result easily by search with all the functions based on the select box change.



In the market we have lots of JavaScript plugin for this but I personally used and prefer the chosen plugin. In this plugin you can get the search for both multi select and select box. Please check the plugin @ https://harvesthq.github.io/ chosen and you can get all the information of the plugin @ https://harvesthq.github.io/chosen/options.html. You can able to make lots of things with default chosen library please check them all.


Although the Chosen is one of the best plugin in the market, I need some more option from it like.
  1. It’snot selecting the option value or you can select an option by hitting ENTER but if you need to select all/ deselect all for the large amount of data you need to press infinite times.

  2. And the most important when user select one option then it’s ok to change the color but I think putting a check box is much appropriate way for user friendliness.
  3. Now by default you can select one item as selected which you can close any time. Imagine if you have an option which user are not able to delete. It’s a default option which obvious comes with come certain criteria and if its come then user must select it.
  4. It’s not necessary to have the text and the value of an option same. If the value are different form the text then often we need to capture this for many functions depandencies.

Solutions.

  1. We have placed the check box for all the multi select drop down.
  2. With the option select/deselect all. But you can mention a class .noselectAll for not showing this select and unselect option.
  3. Now add selected1 to youroption which you don’t want to deselect by the users.
  4. You have the option to in your chosen plugin for option value which is data-value.


We have placed this example in server. Please download it and the custom files are chosen.js and index.custom.html, rest of the files from the default chosen plugins.

Thanks for visiting.Please support us by shearing our posts and like your social pages.
Please subscribe for our future posts.

4 comments:

Prashant said...

Good work done guys. Just got one issue, when an option is checked then the text aligned with checkbox get broken into next line. But its a really good advancement in chosen js.

CSR said...

How to save & retrieve from database ? Any examples ?

CSR said...

Am able to populate using this
@Html.DropDownListFor(m => m.Field1, (IEnumerable)ViewBag.Field1List, new { id = "DD_Field1", data_placeholder = " -- Select --", @class = "form-control chosen-select", @multiple = true })

Once a user Selects the required values, need to store them in Database. How to do this ?
Next is how to receive these values, while editing & Updating the data ?

Any examples on how to save and retrieve from database ?

CSR said...

Am able to populate the list :

@Html.DropDownListFor(m => m.Field1, (IEnumerable)ViewBag.Field1List, new { id = "DD_Field1", data_placeholder = " -- Select --", @class = "form-control chosen-select", @multiple = true })

When user selects from the list of options, it is showing fine. Until this its fine.

Now I want to store the selected values to database. And recover it from DB while editing.

Any examples on how to save and retrieve from database using Chosen Multiselect ComboBox