1

I am using igGrid in our MVC application with bootstrap. The requirement is to have the grid header fixed so that its visible when user scrolls the long list from top to bottom. Normally the grid header looks like this: enter image description here

The problem is when I call bootstrap affix class, it shows the grid headers but they don't have any width. They all just stick together and it doesn't represent the correct cell header. grid header with affix

The way I am doing it by getting the grid rendered event as:

rendered: function (evt, ui) {
    //get grid header elements
    var _thead = $(ui.owner.element[0]).find('thead');

    //call affix
    _thead.affix({ offset: { top: 30 } });        
},

I don't how I can fix the width of the header. Any help is appreciated.

Konstantin Dinev
  • 34,219
  • 14
  • 75
  • 100
sarojanand
  • 607
  • 1
  • 11
  • 30

1 Answers1

0

The igGrid exposes an option to configure fixed headers. The bootstrap affix plugin will cause the grid header to misbehave because it changes the header positioning. My suggestion is to use the built-in fixed headers to ensure misalignment doesn't occur.

Konstantin Dinev
  • 34,219
  • 14
  • 75
  • 100
  • I used that option but it didn't work for me. I used it like:`dataSource: data, fixedHeaders: true,` but it doesn't fix the column headers. Am I missing something? – sarojanand Oct 04 '16 at 16:34
  • Also I can't set `virtualization: true` as I have to set the height in that case. – sarojanand Oct 04 '16 at 16:37