Hide/show columns jqgrid

[Lancersoft]

Hola a todos,

Estoy empezando a enredar con el jqgrid y me encuentro con que no puedo ocultar o mostrar columnas de un grid. El tema es que he seguido la documentación oficial y no hay manera de hacerlo funcionar.

Este es el código de mi jqgrid, en que hago una llamada a un webmethod y me devuelve datos en formato json(sacado de un ejemplo :) ).:

$("#list").jqGrid(
{
datatype: function () {
$.ajax(
{
url: "Default.aspx/GetPersons", //PageMethod
data:
"{'pPageSize':'" + $('#list').getGridParam("rowNum") +
"','pCurrentPage':'" + $('#list').getGridParam("page") +
"','pSortColumn':'" + $('#list').getGridParam("sortname") +
"','pSortOrder':'" + $('#list').getGridParam("sortorder")
+ "'}", //Parametros de entrada del PageMethod
dataType: "json",
type: "post",
contentType: "application/json; charset=utf-8",
complete: function (jsondata, stat) {
if (stat == "success")
jQuery("#list")[0].addJSONData(JSON.parse
(jsondata.responseText).d);
else
alert(JSON.parse(jsondata.responseText).Message);
}
});
},
jsonReader: //jsonReader –> JQGridJSonResponse data.
{
root: "Items", //raíz de los datos en formato JSON
page: "CurrentPage",
total: "PageCount",
records: "RecordCount",
repeatitems: true,
cell: "Row", //Nombre de parámetro donde comienzan las filas
id: "ID"
},
colModel: //Columns
[
{ index: 'name', width: 200, align: 'Left', label: 'Nombre', resizable: false, editable: true },
{ index: 'lastName', width: 300, align: 'Left', label: 'Apellidos', editable: true },
{ index: 'birthDate', width: 200, align: 'Center', label: 'Fecha Nacimiento', editable: true },
{ index: 'weight', width: 100, align: 'center', label: 'Peso (Kg)', align: "right", editable: true }
],
pager: "#pager", //Pager.
loadtext: 'Cargando datos...',
recordtext: "{0} - {1} de {2} elementos",
emptyrecords: 'No hay resultados',
pgtext: 'Pág: {0} de {1}', //Paging input control text format.
rowNum: "10", // PageSize.
rowList: [10, 20, 30], //Variable PageSize DropDownList.
viewrecords: true, //Show the RecordCount in the pager.
multiselect: false,
sortname: "Name", //Default SortColumn
sortorder: "asc", //Default SortOrder.
width: "760",
height: "230",
caption: "Personas",
onSelectRow: function (id) {
alert("Pulsado Id: " + id);
}
}).navGrid("#pager", { edit: false, add: false, search: false, del: false }
);
jQuery("#hc").click(function () {
jQuery("#list").jqGrid('hideCol', ["Name", "LastName"]);
});
jQuery("#add").click(function () {
var myfirstrow = { "id": 1000, "name": "Manolo", "lastname": "Santana", "birthdate": "01/01/2010", "wieght": 10.00};
$("#list").addRowData("1", myfirstrow);

});

Por otro lado intento agregar una fila metiendo a mano los datos y me añade la fila, pero en blanco.

Estoy muy perdido, a ver si me pueden iluminar que falta me hace.

Un saludo y muchas gracias.