I want to store the IDs of selected rows in an array (jqGrid)

Question

This is a working jsfiddle. I'm trying to store the IDs, but I am getting an empty object. I have used jqGrid to populate the table, virtual load on demand mode and multiselection.

$grid.on("jqGridAfterLoadComplete jqGridResizeStop", maximizeGrid)
  .jqGrid({
    datatype: "local",
    colModel: [{
        label: 'ID',
        name: 'ProductID',
        width: 10,
        key: true
      }
    ],
    width: 750,
    height: 250,
    rowNum: 20,
    scroll: 1,
    emptyrecords: 'Scroll to bottom to retrieve new page',
    pager: "#jqGridPager",
    multiselect: true,
    data: myData
  });

<div style="width:800px;">
  <table id="grid"></table>
</div>

<div>
  <input type="button" value="Get Selected Rows" onclick="getSelectedRows()" />
</div>

<script type="text/javascript">
  function getSelectedRows() {
    var grid = $("#jqGrid");
    var rowKey = grid.getGridParam("selrow");

    if (!rowKey)
      alert("No rows are selected");
    else {
      var selectedIDs = grid.getGridParam("selarrrow");
      var result = "";
      for (var i = 0; i < selectedIDs.length; i++) {
        result += selectedIDs[i] + ",";
      }

      alert(result);
    }
    var checkedIds = [];
    $('form:input[type="checkbox"][checked]').each(function(i, v) {
      checkedIds.push($(v).attr('id'));
    });
    alert(checkedIds);
    console.log(checkedIds)
  }
</script>

Any help is appreciated. Thanks in advance.