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