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

Spread the love

Question Description

I am using the free jqGrid.

My webpage is;

Loading ...

And my jquery is;

$(function () {

var populateGrid = function (data) {
    var grid = $("#grid");
        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

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.

Practice As Follows


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


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

    return ''.format(type);


trigger on click:

               function () { 
                  activeItem($(this).data("id"), grid); 

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

You may be interested in these books.


As an Amazon Associate I earn from qualifying purchases.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.