Irei usar este artigo post como um repositório de dicas rápidas então irei atualizá-lo regularmente… fique ligado!

Pegue aqui!

O blog
Recursos
Download
Documentação
StackOverflow

Licenças e sabores

jqGrid
é um controle open source registrado sob licenças GPL e MIT. Basicamente,
isso significa que é GRÁTIS! e você pode fazer qualquer coisa com ele. Leia
mais sobre isso aqui.

Se você quiser usar as versões
“paralelas” desse controle, especialmente embaladas em pacotes para
PHP, ASP.net Webforms e ASP.net MVC, então você precisa pagar por elas.. mas
confie em mim quando eu digo que tudo que você precisa está no pacote grátis!!

Veja a lista de preços aqui.

Você também pode acessar o website das versões
pagas aqui.

O conjunto de recursos contém uma lista imensa e
tem uma comunidade incrível no Stackoverflow
que responde às suas perguntas super rápido.

Colunas

1. Esconder uma
coluna

Estou
colocando isto aqui simplesmente porque não é uma institivel visível, é chamada
escondida!

colModel: [{ name: 'colName', hidden: true }]

Dados

1. Atualizar o grid

Se
você precisar atualizar o grid a partir do código, apenas chame:

$("#grid1").trigger("reloadGrid");

A parte complicada, e não muito bem documentada,
é se você quiser atualizar e selecionar a página desejada:

$("#grid1").trigger("reloadGrid", [{page:3}]);

Isso irá atualizar o grid e exibi-lo na página
3.

Com
isso, você pode atualizar a página atual.

var currentPage = $('#grid1').getGridParam('page');
$("#grid1").trigger("reloadGrid", [{page: currentPage }]);

Você também pode manter a seleção atual:

$("#grid1").trigger("reloadGrid", [{current:true}]);

Note
que ambas as configurações de página e seleção podem ser usadas juntas.

NavBar

1.
Adicione botões customizados à NavBar

/* Add this line to allow advanced search using the toolbar button */
$('#grid1').navGrid('#grid1pager', { search: true, edit: true, add: true, del: true }, {}, {}, {}, { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true });

/* Add this line to include a separator between buttons */
$('#grid1').navSeparatorAdd("#grid1pager", { sepclass: 'ui-separator', sepcontent: '' });

/* Add this line to include custom buttons on the toolbar */
$('#grid1').jqGrid('navButtonAdd', "#grid1pager", { caption: "", buttonicon: "ui-icon-plusthick", onClickButton: function () { alert('Exporting!!!!!'); }, position: "last", title: "Export to Excel", cursor: "pointer" })

Busca

1.
Exibir a caixa de diálogo de busca avançada a partir de um botão externo

function OpenSearchDialog() {
     $("#grid1").jqGrid(
          'searchGrid', { multipleSearch: true, overlay: false });
}

2. Exibir a barra de ferramentas do filtro

A
barra de ferramentas do filtro é a barra que aparece logo abaixo das legendas
das colunas que permitem o filtro por coluna. Para deixar esta barra de
ferramentas visível, use o seguinte:

$('#grid1').jqGrid('filterToolbar',
            { stringResult: true, searchOnEnter: false });

Seleção

1. Pegar
o ID da linha selecionada

$('#grid1').jqGrid('getGridParam', 'selrow')

2. Pegar os dados da
linha

var rowData = $("#grid1").jqGrid('getRowData', rowid);

rowid: é o valor do id configurado na fonte dos
dados, NÃO no índice da linha.

Isso
retorna um objeto com os nomes das colunas e um valor como:

{name="alex", address="here and there", age=34}

então é fácil encontrar o valor usando:

var myName = rowData.name;

Esteja atento para o
fato de que o objeto somente
terá as colunas configuradas no colModel. Tudo que provavelmente virá no
datasource não aparecerá aqui.

Se você quiser ter valores aqui que você não queira
mostrar no grid, você deve adicionar a coluna à coleção colModel e configurá-la
como hidden: true.

?

Texto original disponível em http://www.instanceofanobject.com/2011/05/jqgrid-quick-tips.html