Problem Statement:

I'm using the grid provided by codeplex(Codeplex grid.mvc) to implement the grid in my application.Everything was working fine with all the operations.Recently I added checkbox in the grid for selecting multiple rows for performing some operation based on multi-selection.Even i'm able to perform various operation on multiple selection.

Problems what i'm facing:

• I'm not able to retain the state of checkbox selected when the user switches from one page to the other.
• Not able to add Select all checkbox in the header section for selecting all the checkbox in the grid.

How to do this?After doing some research i came to know that checkbox state in the grid can be retained in 2 ways:

1. We can store on client side in cookies, and remain it after page loads.
2. We can store it on server side, when user change checkbox state you can make an ajax call to change the checkbox state. Remain state on server side, when building page layout.

Can anyone please elaborate on this..???or else can anyone suggest me some ways of solving both of my problems???

Razor View Code:

    @model IEnumerable<Web.Areas.Smart.Models.OrderModel>

    @using GridMvc.Html
    @{
        ViewBag.Title = "Index";
    }

    <h2>Details</h2>
    <hr />

    <div>
        @Html.Grid(Model).Columns(columns =>
        {

        columns.Add()
        .Encoded(false)
        .Sanitized(false)
        .SetWidth(30)
        .RenderValueAs(itm => @Html.CheckBox("checked", itm.InputModel.ChkStatus, new { @class = "check-item", ID= itm.InputModel.AssetID}));
        columns.Add(itm => itm.OrderNumber).Titled("Order #");
        columns.Add(itm  => itm.OrderDate).Format("{0:MM/dd/yyyy}").Titled("Order Date");
        columns.Add(itm => itm.InvoiceNumber).Titled("Invoice #");
        columns.Add(itm => itm.InvoiceDate).Format("{0:MM/dd/yyyy}").Titled("Invoice Date");
        columns.Add(itm => itm.ID).Titled("ID");           

        }).WithPaging(5).Sortable(true).Filterable(true)

        <br />
        <input type="button" class="btn btn-primary" value="Create" onclick="@("location.href='"
         + Url.Action("Index", "Plan")
         + "'")" />

    </div>

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
        <script type='text/javascript'>
            $(function () {
                $('.datepicker').datepicker({
                    format: "mm/dd/yyyy",
                }).on('changeDate', function (e) {
                    $(this).datepicker('hide');
                });
            })
            $(function () {
                $(".check-item").click(function () {
                    //alert("item clicked, id = " + $(this).attr("ID"));
                    var assetID = $(this).attr("ID")
                    var Url = "@Url.Content("~/Plan/GetCount")";
                    $.ajax({
                        url: Url,
                        dataType: 'json',
                        data: { ID: id},
                        success: function (data) {

                        }
                    });
                });
            });

        </script>
       }

Image for your refernce:

Problem Statement:

I'm using the grid provided by codeplex(Codeplex grid.mvc) to implement the grid in my application.Everything was working fine with all the operations.Recently I added checkbox in the grid for selecting multiple rows for performing some operation based on multi-selection.Even i'm able to perform various operation on multiple selection.

Problems what i'm facing:

• I'm not able to retain the state of checkbox selected when the user switches from one page to the other.
• Not able to add Select all checkbox in the header section for selecting all the checkbox in the grid.

How to do this?After doing some research i came to know that checkbox state in the grid can be retained in 2 ways:

1. We can store on client side in cookies, and remain it after page loads.
2. We can store it on server side, when user change checkbox state you can make an ajax call to change the checkbox state. Remain state on server side, when building page layout.

Can anyone please elaborate on this..???or else can anyone suggest me some ways of solving both of my problems???

Razor View Code:

    @model IEnumerable<Web.Areas.Smart.Models.OrderModel>

    @using GridMvc.Html
    @{
        ViewBag.Title = "Index";
    }

    <h2>Details</h2>
    <hr />

    <div>
        @Html.Grid(Model).Columns(columns =>
        {

        columns.Add()
        .Encoded(false)
        .Sanitized(false)
        .SetWidth(30)
        .RenderValueAs(itm => @Html.CheckBox("checked", itm.InputModel.ChkStatus, new { @class = "check-item", ID= itm.InputModel.AssetID}));
        columns.Add(itm => itm.OrderNumber).Titled("Order #");
        columns.Add(itm  => itm.OrderDate).Format("{0:MM/dd/yyyy}").Titled("Order Date");
        columns.Add(itm => itm.InvoiceNumber).Titled("Invoice #");
        columns.Add(itm => itm.InvoiceDate).Format("{0:MM/dd/yyyy}").Titled("Invoice Date");
        columns.Add(itm => itm.ID).Titled("ID");           

        }).WithPaging(5).Sortable(true).Filterable(true)

        <br />
        <input type="button" class="btn btn-primary" value="Create" onclick="@("location.href='"
         + Url.Action("Index", "Plan")
         + "'")" />

    </div>

    @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
        <script type='text/javascript'>
            $(function () {
                $('.datepicker').datepicker({
                    format: "mm/dd/yyyy",
                }).on('changeDate', function (e) {
                    $(this).datepicker('hide');
                });
            })
            $(function () {
                $(".check-item").click(function () {
                    //alert("item clicked, id = " + $(this).attr("ID"));
                    var assetID = $(this).attr("ID")
                    var Url = "@Url.Content("~/Plan/GetCount")";
                    $.ajax({
                        url: Url,
                        dataType: 'json',
                        data: { ID: id},
                        success: function (data) {

                        }
                    });
                });
            });

        </script>
       }

Image for your refernce:

• javascript
• jquery
• asp-mvc-4
• razor
• codeplex

3 Answers 3

Try to use Localstorage

localStorage.setItem("Idofcheckbox",true)

localStorage.getItem("Idofcheckbox") 

Note : Localstorage will store value as string.

Why not saving them client side ? Where selectedCheckbox is a global variable.

var selectedCheckbox = [];

$("input[type='checkbox']").click(function () {
    if($(this)[0].checked)
    {
        selectedCheckbox.push($(this).attr("id"));
    }
    else
    {
        selectedCheckbox = $.grep(selectedCheckbox , function (item) {
            return item != $(this).attr("id");
        });
    }
});

And after rendering the table :

$("input[type='checkbox']").each(function () {
    if($.inArray($(this).attr("id"), selectedCheckbox) > -1)
    {
        $(this).attr("checked","checked");
    }
});

Below Solution works:

Grid MVC: Add a column at the start of the grid

columns.Add()
                 .Titled("<input class='checkAll' type='checkbox' name='checkAll' value='.checkAll'/>")
                 .Encoded(false)
                 .Sanitized(false)
                 .SetWidth(20)
                 .RenderValueAs(item => @Html.CheckBox("checked", false, new { @class = "check-item", ID = item.Id}));

JavaScript:

$('.checkAll:checkbox').change(function () {
    if ($(this).prop("checked")) {
       $('input:checkbox').prop('checked', true);
      }
    else {
         $('input:checkbox').prop('checked', false);
        }
});