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:autoIn this post: http://ko.infragistics.com/community/forums/p/86338/430596.aspx#430596 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 spaceUpdate: 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 fineb) I tried to change the height of 'tr' element in my CSS files, but its not workingHOW CAN I FIX THE ROW HEIGHT? IF i can do this, all the problems will be solved.
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 itThanks
Hi Amritesh,
Have you been able to resolve your issue?
If you need further assistance, please let me know.
Regards,
Tsanna
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.
I am also not able to reproduce this issueThe 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
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.