Adjust Height of Nested Grid

[Gopre400Participant]

Hi I’m trying to adjust the height of the nested grid and/or the space between parents rows but I can’t seem to get the correct setting. I can shrink the grid the space between parent rows always remain the same. What am I missing?

I’ve tried adjust the details template like this…

$(“#jqxgrid2”).jqxGrid(
{
source: employeesAdapter,
rowdetails: true,
width: ‘100%’,
autoheight: true,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin-bottom: 30px; height:100%;‘></div>”, rowdetailshidden: true},
columns: [
{ text: ‘Contractor’, datafield: ‘Contractor’, width: 300, cellsrenderer: renderer },
{ text: ‘Bid Total’, datafield: ‘BidTotal’, width: 100, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’ }
]
});

and the nested grid height in the nested renderer like this…

var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);
if (grid != null) {
grid.jqxGrid({
source: nestedGridAdapter, height: ‘100%’, width: ‘100%’, groupable: true,
columns: [
{ text: ‘Item #’, datafield: ‘RowIndex’, width: 60, cellsrenderer: rownumberrenderer, editable: false },
{ text: ‘Description’, datafield: ‘ItemDescription’, width: 300 },
{ text: ‘Units’, datafield: ‘ItemUnit’, width: 50 },
{ text: ‘Quantity’, datafield: ‘ItemQuantity’, width: 100, align: ‘right’, cellsalign: ‘right’ },
{ text: ‘Price’, datafield: ‘BidPrice’, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’, width: 100 },
{ text: ‘Total’, datafield: ‘BidItemTotal’, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’, width: 100 },
{ text: ”, datafield: ‘VersionDescription’, hidden: true},
],
groups: [‘VersionDescription’]
});
}

[Peter StoevKeymaster]

Hi Gopre400,

The Row Details Height should be a Fixed Number like 200 for example.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Gopre400Participant]

In the template or in the nested grid definition?

I tried both with different values but the space remains the same…

grid.jqxGrid({
source: nestedGridAdapter, height: 1000, width: ‘100%’, groupable: true,
columns: [
{ text: ‘Item #’, datafield: ‘RowIndex’, width: 60, cellsrenderer: rownumberrenderer, editable: false },
{ text: ‘Description’, datafield: ‘ItemDescription’, width: 300 },
{ text: ‘Units’, datafield: ‘ItemUnit’, width: 50 },
{ text: ‘Quantity’, datafield: ‘ItemQuantity’, width: 100, align: ‘right’, cellsalign: ‘right’ },
{ text: ‘Price’, datafield: ‘BidPrice’, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’, width: 100 },
{ text: ‘Total’, datafield: ‘BidItemTotal’, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’, width: 100 },
{ text: ”, datafield: ‘VersionDescription’, hidden: true},
],
groups: [‘VersionDescription’]
});

$(“#jqxgrid2”).jqxGrid(
{
source: employeesAdapter,
rowdetails: true,
width: ‘100%’,
autoheight: true,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin-bottom: 30px; height: 1000px;’></div>”, rowdetailshidden: true},
columns: [
{ text: ‘Contractor’, datafield: ‘Contractor’, width: 300, cellsrenderer: renderer },
{ text: ‘Bid Total’, datafield: ‘BidTotal’, width: 100, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’ }
]
});

[Peter StoevKeymaster]

Hi Gopre400,

To increase the height of the nested Grid, set the height of the rowdetailstemplate to a Number ex. 200.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Gopre400Participant]

I tried different numbers (from 25px to 1000px) in the rowdetailstemplate but the space did not change.
$(“#jqxgrid2”).jqxGrid(
{
source: employeesAdapter,
rowdetails: true,
width: ‘100%’,
height: 700,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin-bottom: 30px; height: 200px;’></div>”, rowdetailshidden: true},
columns: [
{ text: ‘Contractor’, datafield: ‘Contractor’, width: 300, cellsrenderer: renderer },
{ text: ‘Bid Total’, datafield: ‘BidTotal’, width: 100, align: ‘right’, cellsalign: ‘right’, cellsformat: ‘c2’ }
]
});

[Peter StoevKeymaster]

Hi Gopre400,

The expected setting is a Number. Please, look at this sample: http://jsfiddle.net/jqwidgets/A59WK/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Gopre400Participant]

ohhh rowdetailsheight is a property of the template. I get it now, thank you!

rowdetailstemplate: {
rowdetails: “<div style=’margin: 10px;’>Row Details</div>”,
rowdetailsheight: 50
},

[Author]

Posts