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.


4 comments:

© 2012-2018 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.