JqGrid - how do I display a column of optional checkboxes?

Question

I am using the free jqGrid.

My webpage is;

<div id="hiddenFields"
     data-sir-get-properties-list="@Url.Action("GetAllProperties", "DataContract")"></div>
<section id="SelectContract" class="contractSelectedPage" style="clear: both;">
    <fieldset>
        <legend>@ViewBag.Title</legend>
        <div id="divLoading" class="has-error">Loading ...</div>
        <table id="grid"></table>
        <div id="pager"></div>
    </fieldset>
</section>

And my jquery is;

$(function () {
    getGrid();
});

var populateGrid = function (data) {
    var grid = $("#grid");
    grid.jqGrid({
        data: data,
        colNames: ["", "", "Address", "", "", "Inspection Visits", "Category", "Status"],
        colModel: [
            { name: 'InspectionId', index: 'InspectionId', width: 65, align: 'center', hidden: true },
            { name: 'InspectionStatusId', index: 'InspectionStatusId', width: 65, align: 'center', hidden: true },
            { name: "AddressLine1", label: "AddressLine1", width: 250, align: "left" },
            { name: "AddressLine2", label: "AddressLine", width: 250, align: "left" },
            { name: "Postcode", label: "Postcode", width: 80, align: "left" },
            { name: "NumberOfVisits", label: "NumberOfVisits", width: 70, align: "center" },
            { name: "Category", label: "Category", width: 100, align: "left" },
            { name: "Status", label: "Status", width: 100, align: "left" }
        ],
        cmTemplate: { autoResizable: true },
        rowNum: 20,
        pager: "#pager",
        shrinkToFit: true,
        rownumbers: true,
        sortname: "AddressLine",
        viewrecords: true
    });

    grid.jqGrid("filterToolbar", {
        beforeSearch: function () {
            return false; // allow filtering
        }
    }).jqGrid("gridResize");
    $("#divLoading").hide();
}

var getGrid = function () {
    var url = GetHiddenField("sir-get-properties-list");
    var callback = populateGrid;
    dataService.getList(url, callback);
}

Now what I want is a column of checkboxes at the end of the grid. The column title is "Open" and a checkbox will be visible ONLY if the InspectionStatusId = 1 which means "Not Started". By default the checkbox will be unticked. There will be a checkbox in the header which if ticked by the user will set all of the visible checkboxes only on that page to ticked, and if unticked then that will untick all of the checkboxes ONLY on that page. In the footer there will be a button for this column that will say "Save". When clicked, an ajax call will be made to the server changing the status from "Not Ready" to "Open". When this is completed, all of the ticked checkboxes will disappear.

I do not see any example code of where something like this has been done.

Transfer

Refer JsFiddle – Disaccredit

Thank you for that Zakhefron. It goes some way to what I want. What I would like is if a country is visited, the checkbox no longer appears. Also I notice when I page back and forwards the checkbox is no longer ticked. – Transfer

Answer 1

column:

{ name: 'Open', index: 'Open', width: 55, align: "center", formatter: ActiveActionFormatter },

formatter:

ActiveActionFormatter = function(value, options, row) {
    var type = value ? "check" : "uncheck";

    return '<span class="action-button action-active action-{0}"></span>'.format(type);

};

trigger on click:

 grid.delegate('.action-active', 
               'click',  
               function () { 
                  activeItem($(this).data("id"), grid); 
               });

 function activeItem(id, grid) {
    //anything you need to do to change that value, maybe an AJAX call
 }

Designer