Sravya Sravya - 8 months ago 148
Javascript Question

column show/hide in jqgrid

I am using jqgrid columnChooser, like so:

$(document).ready(function () {
url: "getGridData.php",
datatype: "xml",
mtype: "GET",
colNames: ["User Id", "User Name","Password"],
colModel: [
{ name: "userId",align:"right"},
{ name: "userName"},
{ name: "password"},

pager: "#perpage",
rowNum: 10,
rowList: [10,20],
sortname: "userId",
sortorder: "asc",
height: 'auto',
viewrecords: true,
gridview: true,
caption: "test"
$("#list_records").jqGrid('navButtonAdd', '#perpage', {
caption: "showcolumns",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
onClickButton: function () {
$("#colchooser_" + $.jgrid.jqID( + " ul.selected")
.bind("sortreceive", function (event, ui) {
alert('column "' + ui.item.text() + '" is choosed');
$("#colchooser_" + $.jgrid.jqID( + " ul.available a.action")
.click(function () {
alert('column "' + $(this).parent().text() + '" is choosed');


but i want my grid look like as

Please help me on this one. Thank you.

  1. you should remove $("#list_records").jqGrid('columnChooser'); call before navButtonAdd
  2. navButtonAdd can be used to add custom button to navigator bar, but it didn't work if no navigator bar exist in the grid. So you have to include call of navGrid before calling of navButtonAdd. For example, $("#list_records").jqGrid('navGrid', '#perpage', {add: false, edit: false, del: false, search: false, refresh: false});