AngularJS ui-grid hide all the rows

Question

I am using ui-grid i just want header to be visible and all the rows will be hidden. Can someone guide how to make this change ?

For the same i have created jsfiddle

currently the css is below, i dont know how to change css for this problem :-

.grid {
  width: 500px;
  height: 250px;
}

Dave Amit · Accepted Answer · 2016-03-08 05:17:28Z

2

If you wanna hide all rows (ONLY USING CSS) just do the following

.ui-grid-viewport{
  display:none;
}
.ui-grid{
  height:100% !important;
}

jsfiddle: http://jsfiddle.net/nujpd76y/5/

Well, this will permanently hide your rows, if that is what you want. Otherwise if you could just explain your use-case / requirement ... as in what you are trying to do so as we can suggest a more "angular way" to do this. :)

UPDATE:

If you want to hide header text then add following

.ui-grid-header-cell-label{
  display: none;
}

jsfiddle: http://jsfiddle.net/nujpd76y/7/

Hope this helps!

edited Mar 8, 2016 at 5:17

answered Mar 8, 2016 at 4:44

Dave Amit

2,31914 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anchit Pancholi Over a year ago

but it is still showing area for rows.. i only want to show header nothing else. doesn't matter with CSS or without CSS. only header need to visible. As i have custom table to show the data and i am using this header as for data input and sort.

Anchit Pancholi Over a year ago

Perfect, Thanks for the answer. What if i dont want header text to be visible ?

Collectives™ on Stack Overflow

AngularJS ui-grid hide all the rows

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related