Maintain Grid MVC checkbox state from page to page in MVC Razor

Question

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:

We can store on client side in cookies, and remain it after page loads.
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:

enter image description here

score 2 · Answer 1 · answered Oct 16 '14 at 13:45

2

Try to use Localstorage

localStorage.setItem("Idofcheckbox",true)

localStorage.getItem("Idofcheckbox")

Note : Localstorage will store value as string.

answered Oct 16 '14 at 13:45

Nirav Parmar

451
3
12

1

I created demo of using LocalStorage with GridMvc checkboxes: https://github.com/sam-klok/WebAppGrid – sam sergiy klok Feb 01 '22 at 18:38
@samklok It is a good solution but it only works on individual check boxes. Is there a way to get a SelectAll functionality with your solution? Also, it would be great if you could show how you are sending the selected checkbox ID to the Controller method? Thanks – Rahul Sharma Mar 17 '22 at 22:09

score 1 · Answer 2 · answered Oct 16 '14 at 12:38

1

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");
    }
});

answered Oct 16 '14 at 12:38

Mathieu Labrie Parent

2,598
1
9
10

1

since each page will postback this answer will not work. the array created will be destroyed when we click the page 2. – Anto Subash Oct 16 '14 at 12:48
1

the pager should do an ajax call and if it's full post back then save it in hiddenField instead of array. – Mathieu Labrie Parent Oct 16 '14 at 13:09

score 1 · Answer 3 · answered Sep 17 '18 at 20:52

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);
        }
});

Maintain Grid MVC checkbox state from page to page in MVC Razor

3 Answers3