jqGrid for meteor

jqGrid v4.6.0, is a complete Grid jQuery Plugin for tables.

soncco/meteor-jqGrid is a spanish version of jqGrid for meteor. lspellman/meteor-jqGrid is an english version of soncco/meteor-jqGrid. lspellman/meteor-jqGrid package is not available on atmosphere. I have just published it on atmosphere without making any changes.

Install

meteor add ramgopal:jqgrid

Usage

You should use datatype: 'local' for fetch data.

If you have a Collection called Clients width first, last and email properties.

1. Create a template:

<!-- table.html -->
<template name="jqGridTemplate">
  <table id="grid"></table>
  <div id="pager"></div>
</template>

1. Add created, rendered and destroyed events

// table.js
Template.jqGridTemplate.created = function() {
  var handle = Clients.find({}).observe({
    // Add the recently created document to table.
    addedAt: function (doc, atIndex, before) {
      jQuery("#grid").jqGrid('addRowData', atIndex + 1, doc);
    },
    // Update the document.
    changedAt: function(newDoc, oldDoc, atIndex) {
      jQuery("#grid").jqGrid('setRowData', atIndex, newDoc);
    },
    // Remove the document.
    removedAt: function(oldDoc, atIndex) {
      jQuery("#grid").jqGrid('delRowData', atIndex, oldDoc);
    }
  });
};

Template.jqGridTemplate.rendered = function() {
  jQuery("#grid").jqGrid({
    datatype: 'local', // Datatype
    data: Clients.find({}).fetch(), // JSON Object
    colNames: ['First Name', 'Last Name', 'E-mail'],
    colModel: [
      {name: 'first', index: 'first', searchoptions: {sopt: ['cn','nc','eq','bw','bn','ew','en']}},
      {name: 'last', index: 'last', searchoptions: {sopt: ['cn','nc','eq','bw','bn','ew','en']}},
      {name: 'email', index: 'email', searchoptions: {sopt: ['cn','nc','eq','bw','bn','ew','en']}}
    ],
    rowNum: 10, // Show 10 rows
    rowList: [10, 20, 30, 40, 50],
    pager: '#pager',
    sortname: 'first',
    viewrecords: true,
    sortorder: 'desc',
    caption: 'Clients',
    height: '100%',
    gridview: true,
    ignoreCase: true,
    autoencode: true,
    autowidth: true
  })
  .jqGrid('filterToolbar',{searchOperators : true, searchOnEnter: false});    
};

Template.test.destroyed = function() {
  jQuery(".ui-jqgrid").remove();
  // Remove jqGrid. TODO: use GridDestroy() method.
};

Configuration and Demo

You can play within rendered event and configure jqGrid, check the jqGrid Demos for more configurations and Examples.

Todo

1. Configuration for extra plugins.
2. Configuration for language.
3. Examples.