I have an infragistics Ignite Grid, with horizontal and vertical scroll bar. All is fine, except when viewing the page from a Panasonic CF31 with Firefox 24. In this case the vertical scroll bar disappears. I can put the grid inside a div and using overflow can have scrollbars that way, but its not desrireable because the header 'scrolls away'.
Anyone have an idea how I can debug this?
Device resolution Div Scroll Infragistics Scroll
Desktop 1024x768 works works
CF31 1024x768 works no vertical scroll bar
CF30* 1024x768 works works
<div id="GridWrapper" data-bind="visible:EventDataRetrieved" >
<table id="eventsGrid" data-bind="igGrid: {dataSource: eventData, responseDataKey: 'Records', autoGenerateColumns: false, autoGenerateLayouts: false, height:'350', width:'950', renderCheckboxes: true,autoCommit:true,primaryKey:'row_id',
features:
[
{
name : 'Resizing',
},
name: 'GroupBy',
featureChooserText:'features',
groupByAreaVisibility:'top',
modalDialogHeight:200
name: 'Selection',
mode: 'row',
multipleSelection: true,
rowSelectionChanged: onRowSelected
name: 'Sorting',
type: 'local'
}
,
name: 'Tooltips',
tooltipShowing : function(evt, args)
columnSettings: [
{ columnKey: 'has_footprint', allowTooltips: true },
{ columnKey: 'entry_tstmp', allowTooltips: true }
],
visibility: 'always',
showDelay: 1000,
hideDelay: 500
{ name: 'Updating', enableAddRow: false, enableDeleteRow: false, editMode: 'none',
columnKey: 'footprint_avail',
editorOptions: { readOnly: 'true' }
columnKey: 'entry_tstmp',editorOptions: { readOnly: 'true' }
columnKey: 'group_name', editorOptions: { readOnly: 'true' }
columnKey: 'sub_name',editorOptions: { readOnly: 'true' }
columnKey: 'loc_name', editorOptions: { readOnly: 'true' }
columnKey: 'ev_cfg_desc', editorOptions: { readOnly: 'true' }
columnKey: 'manu_name',editorOptions: { readOnly: 'true' }
columnKey: 'model_num', editorOptions: { readOnly: 'true' }
columnKey: 'mech_val', editorOptions: { readOnly: 'true' }
columnKey: 'ctr_voltage_val',editorOptions: { readOnly: 'true' }
columnKey: 'event_note_count', editorOptions: { readOnly: 'true' }
]
columns: [
{key: 'entry_tstmp', headerText: 'Time Stamp', width: 120, dataType: 'date', format: 'M/d/yyyy HH:mm:ss tt' },
{key: 'group_name', headerText: 'Group Name', width: 60, dataType: 'string'},
{key: 'sub_name', headerText: 'Sub Name', width: 100, dataType: 'string'},
{key: 'equipment', headerText: 'Equipment', width: 100, dataType: 'string'},
{key: 'loc_name', headerText: 'Breaker', width: 200, dataType: 'string'},
{key: 'ev_cfg_desc', headerText: 'Event', width: 50, dataType: 'string'},
{key: 'manu_name', headerText: 'Mfg', width: 50, dataType: 'string'},
{key: 'model_num', headerText: 'Model', width: 100, dataType: 'string'},
{key: 'mech_val', headerText: 'Mech', width: 100, dataType: 'string'},
{key: 'mech_op_val', headerText: 'Mech Op', width: 100, dataType: 'string'},
{key: 'ctr_voltage_val', headerText: 'Battery', width: 100, dataType: 'string'},
{key: 'event_comments', headerText: 'Event Notes', width: 100, dataType: 'string',
template: '<input type=\'button\' value=\'${event_comments}\' data-id=\'${ev_hdr_id}\' class=\'cmdbtngrid\' onclick=\'model.eventNote(this)\'/>'},
{key: 'asset_comments', headerText: 'Breaker Notes', width: 100, dataType: 'string',
template: '<input type=\'button\' value=\'${asset_comments}\' data-id=\'${equipment}\' class=\'cmdbtngrid\' onclick=\'model.assetNote(this)\'/>'},
{key: 'footprint_avail', headerText: 'Has Footprint', width: 100, dataType: 'bool'},
{key: 'closes_wo', headerText: 'Closes Work Order', width: 100, dataType: 'bool'},
{key: 'sys_voltage_val', headerText: 'Sys kV', width: 50, dataType: 'number'},
{key: 'ev_hdr_id', headerText: 'Event Hdr Id', width: 80, dataType: 'number'},
{key: 'allow_change_wo', headerText: 'allow_change_wo', width: 80, dataType: 'bool', hidden:true},
{key: 'row_id', headerText: 'row', width: 80, dataType: 'number', hidden:true},
{key: 'device_id', headerText: 'Device', width: 80, dataType: 'string'},
{key: 'cfg_id', headerText: 'Cfg', width: 80, dataType: 'number'},
{key: 'trigr_ev_num', headerText: 'trigr_ev_num', width: 80, dataType: 'number', hidden:true},
{key: 'system_status', headerText: 'Status', width: 80, dataType: 'string'},
{key: 'wo_complete_val', headerText: 'wo_complete_val', width: 80, dataType: 'number', hidden:true},
}">
</table>
</div>
Hello jsspooner_mso,
I would suggest checking the developer tools just to confirm that all resources such as js or css files are successfully retrieved. Ensuring that there are no js exceptions thrown when loading the grid on the particular CF31 device would also help.
In the igGrid, the vertical scrollbar is actually located in a div which wraps the table holding the data - this is done to ensure that the fixed headers can be maintained. For this scenario in particular some possible causes may included an overflow:hidden css attribute being somehow applied on that div (the grid may be accessed using jquery by the class ui-iggrid-scrolldiv for the sake of testing) in which case there would be no scrollbar rendered. Another possibility is that some misalignment of the html elements occurs and the scrollbar is there, but gets tucked in beneath another element.
To check whether the scrollbar has been rendered, I would suggest checking if the div's scroll height is greater than its own height:
$(".ui-iggrid-scrolldiv")[0].scrollHeight > $(".ui-iggrid-scrolldiv").height()
That would reveal whether the scrollbar is being rendered. If it is not being rendered at all, I would suggest examining the CSS rules which are being applied.
Hope this helps. Please do not hesitate to contact me with any updates regarding this matter.
Thank you Peter.
What you say makes a lot of sense, you can see a space where a scrollbar belongs on the grid but its just not there.
I may have found the answer, at least I have something that works right now. I removed a references to normalize.js.
I have these tags in the header
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="UTF-8">
<meta charset="UTF-8">
Previously I had the char set tag before the http-equiv tag.
Also I got rid of an overflow in the div which contains the table.
I will reply again later if things continue to work.
Hi,
Please feel free to contact me if you are still experiencing any issues with this scenario.
Thank you for the sample !
I had to reduce the number of rows to one third as in my tests Firefox was displaying a long running script exception. The issue in this case seems to be relate to individual browser speed - especially in terms of rendering the template contents (note that in this case that is 2000 buttons). IE11 appears to be scaling worse than Firefox in rendering large number of elements but for 1/3 of the data the differences are relatively small. I would suggest considering to use paging or virtualization with such a large data source in order to reduce the number of rows rendered at a time - these features can have dramatic effects on performance.
Hope this helps. Please do not hesitate to contact me with any questions.
Attached is a sample file. (I was involved in deploying something) It shows that with the template buttons in my grid , 1000 rows of data, IE11 is painfully slow, and Firefox tho faster is still fairly slow.
Without the template buttons Firefox and IE are similar in speed. My plan is provide the functionality of the buttons in another matter that is slightly less convenient, but the customer can live with.
As a bonus error on my part , if hit the reapply button to update the data I get a script timeout. I may be doing something wrong, this is my first exposure to v2.
Hello jspooner_mso,
So far I am still unable to replicate the performance issue described. Is it possible to share a working sample illustrating the scenario in order to allow me to examine this further ?
Please do not hesitate to contact me with any updates or questions.
Thank you for your reply !
I am currently researching into the performance implications of templating in the igGrid under IE11 and will keep you posted of my findings.