ArticleZip > Hidden Columns In Jqgrid

Hidden Columns In Jqgrid

JqGrid is a powerful JavaScript plugin that allows you to display data in a grid format on your website. One useful feature of JqGrid is the ability to hide columns so that users can focus on the information that matters most to them. In this article, I'll show you how to work with hidden columns in JqGrid to enhance the user experience of your web application.

To hide a column in JqGrid, you'll need to modify the colModel configuration option for the specific column you want to hide. The colModel option is an array of objects that define the properties of each column in your grid. To hide a column, set the hidden property of the column's colModel object to true.

Here's an example of how you can hide a column with the name 'HiddenColumn':

Javascript

colModel: [
  { name: 'VisibleColumn1', index: 'VisibleColumn1', width: 100 },
  { name: 'HiddenColumn', index: 'HiddenColumn', width: 100, hidden: true },
  { name: 'VisibleColumn2', index: 'VisibleColumn2', width: 100 }
]

In this example, the 'HiddenColumn' will not be displayed in the grid when the grid is rendered. However, you can still access and manipulate the data in the hidden column programmatically.

If you want to show the hidden column again, you can simply set the hidden property of the colModel object to false:

Javascript

colModel: [
  { name: 'VisibleColumn1', index: 'VisibleColumn1', width: 100 },
  { name: 'HiddenColumn', index: 'HiddenColumn', width: 100, hidden: false },
  { name: 'VisibleColumn2', index: 'VisibleColumn2', width: 100 }
]

By toggling the hidden property of the colModel object, you can dynamically show or hide columns in your JqGrid based on user interactions or specific conditions in your application.

Another useful feature of JqGrid is the 'hideCol' method, which allows you to hide columns programmatically at runtime. You can use this method to hide columns based on user actions, such as clicking a button or selecting an option from a dropdown menu.

Here's an example of how you can use the 'hideCol' method to hide a column with the name 'DynamicColumn' when a button with the id 'hideColumnButton' is clicked:

Javascript

$('#hideColumnButton').on('click', function() {
  $('#gridId').jqGrid('hideCol', 'DynamicColumn');
});

By combining the hidden property in the colModel configuration option with the 'hideCol' method, you can create dynamic and interactive grids in JqGrid that provide a personalized user experience.

In conclusion, hiding columns in JqGrid is a handy feature that allows you to customize the display of data in your grid and improve the usability of your web application. Whether you want to declutter your grid interface or show/hide columns based on user interactions, mastering hidden columns in JqGrid will undoubtedly enhance the versatility of your web development projects.

Related posts:

×