Undefined value of Action column in case of Formatter: "actions"

Question

I have My grid.I want to have an action column in my jqGrid with an options ADD/Edit/Delete. I read the documentation of JqGrid and I came to know JqGrid provide me functions for this using formatter action,I implemented the same in my code but still my action column in undefined. Here is my code I'm passing four params 1.Grid_id 2.Pager_id 3.Colname 4.url (To get the remote data)

({
  setUpNormalGrid: function(grid_id, pager_id, url, col_name) {
    var Jroot, col_sort, colmod, colname, groupingView, headers, i, keys, minusIcon, plusIcon, root, type;
    col_sort = this.get("sort");
    keys = this.get("colmod");
    type = this.get("Htype");
    root = this.get("root");
    Jroot = root + ".result";
    grid_id = "#" + grid_id;
    pager_id = "#" + pager_id;
    i = 0;
    colname = col_name;
    colname.unshift("Actions");
    colmod = [];
    i = 0;
    colmod.push({
      name: "act",
      index: "act",
      width: 35,
      align: "center",
      sortable: false,
      formatter: "actions"
    });
    while (i < keys.length) {
      if (col_sort[i]) {
        colmod.push({
          align: "center",
          name: keys[i],
          index: keys[i],
          width: 35,
          sorttype: col_sort[i]
        });
      } else {
        colmod.push({
          name: keys[i],
          index: keys[i],
          width: 40
        });
      }
      i++;
    }
    debugger;
    jQuery(grid_id).jqGrid({
      url: url,
      datatype: "json",
      mtype: "GET",
      height: "100%",
      rowNum: 40,
      rowList: [20, 30, 40, 50],
      jsonReader: {
        root: Jroot,
        repeatitems: false,
        page: root + ".currpage",
        total: root + ".totalpages",
        records: root + ".totalrecords",
        repeatitems: false
      },
      colNames: colname,
      colModel: colmod,
      viewrecords: true,
      gridview: true,
      autoencode: true,
      ignoreCase: true,
      pager: pager_id,
      pgtext: "Page",
      hidegrid: false,
      paging: true,
      grouping: true,
      groupingView: {
        groupField: ['cadet.name'],
        groupColumnShow: [true],
        groupText: ['<b>Cadet {0}</b>'],
        hideFirstGroupCol: true,
        groupCollapse: false,
        groupOrder: ['asc'],
        plusicon: 'ui-icon-circle-plus',
        minusicon: 'ui-icon-circle-minus',
        groupDataSorted: true
      },
      loadComplete: function(data) {
        var groups, idSelectorPrefix, l, _results;
        i = void 0;
        groups = $(this).jqGrid("getGridParam", "groupingView").groups;
        l = groups.length;
        idSelectorPrefix = "#" + this.id + "ghead_0_";
        i = 0;
        _results = [];
        while (i < l) {
          if (groups[i].cnt === 1) {
            $(idSelectorPrefix + i).hide();
          }
          _results.push(i++);
        }
        return _results;
      }
    });
    groupingView = $(grid_id).jqGrid("getGridParam", "groupingView");
    plusIcon = groupingView.plusicon;
    minusIcon = groupingView.minusicon;
    $(grid_id).click(function(e) {
      var $groupHeader, $target;
      $target = $(e.target);
      $groupHeader = $target.closest("tr.jqgroup");
      if ($groupHeader.length > 0) {
        if (e.target.nodeName.toLowerCase() !== "span" || (!$target.hasClass(plusIcon) && !$target.hasClass(minusIcon))) {
          $(this).jqGrid("groupingToggle", $groupHeader.attr("id"));
          return false;
        }
      }
    });
    if (type === "header") {
      headers = this.get("headers");
      jQuery(grid_id).jqGrid("setGroupHeaders", {
        useColSpanStyle: true,
        groupHeaders: headers
      });
    }
    jQuery(grid_id).jqGrid("setGridWidth", jQuery("#content").width(), true);
  }
});

In my colmod I pushed the first object for my action column(Pushed "Action" in colname).and when i run the code I get undefined column in my Action column. please help.I have read jqGrid documentation for the same. Here is the screenshot for the same,As you can see action column is undefined.

Answer 1

I use a simple way to add buttons to jqgrid in "gridComplete" i create my buttons in runtime and attach them to my grid defining what ever i want to execute in button's "onclick"

$("#myGrid").jqGrid({
datatype: "local",
colNames: ["Column 1", "Column 2", "Columen 3", "Add", "Edit", "Delete"],
colModel: [
    { name: "Column 1" },
    { name: "Column 2" },
    { name: "Columen 3" },
    { name: "actionAdd" },
    { name: "actionEdit" },
    { name: "actionDelete" }
],
scrollOffset: 0,
rowNum: 1000,
height: 100,
width: 750,
viewrecords: true,
loadonce: true,
gridComplete: function () {
    var grid = jQuery("#myGrid");
    var ids = grid.jqGrid('getDataIDs');
    for (var i = 0; i < ids.length; i++) {
        var rowId = ids[i];
        // create button in runtime
        var buttonAdd = "<input type='button' value='Add' onclick=\"addRecord(" + rowId + ");\" />";
        var buttonEdit = "<input type='button' value='Edit' onclick=\"editRecord(" + rowId + ");\" />";
        var buttonDelete = "<input type='button' value='Edit' onclick=\"DeleteRecord(" + rowId + ");\" />";

        // add button to the grid
        grid.jqGrid('setRowData', rowId, { actionAdd: buttonAdd });
        grid.jqGrid('setRowData', rowId, { actionEdit: buttonEdit });
        grid.jqGrid('setRowData', rowId, { actionDelete: buttonDelete });

    }
}});    

you may also add your buttons in the footer like default grid actions

$('#myGrid').jqGrid('navButtonAdd', '#myGrid-Pager', {
        caption: "",
        width: 100,
        buttonicon: "ui-icon-pencil",
        onClickButton: function () {
            // your add function goes here
        }
    });