We have a grid with a date column. You have to scroll to the right in the grid to see this column. In firefox, if you take the following actions, the date picker filter shows up completely off the grid:
1. Have an igGrid with date column that cannot be seen initially and you have to scroll right in the grid to see the column.
2. Open in firefox and filter that column by a date that has no matches in the grid (so all records will be removed). In this instance the date picker shows up correctly on the grid.
3. Now click the filter drop down again for the same column - the date picker shows up way to the right and completely off the grid.
Please see attached for screen shots. It appears what it is doing is shifting the grid columns back to the left (I can see first column again, and the date picker is showing up where the date column is now hidden (would have to scroll to the right in the grid).
Hello Ryan Rupp,
I will be happy to assist you with this issue.
May I ask if you can provide me with the version number for the igGrid script file currently being used in your app? Note, the latest version is: 13.2.20132.2157. Also, can you provide me with the markup you are currently using to display this igGrid? This will allow me to reproduce the behavior in my environment and provide you with a solution.
I am looking forward to hearing from you.
This is with version 13.2.20132.1020 of igGrid script file.
Here is what gets generated in firefox:
<div id="GridPlaceHolder" class="listpanedatagrid "> <table controlId="24470" controlType="igGrid" data-widget="Grid" id="ListPaneDataGrid" screenId="2735"></table> <script type="text/javascript">$(function () {$('#ListPaneDataGrid').igGrid({ dataSource: '/SCALE/Insight/ListPaneGridDataSourceBind?frmId=2735&tbl=Metadata_Insight_Shipment_View&grdId=24470&fltrs=filterToken',autoGenerateColumns: false,autoGenerateLayouts: false,mergeUnboundColumns: false, responseDataKey: 'Records', generateCompactJSONResponse: false, enableUTCDates: true, columns: [ { headerText: 'Shipment ID', key: 'SHIPMENT_ID', dataType: 'string', width: '120px', hidden: false }, { headerText: 'Customer', key: 'CUSTOMER', dataType: 'string', width: '100px', hidden: false }, { headerText: 'Customer Name', key: 'CUSTOMER_NAME', dataType: 'string', width: '120px', hidden: false }, { headerText: 'Ship To', key: 'SHIP_TO', dataType: 'string', width: '100px', hidden: false }, { headerText: 'Ship To Name', key: 'SHIP_TO_NAME', dataType: 'string', width: '120px', hidden: false }, { headerText: 'Carrier', key: 'OUTBOUND_CARRIER', dataType: 'string', width: '120px', hidden: false }, { headerText: 'Carrier Service', key: 'CARRIER_SERVICE', dataType: 'string', width: '120px', hidden: false }, { headerText: 'Leading Status', key: 'LEADING_STS', dataType: 'string', width: '120px', hidden: false }, { headerText: 'Trailing Status', key: 'TRAILING_STS', dataType: 'string', width: '120px', hidden: false }, { headerText: 'Shipping Load', key: 'SHIPPING_LOAD_NUM', dataType: 'number', width: '120px', hidden: false }, { headerText: 'Scheduled Ship Date', key: 'SCHEDULED_SHIP_DATE', dataType: 'date', width: '150px', hidden: false }, { headerText: 'Order Type', key: 'ORDER_TYPE', dataType: 'string', width: '120px', hidden: false }, { headerText: 'Company', key: 'COMPANY', dataType: 'string', width: '125px', hidden: false }, { headerText: 'Warehouse', key: 'WAREHOUSE', dataType: 'string', width: '125px', hidden: false }, { headerText: 'Internal Shipment Number', key: 'INTERNAL_SHIPMENT_NUM', dataType: 'number', width: '100px', hidden: true } ], features: [ { summaryExprUrlKey: 'Summaries', summariesResponseKey: 'Metadata.Summaries', name: 'Summaries', type: 'local' }, { name: 'ColumnMoving', mode: 'deferred', moveType: 'dom', columnMoved: function(evt,ui){_webUi.Grid.gridColumnMoved(evt, ui)} }, { filterExprUrlKey: 'filter', filterLogicUrlKey: 'filterLogic', name: 'Filtering', type: 'local', caseSensitive: false }, { name: 'Hiding', columnHidden: function(evt,ui){_webUi.Grid.gridColumnHidden(evt, ui)}, columnShown: function(evt,ui){_webUi.Grid.gridColumnShown(evt, ui)} }, { name: 'Selection', mode: 'row' }, { name: 'Resizing', allowDoubleClickToResize: true, columnResized: function(evt,ui){_webUi.Grid.gridColumnSizeChanged(evt, ui)} }, { name: 'GroupBy', resultResponseKey: 'GroupBy', groupByUrlKey: 'sort', groupByUrlKeyAscValue: 'asc', groupByUrlKeyDescValue: 'desc', type: 'local', groupedColumnsChanged: function(evt,ui){_webUi.Grid.gridGroupedColumnsChanged(evt, ui)} }, { sortUrlKey: 'sort', sortUrlKeyAscValue: 'asc', sortUrlKeyDescValue: 'desc', name: 'Sorting', type: 'local', mode: 'multiple', columnSorted: function(evt,ui){_webUi.Grid.gridColumnSorted(evt, ui)}, modalDialogButtonApplyClick: function(evt,ui){_webUi.Grid.gridmodalDialogButtonApplyClick(evt, ui)} }, { recordCountKey: 'TotalRecordsCount', pageIndexUrlKey: 'page', pageSizeUrlKey: 'pageSize', name: 'Paging', pageSize: 50, type: 'remote', defaultDropDownWidth: '80px' } ], alternateRowStyles: false, height: '100%', rowTemplate: null, width: '100%', fixedHeaders: true, renderCheckboxes: true, localSchemaTransform: true });});</script> <script type="text/javascript">$(function () { $('#ListPaneDataGrid').attr({ dbtable: "Metadata_Insight_Shipment_View" });})</script> </div> </div> </div>
Hi Ryan,
I don't see version 13.2.20132.1020 as an official release for IgniteUI. May I ask if you can verify the version of the igGrid scripts you are using.
Also, I was not able to reproduce the behavior you described with the latest version of IgniteUI. Please review the attached sample to ensure I have create a sample that correctly mimics your application logic and make any modifications, if needed.
I pulled the version right out of the various grid js files that ships with infragistics. Here is an example:
/*!@license
* Infragistics.Web.ClientUI Grid Merged Cells 13.2.20132.1020
*
* Copyright (c) 2011-2013 Infragistics Inc.
Is there a better place I should e pulling it from?
I've recreated the issue in the attached sample. Open the sample in FIREFOX and do the following:
1. in the grid, scroll over to the column that starts with "Scheduled Shi...".
2. In the filter drop down, choose any date.
3. the grid will shift back to the first column after choosing the date. now scroll over to the same column "Scheduled Shi..." again.
4. click the button for filter drop down in that column, and it will show up off the grid, way over to the right of the screen.
Thanks!