Sravya Sravya - 2 years ago 420
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.

Answer Source
  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});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download