CODEWITHSUNDEEP
jqueryjqgrid
Peru
Peru

Reputation: 2971

JQGrid Column Customization ..Add Column at Run time

Am new to J Query and am trying some samples in http://www.trirand.com/blog/jqgrid/jqgrid.html Where i see column names are written in JS which are displayed in Grid.

I have this requirement to do on JQGrid to show the Column they search every time.

Example: I have standard set of columns to be displayed in the Grid Like student name, Address,Phone number.

Suppose if user search by Student id i need to add Student id as column to the result.

I should show like 

"student name, Address,Phone number,StudentID"

If they search by Total

I should show like 

"student name, Address,Phone number,Total"

To simplify i need to add one column to JQGrid after user clicks on search.

Can i do this in JQGrid. How can i implement this ?

Upvotes: 2

Views: 2070

Answers (2)

user3129015
user3129015

Reputation:

i believe you are getting that extra column from the data base, which is a part of the record set.

check this fiddle

http://jsfiddle.net/jqwidgets/6X3EZ/

now in the above link, you can see that on button click columns can and do get changed.

all that you now have to do is, in the part of your code where you get the recordset, write a script element, with var columns, and in this variable called columns, fill up the column names and related parameters for jqxgrid.

after you have done that, in your document ready where you write your grid add the variable.

$("#jqxgrid").jqxGrid({
 width: 500,
 theme: 'energyblue',
 source: adapter,
 columns: columns});

hope this helps.

Upvotes: 0

Ajo Koshy
Ajo Koshy

Reputation: 1225

This answer was taken from an older version of Oleg's answer here:

It is not possible to add a column to the jqGrid dynamically. You have to recreate the whole grid with colModel having one column more. If you use separate colNames, then the size of the array have to be increased too. You can use GridDestroy for example to destroy the existing grid. you can actually bind an extra column as normal but you can show/hide them at runtime using jquery. So you could just add a column and hide/show it as per your requirement using .

        $("#grid").showCol("column_name");
        $("#grid").hideCol("column_name");

Upvotes: 1

Related Questions