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>
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.
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.
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.
Hello jspooner_mso,
Please feel free to contact me with any updates or additional questions.
Thank you for your update ! Glad to hear you seem to be making progress with this matter.
Please do not hesitate to contact me with any updates.