Saturday, May 5, 2012

Check/UnCheck all checkboxes in a div through JQuery

This is very common functionality in any application where we have to give user the option to select or deselect all checkboxes.
So here is the code to do it in a very simple and easy way, I have put all the checkboxes in dvMain div and loop through each checkbox with JQuery each loop and then check or uncheck that paricular checkbox accordingly.

CODE

<head runat="server">
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 
   <script type="text/javascript" language="javascript">

        function CheckAll() {
            $('#dvMain :checkbox').each(function () {     //loop all checkbox in dvMain div
                $(this).attr('checked', true);                    //This will check the current checkbox
            });
        }

        function UnCheckAll() {
            $('#dvMain :checkbox').each(function () {     //loop all checkbox in dvMain div
                $(this).attr('checked', false);                   //This will uncheck the current checkbox
            });
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="dvMain">

        <a href="javascript:" onclick="CheckAll()">Check All</a>
        <a href="javascript:" onclick="UnCheckAll()">Un Check All</a>
        <br />
        <asp:CheckBox ID="CheckBox0" runat="server" Text="BlackBerry" /><br />
        <asp:CheckBox ID="CheckBox1" runat="server" Text="iPhone" /><br />
        <asp:CheckBox ID="CheckBox2" runat="server" Text="Android" /><br />
        <asp:CheckBox ID="CheckBox3" runat="server" Text="Windows Phone" /><br />
        <asp:CheckBox ID="CheckBox4" runat="server" Text="Mego" /><br /><br />

        </div>
    </form>
</body>

I have used jquery-1.4.1 but other versions can also be used.

Thursday, May 3, 2012

Fetch Asp.Net Listbox control selected items without looping

Many people wants to retrieve Asp.net Listbox controls selected item values without looping through the whole items collection.
So here is the solution for it basically you can either use LINQ or Lambda Expressions to select the selected items from the control.

Aspx Code

<asp:ListBox ID="lstBox" runat="server"  SelectionMode="Multiple">
    <asp:ListItem Text="WindowsPhone" Value="WindowsPhone"></asp:ListItem>
    <asp:ListItem Text="Android" Value="Android"></asp:ListItem>
    <asp:ListItem Text="iPhone" Value="iPhone"></asp:ListItem>
    <asp:ListItem Text="BlackBerry" Value="BlackBerry"></asp:ListItem>
</asp:ListBox>
<br />
<asp:Button ID="btnRetrieve" runat="server" Text="Get" onclick="btnRetrieve_Click" />

Aspx.cs Code

First we will use LINQ method to retrieve selected items of lstBox control

protected void btnRetrieve_Click(object sender, EventArgs e)
{
        var selecteditems = from li in lstBox.Items.Cast<ListItem>()
                                      where li.Selected == true
                                       select li;      
}

Secondly now we will retrieve selected items of lstBox control through Lambda expression

protected void btnRetrieve_Click(object sender, EventArgs e)
{
       var selecteditems = lstBox.Items.Cast<ListItem>().Where(ee => ee.Selected == true);     
}