Show or Hide Columns in JQWidgets JQX Grid

Introduction

Today we will learn how to show/hide columns in JQWidgets JQX Grid. I hope you like it.

Please see this article Show/Hide Columns in JQWidgets JQX Grid in my blog.

Background

If you are new to JQWidget JQX Grid, Please learn more here.

Using the code

Here I am using Visual Studio 2012. We will have a text file with the JSON data, you can use this file or you can explicitly load JSON data from the server side.

So let us start

First of all we must include the necessary files for the grid as in the following:

No we can start the grid implementation. For that create a ready function and add the code as follows.

Now if you note, you can determine I have provided hidden:true for the grid column implementation. So we have made that column hidden.

Now what else do we need? Yes, we need to create a div where we can render our grid.

Here I am creating a new div that is not used for grid rendering.

I will introduce a function called ready here. What this function does is, it will be fired once the grid is loaded fully. So we can use this function for the operations that must be executed after the grid rendering.

The data

What about our data? We have not seen our data, right?