Sunday, 22 October 2017

ASP.NET ListBox with Multi Select DropdownList with CheckBoxes Using jQuery

In this tutorial, I am going to explain you how to implement multiple selection (MultiSelect) with ListBox control using CheckBox in ASP.NET with help of jQuery, Bootstrap and MultiSelect JS.

In ASPX File

In aspx file, create a ListBox control with SelectionMode="Multiple" and bind with some dummy ListItem data as shown below.
Here in script JS files, First is jQuery file and Second, Third is bootstrap JS and CSS files and Fourth and Fifth file is MultiSelect JS and CSS Files.
Make sure all files is loaded when application runs.
Here includeSelectAllOption is set to true to include Select All text at first position in Select List.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js" type="text/javascript"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#lbCountry').multiselect({
            includeSelectAllOption: true
        });
    });
</script>
</head>
<body>
<form id="form1" runat="server">
    <div style="width: 500px; height: auto; border: 1px solid red; margin-top: 50px; margin-left: 150px; padding: 5px;">
        <table>
            <tr>
                <td><b>Country List</b></td>
                <td>
                    <asp:ListBox ID="lbCountry" runat="server" SelectionMode="Multiple">
                        <asp:ListItem Text="India" Value="1"></asp:ListItem>
                        <asp:ListItem Text="USA" Value="2"></asp:ListItem>
                        <asp:ListItem Text="UK" Value="3"></asp:ListItem>
                        <asp:ListItem Text="Australia" Value="4"></asp:ListItem>
                    </asp:ListBox>
                </td>
                <td>
                    <asp:Button ID="btnSave" Text="Submit To Database" runat="server" OnClick="btnSave_Click"
                        class="btn btn-success btn-md" />
                </td>
            </tr>
        </table>
    </div>
</form>
</body>
</html>

In ASPX.CS File

Here inside button click handler, we are using foreach loop to iterate over ListBox ListItem collection and checking if item is checked or not using Selected property.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
public partial class WebForm1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btnSave_Click(object sender, EventArgs e)
    {
        foreach (ListItem item in lbCountry.Items)
        {
            if (item != null && item.Selected)
            {
                string Name = item.Text;
                string Value = item.Value;
                // write your code here to save to database
            }
        }
    }
}
}

Now, build and run your application and output can be seen as below.

MVC MultiSelect (Multiple Selection) DropdownList with CheckBoxes Using jQuery

Now, to remove Select all option from list, remove includeSelectAllOption from jQuery code or set it to false. You can see Select all option is removed from list.

Remove Select all from Multiselect JS

Select All by-default

Here, when webform is loaded, no item is selected. To make all items selected by default, add below lines of code in JS code.

<script type="text/javascript">
    var j = jQuery.noConflict();
    j(function () {
        j('#SelCountry').multiselect({
            includeSelectAllOption: false
        });
        j("#SelCountry").multiselect('selectAll', false);
        j("#SelCountry").multiselect('updateButtonText');
    });
</script>

Here all item is selected by default when webform is loaded.

Select all by default in multiselect js
Share:

2 comments:

Email Subscription

Subscribe to our newsletter to get the latest articles directly into your inbox

Blog Archive

BUY FROM AMAZON