Fixed header in the grid

Hi,

I am using the ‘igHierarchicalGrid’. I want grid scrolling to be enabled in such a way that Headers should not scroll up and get hidden. I have re-created the problem in a fiddle.

Here is the link: http://jsfiddle.net/v4792czg/. You can see in the example that as we are scrolling down, the header of the Grid went up and we are no longer able to see it. How can i solve the issue.

The auto created div hierarchicalGrid_scroll has css property like
overflow-y:hidden
overflow-x:auto

You have mentioned that grid has already fixed headers, but You can see in the example provided that SCROLL BAR of grid is not visible, how can this option help then
 Update: 1

Giving height in grid configuration is solving this problem, but I do not want to give height to grid, I want grid to take parent’s height, because I do not want to give hard-coded heights. It should depends on available space

Update: 2

a) If I calculate the available percentage of height and assigned it in grid config, Fixed header is working fine, but problem is Suppose there a few entries in grid, say 2 entries, then grid row height is getting auto adjusted to fll up the grid, causing row height to be more than 200px, if number of rows are large, then its fine

b) I tried to change the height of ‘tr’ element in my CSS files, but its not working

HOW CAN I FIX THE ROW HEIGHT? IF i can do this, all the problems will be solved.

Hello Amritesh,

How do you expect the grid header to be always visible in case that the grid has many rows and you don't want to set a grid height that will generate a vertical scrollbar? In this case the browser generates such one and when you scroll to the bottom to see all data, then the header gets hidden, which is expected. What bothers you about setting the height property to the grid? You're saying that when you calculate the grid height based on the window's height and there is less rows in the grid, they're auto resized to fill the available grid space. This sounds me like you're using virtualization. Is it right? Waiting for your reply.

Regards,
Tsanna

Hi,

I am not using virtualzation. What is happening is suppose i gave grid height of 300px, and there are 3 rows in it, then all the rows are getting 100px height to cover all the  available height of grid. I am not able to upload the pic
 

I tried the same with the sample in Fiddle, there it is working fine, may be this is the issue with version I am using 2013.1, and 'ighierarchicalGrid' with load on demand (initial data-bind =0), and auto-generated columns are false

This is my configuration:

var jsonData = new $.ig.JSONPDataSource({
dataSource: "myUrl",
type: "remoteUrl"
});

var configs={
width: "100%",
initialDataBindDepth: 0,
dataSource: jsonData,//the URL
autoGenerateColumns:false,
key:"myDate",
primaryKey:"id",
height:getHeight(),
rowExpanding : function(e, ui) {
//collapse other rows
var grid = ui.owner, expandedRows, i;
expandedRows = $(ui.parentrow).closest('tbody').find('tr[state=e]');
for (i = 0; i < expandedRows.length; i++){
grid.collapse(expandedRows[i]);
}

},
rowExpanded: function(e,ui){
//do something

},

columns:getDefaultColumns(),
columnLayouts:=getColumnLayouts(0,configs,levels-1)
}

function getColumnLayouts(i,configs,levels){
var layouts=[];
var layout1={};
layout1["autoGenerateColumns"]= false;
layout1["primaryKey"]='id';
layout1["key"]=getKey(configs,i),
layout1["columns"]=getColumns(configs,i);
if(i<levels){
layout1["columnLayouts"]=getColumnLayouts(++i,configs,levels);
}
layouts.push(layout1);
return layouts;
}

 

Hello Amritesh,

I tried to reproduce the issue using similar as your configuration, except that my columns are defined as objects, not with dynamic functions and the data source is local, which I assume is not relevant to the current issue. I noticed that you're setting grid height via custom function as well. Could you share this function's code? At the meantime, I'm sending you my sample to test it on your side, because I was not able to reproduce the issue with it on my side. The sample is tested with v13.1. If you need further assistance, please let me know.

Regards,

Tsanna

I am also not able to reproduce this issue
The whole structure is as follow-

<div class="container-fluid">
    <div class="row">
        <div style="height:25px;">
            <!– Contentr of this div, contains a date picker, a button>
        </div>

        <div class="dataDiv">
            <div id="chartCotainer" style="height:47%;width:99%;">
                <div id="chart" style="float:left;min-width: 400px; width:100%;margin-left: 20px auto"></div>
            </div>

            <div style="height:53%; overflow:none;">
                 <div id = "gridContainer" style="width:67%;height:100%;float:left;"> <!– I want grid to be in 67% of width –>
                     <table id="hierarchicalGrid"></table>
                 </div>

                 <div id="childChart" style="float:left;overflow:auto;width:33%;padding-left:10px;padding-right:10px"></div>
            </div>
        </div>
    </div>
<div>

function setHeight(){
    //Called when my javascript is loaded
    var p = $( "body" );
    $(".row").width(p.outerWidth()-15).height(p.innerHeight()-125);// I have 125px height banner, so assigning remaining to my row
    $(".dataDiv").height($(".row").height()-25);// row – height of first div that contains datepicker and button
}

function getHeight(){
     return $("#gridContainer").height();//It should return height of grid container which is 53% dataDiv
}

 
I do not know what the issue is, but this is what happening, 2 rows are adjusting their heights to take all the height of grid

Hello Amritesh,

Please send me your whole sample, because I'm not able to reproduce your issue only using code snippets and re-creating them in my own sample.

Waiting for your reply.

Tsanna

Hi Amritesh,

Have you been able to resolve your issue?

If you need further assistance, please let me know.

Regards,

Tsanna

Hi,

I do not know why grid row height is increasing, but I am able to get fixed headers, and number of rows are large in my requirement, so i am continuing with it

Thanks