How to make column hidden in jsGrid?

Question

I am using jsGrid in my project and now I am stuck here to hide a column that is being used in code but should not be displayed in page.

The grid I am using is : jsGrid

I have tried to take input control hidden but, still it doesn't work.

The following code is defines the columns of grid where I have taken hidden field for AccountID. but, it doesn't work.

Code:

fields: [
        { name: "Account", width: 150, align: "center" },
        { name: "Name", type: "text" },
        { name: "AccountID", type: "hidden", width: 0}
    ]

score 15 · Answer 1 · edited Sep 29 '16 at 11:51

15

Since v1.3 jsGrid fields have an option visible

http://js-grid.com/docs/#fields

If you need to hide (or show) a field at runtime, it can be done like the following:

$("#grid").jsGrid("fieldOption", "ClientName", "visible", false);

edited Sep 29 '16 at 11:51

Aravindh Gopi

2,083
28
36

answered Jan 17 '16 at 00:50

tabalin

2,303
1
15
27

score 8 · Accepted Answer · answered Nov 27 '15 at 04:10

Try this below code.

create a css class like below

.hide
{
   display:none;
}

And assign the css property to the field like below

fields: [
    { name: "Account", width: 150, align: "center" },
    { name: "Name", type: "text" },
    { name: "AccountID", css: "hide", width: 0}
]

Hope this will help you.

score 7 · Answer 3 · answered Jun 03 '16 at 19:47

7

fields: [
{ name: "Account", width: 150, align: "center" },
{ name: "Name", type: "text" },
{ name: "AccountID", visible: false, width: 0}]

answered Jun 03 '16 at 19:47

pǝɯɐɥoɯ

111
1
5

score 1 · Answer 4 · answered Oct 25 '18 at 07:07

1

    fields: [{
            name: "<FIELD NAME>",
            visible: false
        }
    ]

answered Oct 25 '18 at 07:07

shubh14896

156
1
12

please explain why this code solves the problem. Please look at [answer] – JimHawkins Oct 25 '18 at 09:47

score 0 · Answer 5 · edited May 01 '19 at 09:29

0

hidden very simple, make it like this example :

{ name: "id", title: "Id", type: "text", width: 1, css:"hide"}

where css class hide from bootsrap

edited May 01 '19 at 09:29

sanyassh

8,100
13
36
70

answered May 01 '19 at 09:21

genrisol

1

score 0 · Answer 6 · answered Mar 05 '20 at 19:25

In my case we started our application to show a column in JSGrid and went all the way to production. Later there was a need to hide that column but I used that column to do custom sorting. So this is how I did

My styles

.idStyle:
{
  color: red;
}

Created new style

.hiddenStyle: 
{
  display: none;
}

Below are my jsGrid Fields

var jsGridField = 
[
  { name: "Student ID", type: "text", width: "auto", css: "idStyle hiddenStyle" },
  { name: "Student Name", type: "text", width: "auto", css: "labelStyle" },
]

score 0 · Answer 7 · answered Mar 28 '22 at 09:38

No data Row has been created on jsgrid for row data when there is no data. we have used below css row data for hiding it and showing.
<tr class="jsgrid-nodata-row"><td class="jsgrid-cell" colspan="16" style="width: 60.3958px;">Not found</td></tr>

When row data taking time to display by a API call , we are showing spinner on the grid, but user has been shown as no data found .. so which is not a best user experience . 

For solving this we can use hide and show the css element on modifying the CSS class

For Hiding : 
$('.jsgrid-nodata-row').hide();
$('.jsgrid-cell').hide();

For Showing : 
$('.jsgrid-nodata-row').show();
$('.jsgrid-cell').show();

How to make column hidden in jsGrid?

7 Answers7