Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
65
igHierchicalGrid Child Grid vertical scrollbar Disappearing
posted

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,

                   

autoGenerateColumns: false,

                   

autoGenerateLayouts: false,

                   

fixedHeaders: true,

                   

virtualization: false,

                   

width: '90%',                   

                   

height: '100%',

                   

features: [

                                {

                                   

name: 'Updating',

                                       

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 }

                                    ]

                                }

                              ],

                   

columns: [

                        {

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>'}                       

                    ]

                }

                ]

            }

Parents
No Data
Reply
  • 24671
    Suggested Answer
    posted

    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

Children