Hello,
I have a hierarchical grid and when I expand a child that has more records than will fit in the child area, after the expand animation stops, the vertical scroll bar dissappears for the child grid and the child headers are not fixed.
igHierarchicalGrid: {dataSource: haulers, width: '100%', height: '100%', primaryKey: 'Item', autoCommit: false,
features: [ {
name: 'Updating',
enableAddRow: true,
enableDeleteRow: true,
editMode: 'row',
generatePrimaryKeyValue: function(evt, ui){GetItemNumber(evt, ui);},
rowAdding: function(evt, ui){GridRowAdding(evt, ui);},
editRowEnding: function(evt, ui){GridRowEditing(evt, ui);},
rowDeleting: function(evt, ui){GridRowDeleting(evt, ui);},
dataDirty: function(evt, ui){return(false);}
} ],
width: '90%',
height: '90%',
autoGenerateColumns: false,
autoGenerateLayouts: false,
virtualization: false,
columns: [
{key: 'HaulerName', headerText: 'Hauler Name', width: 300, dataType: 'string', changeTracking: { params: [ $data ]} },
{key: 'HaulerMID', headerText: 'HaulerMID', width: 80, dataType: 'int', template: '
<span class=\'numericData\'>${HaulerMID}</span>'},
{
key: 'HaulerEmail', headerText: 'Email', width: 175, dataType: 'string'},
key: 'IsManualReview', headerText: 'Manual Review', width: 80, dataType: 'bool', format: 'checkbox'},
key: 'Created', headerText: 'Created', width: 200, dataType: 'string', template: '<span class=\'numericData\'>${Created}</span>'},
key: 'CreatedBy', headerText: 'Created By', width: 175, dataType: 'string'},
key: 'Updated', headerText: 'Updated', width: 200, dataType: 'string', template: '<span class=\'numericData\'>${Updated}</span>'},
key: 'UpdatedBy', headerText: 'Updated By', width: 175, dataType: 'string'},
key: 'HaulerHID', headerText: 'HaulerHID', width: 80, dataType: 'int', template: '<span class=\'numericData\'>${HaulerHID}</span>'},
key: 'Item', headerText: 'Item', width: 1, dataType: 'int'},
key: 'HaulerID', headerText: 'Hauler ID', width: 1, dataType: 'int', template: '<span class=\'numericData\'>${HaulerID}</span>'},
key: 'state', headerText: 'State', width: 100, dataType: 'string'}
] ,
columnLayouts: [
key: 'Tanks',
primaryKey: 'MerrickID',
foreignKey: 'HaulerID',
responseDataKey: 'ChildDataTable',
expandCollapseAnimations: true,
fixedHeaders: true,
height: '100%',
features: [
editMode: 'None',
enableDataDirtyException: false,
enableDeleteRow: false,
enableAddRow: false
},
name: 'Sorting',
type: 'local'
name: 'Summaries',
type: 'local',
compactRenderingMode: false,
columnSettings: [
columnKey: 'HaulerID', allowSummaries: false },
columnKey: 'LeaseName', allowSummaries: false },
columnKey: 'GatheringSystemName', allowSummaries: false },
columnKey: 'TankName', allowSummaries: false },
columnKey: 'OperatorTankNumber', allowSummaries: false },
columnKey: 'MerrickID', allowSummaries: false },
columnKey: 'PurchaserTankID', allowSummaries: false },
columnKey: 'PersonnelName', allowSummaries: false },
columnKey: 'OilHaulPumperName', allowSummaries: false },
columnKey: 'RequestedLoads30D', allowSummaries: true },
columnKey: 'BarrelsConfirmed30D', allowSummaries: true }
]
}
],
key: 'HaulerID', headerText: 'HaulerID', headerTextHorizontalAlignment: 'right', width: 75, dataType: 'number',
template: '<span class=\'numericData\'>${HaulerID}</span>'},
key: 'LeaseName', headerText: 'Lease', width: 300, dataType: 'string'},
key: 'GatheringSystemName', headerText: 'Gathering System', width: 300, dataType: 'string'},
key: 'TankName', headerText: 'TankName', width: 300, dataType: 'string'},
key: 'RequestedLoads30D', headerText: 'Loads', width: 75, dataType: 'number',
template: '<span {{if ${RequestedLoads30D} == \'0\' && ${OilHaulPumperName} != \'Not In Oil Haul\'}}class=\'numericAttention\'{{else}}class=\'numericData\'{{/if}}>${RequestedLoads30D}</span>'},
key: 'BarrelsConfirmed30D', headerText: 'Barrels', width: 75, dataType: 'number',
template: '<span {{if ${BarrelsConfirmed30D} == \'0\' && ${OilHaulPumperName} != \'Not In Oil Haul\'}}class=\'numericAttention\'{{else}}class=\'numericData\'{{/if}}>${BarrelsConfirmed30D}</span>'},
key: 'OperatorTankNumber', headerText: 'Operator Tank Number', width: 100, dataType: 'string'},
key: 'MerrickID', headerText: 'ProCount ID', width: 50, dataType: 'string',
template: '<span class=\'numericData\'>${MerrickID}</span>'},
key: 'PurchaserTankID', headerText: 'Purchaser Tank ID', width: 100, dataType: 'string',
template: '<span class=\'numericData\'>${PurchaserTankID}</span>'},
key: 'PersonnelName', headerText: 'ProCount Pumper', width: 200, dataType: 'string'},
key: 'OilHaulPumperName', headerText: 'Oil Haul Pumper', width: 200, dataType: 'string',
template: '<span {{if ${OilHaulPumperName} == \'Not In Oil Haul\'}} class=\'attention\'{{/if}}>${OilHaulPumperName}</span>'}
"I suggest leaving the width/height options either empty, or set them to fixed pixel values, because you are having widths defined on all columns anyway. Mixing percentage-based heights/widths with pixel based column widths can lead to unpredictable results."
This is not really an option. I want height based on % of screen height and I want width based on ability to display the colum data (this is HTML5 and I want it to run on any device as usably as possible).
"Also, just a side question - why would you need to set a column width to 1px ? Is this because you want to hide that column? In that case you can set the hidden column property to "true"."
Yes, this is why it was set to 1. I do want to retain the ability to display these columns for troubleshooting/super user information. I have since changed them to hidden and included the functionality to un-hide them for administrators. Good point for sure, but already beyond that.
Thanks!
Greg Hamilton
I suggest leaving the width/height options either empty, or set them to fixed pixel values, because you are having widths defined on all columns anyway. Mixing percentage-based heights/widths with pixel based column widths can lead to unpredictable results.
Also, just a side question - why would you need to set a column width to 1px ? Is this because you want to hide that column? In that case you can set the hidden column property to "true".
Hope it helps. Thanks,
Angel