How to display a column of optional flags?

Question

I am using free jqGrid.

My webpage:

<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:

 $(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 checkbox column at the end of the grid. The column heading is “Open,” and the checkbox will be displayed ONLY if InspectionStatusId = 1, which means “Not Running”. By default, this check box will be disabled. A checkmark will be set in the header, which, if checked by the user, will set all visible flags only on this page to put a checkmark, and if it is unchecked, this will disable all the checkboxes ONLY on this page. There will be a button in the footer for this column that says “Save.” When you click on the server, an ajax request will be made, which will change the status from Not Ready to Open. When this is completed, all checked flags will disappear.

I do not see any example code where something like this was done.

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 when pressed:

  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 }