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 Peter:
For now this issue seems resolved. I have to install it on the customer's server to verify it works for them but I am hopeful that it will.
I have an additional question. I am trying to get my app to work with IE11. I have succeeded in getting it to work with IE11, and ig2013v1. (barelym my grid takes 18 secnds to render in IE11 and 2.3 secs in Firefox and a like number in Chrome)
I haven't really gotten my 2013v2 example to work. Also I can get the jsfiddle example to work in IE11.
I figure a starting point is to ask how to get the jsfiddle example at http://jsfiddle.net/gh/get/jquery/1.9.1/igniteuisamples/jsfiddle-samples/tree/master/EN/HtmlSamples/grid/bind-grid-with-ko/ to work in IE11. It works fine for me in FF and Chrome. In IE11 the grid does not show up.
Hi jspooner_mso,
I've just tested the sample mentioned with IE11 ( both under Win7 and 8.1), but so far there appear to be no issues with displaying of the grid or loading times. As the sample uses CDN for all the scripts used, I would suggest inspecting developer tools to determine whether some of the resources are unreachable.
Please feel free to contact me with any updates.
Thanks:
I am still working on the page so I can't really comment yet. But I don't want to ignore your reply. What I am seeing so far is my performance issue under IE11 s traceable to some template buttons in the grid. If I get rid of them, the rendering is fine.
By which I mean my culprit is in this html in my grid. Get rid of them and just implement a button outside the grid based on the selected row and all is fine.
So I assume the rendering performance is related to this. But I am still working on it. Overall things are much better.
Hello jspooner_mso,
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.
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.
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.