Wednesday, 24 December 2014

MVC 4 Razor: How to Select / Deselect All Checkboxes inside a Webgrid in ASP.NET Application using C#.NET.

Hi friends,in this article I will explain about  How to Select / Deselect All Checkboxes inside a Webgrid in ASP.NET MVC 4 Razor Application using C#.NET.
Write the below code in Model.
Model(UserModel):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MvcSelectAllWebGrid.Models
{
    public class UserModel
    {
        public List<User> userList { get; set; }
    }

    public class User
    {
        public int UserID { get; set; }
        public string UserName { get; set; }
        public string Address { get; set; }
        public DateTime DOB { get; set; }
    }
}

Controller(UserController.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcSelectAllWebGrid.Models;

namespace MvcSelectAllWebGrid.Controllers
{
    public class UserController : Controller
    {
        public ActionResult Index()
        {
            UserModel obj = new UserModel();
            obj.userList = GetUserList();
            return View(obj);
        }

        public List<User> GetUserList()
        {
            List<User> user = new List<User>();
            user.Add(new User { UserID = 1, UserName = "Kishore", Address = "XXXXXXXXX", DOB = new DateTime(1986, 09, 15) });
            user.Add(new User { UserID = 2, UserName = "Raghav", Address = "XXXXXXXXX", DOB = new DateTime(1980, 09, 15) });
            user.Add(new User { UserID = 3, UserName = "Satyam", Address = "XXXXXXXXX", DOB = new DateTime(1975, 09, 15) });
            user.Add(new User { UserID = 4, UserName = "SambhaShiva", Address = "XXXXXXXXX", DOB = new DateTime(1985, 09, 15) });
            user.Add(new User { UserID = 5, UserName = "Nageswar", Address = "XXXXXXXXX", DOB = new DateTime(1982, 09, 15) });
            user.Add(new User { UserID = 6, UserName = "SaiR", Address = "XXXXXXXXX", DOB = new DateTime(1988, 07, 07) });

            return user;
        }

        [HttpPost]
        public ActionResult Index(string[] childChkbox)
        {
            UserModel obj = new UserModel();
            obj.userList = GetUserList();
            if (childChkbox != null)
            {
                ViewBag.mes = "You have selected following User ID(s):" + string.Join(", ", childChkbox);
            }
            else
            {
                ViewBag.mes = "No record selected";
            }

            return View(obj);
        }

    }
}

View(Index.cshtml):
@model MvcSelectAllWebGrid.Models.UserModel
@{
    ViewBag.Title = "How to Select / Deselect All Checkboxes inside a Webgrid in ASP.NET Application using C#.NET.";
}
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $("#SelectAllWebGrid th").each(function () {
            if ($.trim($(this).text().toString().toLowerCase()) === "{checkall}") {
                $(this).text('');
                $("<input/>", { type: "checkbox", id: "cbSelectAll", value: "" }).appendTo($(this));
                $(this).append("<span>Select All</span>");
            }
        });
        $("#cbSelectAll").live("click", function () {
            var ischecked = this.checked;
            $('#SelectAllWebGrid').find("input:checkbox").each(function () {
                this.checked = ischecked;
            });
        });

        $("input[name='childChkbox']").click(function () {
            var allRows = $("#SelectAllWebGrid td :checkbox").length;
            var checked = $("#SelectAllWebGrid td :checkbox:checked").length;

            if (checked == allRows) {
                $("#SelectAllWebGrid").find("input:checkbox").each(function () {
                    this.checked = true;
                });
            }
            else {
                $("#cbSelectAll").removeAttr("checked");
            }
        });
    });
</script>
<style type="text/css">
    .webGrid
    {
        margin: 4px;
        border-collapse: collapse;
        width: 500px;
        font-family: Tahoma;
        font-size: small;
    }
    .grid-header
    {
        background-color: #990000;
        font-weight: bold;
        color: White !important;
    }
    .webGrid th a
    {
        color: White;
        text-decoration: none;
    }
    .webGrid th, .webGrid td
    {
        border: 1px solid black;
        padding: 5px;
    }
    .alt
    {
        background-color: #F4EFEF;
    }
    .webGrid th a:hover
    {
        text-decoration: underline;
    }
    .to-the-right
    {
        text-align: right;
    }
</style>
@using (Html.BeginForm("Index", "User", FormMethod.Post))
{

    var grid = new WebGrid(source: Model.userList,
      rowsPerPage: 5);
    @grid.GetHtml(
        tableStyle: "webGrid",
             htmlAttributes: new { id = "SelectAllWebGrid" },
        headerStyle: "grid-header",
        rowStyle: "gridRow",
        alternatingRowStyle: "alt",
        mode: WebGridPagerModes.All,
        firstText: "<< First",
        previousText: " < Previous",
        nextText: "Next >",
        lastText: "Last >>",
        caption: "User Details",
        columns: grid.Columns(
       grid.Column(
                        format: @<text>
    <input type="checkbox" value="@item.UserID" name="childChkbox" />
    </text>,
                                            header: "{checkall}"
                                        ),
                                    grid.Column("UserID", "User ID"),
                                    grid.Column("UserName", "User Name"),
                                    grid.Column("Address", "Address"),
                                    grid.Column("DOB", "Date of Birth")
                                ))     
    <input type="submit" value="Submit" />    
    <br />
  <h3 style="color:Green;font-family:Tahoma">@ViewBag.mes</h3> 
  }


 The output of the above code as shown in the below figure
When we click on Submit button then it shows "You have selected following User ID(s):1,2,3,4,5.Because in above figure I selected 1,2,3,4,5 User IDs




You can download the above code by clicking in the below Download button.


"If you like my blog or articles, you can appreciate by leaving your comments or Liking my Facebook page Aspdotnet-kishore, following on Google+ Aspdotnet-Kishore, Twitter on AspdotnetKishore, Linked in Aspdotnet-Kishore, stumbling my posts on stumble upon and subscribing on RSSfeed Aspdotnet-Kishore for free updates directly to your Email inbox . Watch my blog for more articles."

4 comments:

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.