jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Grid 3.0.4 potential bug with window resize
This topic contains 8 replies, has 2 voices, and was last updated by reblutus 11 years, 6 months ago.
-
Author
-
With 3.0.3 this issue was not present.
With 3.0.4 on some of my grids, if you try to resize the window width smaller and smaller, at one point the grid’s content will disappear. An horizontal scroll bar appears but the content area is empty. All you see is the grid border, the horizontal scrollbar and the status bar. All other element are not rendered: filter row, group row, header row, grid rows.
All columns are fixed width except one which has no width set, so this one should take the rest. I have the impression that when the window size has reached a smaller width than the total of the fixed width columns, the grid stops displaying all rows.
here is my grid’s code:
$("#storesGrid").jqxGrid({ theme:theme, source:storeGridDataAdapter, altrows: true, columns: [ { text: '', menu: false, sortable: false, filterable: false, datafield: 'selected', columntype: 'checkbox', width: gridCheckboxCellWidth, resizable: false, pinned:true, renderer: function () { return '<div style="margin-left: 10px; margin-top: 5px;"></div>'; }, rendered: function (element) { $(element).jqxCheckBox({ width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0, theme:theme }); checksHeader = $(element); $(element).on('change', function (event) { if(!updatingChecksHeader){ var rows = $("#storesGrid").jqxGrid('getrows'); var checked = event.args.checked; doingMassCheking = true; $("#storesGrid").jqxGrid('beginupdate'); for (var i = 0; i < rows.length; i++) { $("#storesGrid").jqxGrid('setcellvaluebyid', rows[i].outputId, 'selected', checked); rows[i].selected = checked; } $("#storesGrid").jqxGrid('endupdate'); doingMassCheking = false; refreshSelectedCheckbox(0); } }); return true; } }, { text: '@Messages("stores.column.status")', datafield: 'statusId', displayfield: 'status', filtertype: 'list', filteritems: deviceStatus_FilterItems, cellsrenderer: deviceStatus_CellsRenderer, cellsalign:"center", width: 60, editable: false, resizable: false, createfilterwidget: deviceStatus_createFilterWidget }, { text: '@Messages("stores.column.storeNumber")', datafield: 'storeNumber', width:100, editable: false }, { text: '@Messages("stores.column.address")', datafield: 'address1', editable: false }, { text: '@Messages("stores.column.city")', datafield: 'city', width:150, editable: false }, { text: '@Messages("stores.column.province")', datafield: 'province', width:100, editable: false }, { text: '@Messages("stores.column.outputId")', datafield: 'outputId', editable: false, width:0, hidden:true }, { text: 'Zone', datafield: 'zoneName', editable: false, width:0, hidden:true}, { text: '@Messages("stores.column.musicStation")', datafield: 'stationId', width:200, displayfield: 'station', editable:false }, { text: '@Messages("stores.column.calendar")', datafield: 'calendarId', width:200, displayfield: 'calendar', editable:false } ], width: "100%", height: "100%", groupable: false, editable: true, editmode:"click", sortable: true, showsortcolumnbackground: true, showfilterrow: true, filterable: true, selectionmode: 'none', enabletooltips: true, rowdetails: true, columnsresize: true, initrowdetails: function (index, parentElement, gridElement, datarecord) { var tabsdiv = null; tabsdiv = $($(parentElement).children()[0]); if (tabsdiv != null) { var address = datarecord.address1; if(datarecord.address2 != null) { address += '<br>' + datarecord.address2; } storeInfoDiv = tabsdiv.find('.storeInformation'); var storeInfoContainer = $('<div>' + address + '<br>' + datarecord.city + '<br>' + datarecord.province + '<br>' + datarecord.phoneNumber + '<br>' + 'DeviceId: ' + datarecord.deviceId + '<br>' + '</div>'); $(storeInfoDiv).append(storeInfoContainer); } }, rowdetailstemplate: { rowdetails: "<div><div class='storeInformation'></div></div>", rowdetailsheight: 100 } ,showstatusbar:true ,statusbarheight:"30" ,renderstatusbar: function($statusbar){ var $container = $('<div class="statusBar"></div>'); var $statusDiv = $('<div id="status" class="left"></div>'); var $massEditButton = $('<button id="massEditButton" type="button" class="btn"><i class="icon-pencil"></i> @Messages("default.button.edit")</button>'); $massEditButton .jqxButton({theme:theme, disabled: true}) .on("click", function(){showMassEditWindow();}); $container.append($massEditButton); var $exportToButton = $('<button type="button" class="btn"><i class="icon-download-alt"></i> @Messages("default.button.export")</button>') .jqxButton({theme:theme}) .on("click", function(){exportTo($(this).closest(".jqx-grid"));}); $container.append($exportToButton); $container.append($statusDiv); $statusbar.append($container); } }) .on("groupschanged", function(){ if($(this).jqxGrid("getrootgroupscount") > 0){ $("[role='columnheader']").find(".jqx-checkbox").remove(); } }) .on("bindingcomplete", function(){ $(this).jqxGrid("localizestrings",{groupsheaderstring: "@Messages("grid.groupsheaderstring")"}); }) .on("filter", function (event) {refreshSelectedCheckbox(0);}) .on('cellvaluechanged', function (event) { if(!updatingChecksHeader){ onGridCellEdit(event); } }); // apply localization. $("#storesGrid").jqxGrid('localizestrings', localizationobj);
Hi reblutus,
If you request someone to test your scenario, then consider posting a full sample which reproduces it. Otherwise, we would not be able to help.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comWhat else would you need, I posted the whole grid?
Further more, I also tested with all columns with fixed width and I still get the same bug with 3.0.4: as soon as I reduce the windows width small than the total of the columns width (plus a ~40 px) the grid stops displaying the content rows. So having a column with no width set doesn’t affect, the bug persist.
Hi reblutus,
We cannot run a web page from the posted code, so how can we test it according to you? There is no Data, there is no HTML. There are no JavaScript files. In addition, our test sample works as expected – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/autosize.htm
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comPlease provide me an example with a grid that when the window resize to smaller width an horizontal scroll bar appears. For this some columns will need to be fixed width. During that time I will prepare for you a page with the bug present.
Thank you
Hi reblutus,
When you post a sample web page, we would test your scenario with the latest version.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHere it is. I point directly to your library 3.0.4. Paste that code in a new file.html and open in a browser with the window larger than ~867px you will see the grid’s content. Now reduce the window and you will see the content disapear as soon as the content is too large for the grid. Normally a horizontal scrollbar appear to allow scrolling of the content, but the content is now gone!
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Grid Bug Test</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- JQX js --> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.grouping.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdragdrop.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxradiobutton.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxgrid.export.js"></script> </head><body style="" screen_capture_injected="true"> <script type="text/javascript"> // Ajax Call to Get the Calendar Data ///////////////////////////////////////////////////////////// var existingStatusDataAdapter; var pendingChanges; // Storage for local changes before we send them to the server var editedCells = {}; // Map of edited cell identifiers, used to display them in red italic var checksHeader = null; // The checkbox in the column header var updatingChecksHeader = false; // Flag for code edition of the header checkbox, it will not propagate changes to the rows when true var doingMassCheking = false; var totalChecksCount = 0; // Total rows checked, including currently filtered out ones var resetPendingChanges = function() { pendingChanges = {}; pendingChanges["stationId"] = {}; pendingChanges["calendarId"] = {}; editedCells = {}; $("#storesGrid").jqxGrid('refresh'); $("#storesGrid").jqxGrid("clearselection") $("#saveDiv").hide(); } var existingZonesSource = { datatype: "json", datafields: [ { name: 'name', type: 'string'}] }; var existingZonesDataAdapter; var availableStationsSource = { datatype: "json", datafields: [ { name: 'name', type: 'string'}, { name: 'id', type: 'long'}], id: 'id' }; var availableStationsDataAdapter; var availableStationsValues = { value: 'id', name: 'name' } var availableCalendarsSource = { datatype: "json", datafields: [ { name: 'name', type: 'string'}, { name: 'id', type: 'long'}], id: 'id' }; var availableCalendarsDataAdapter; var availableCalendarsValues = { value: 'id', name: 'name' } var existingStatusSource = { datatype: "json", datafields: [ { name: 'name', type: 'string'}, { name: 'id', type: 'long'}], id: 'id' }; var existingStatusDataAdapter; var existingStatusValues = { value: 'id', name: 'name' } var storeGridSource = { datatype: "json", datafields: [ { name: 'selected', type: 'bool'}, { name: 'address1', type: 'string'}, { name: 'address2', type: 'string'}, { name: 'city', type: 'string'}, { name: 'province', type: 'string'}, { name: 'storeNumber', type: 'string'}, { name: 'phoneNumber', type: 'string'}, { name: 'zoneName', type: 'string'}, { name: 'deviceId', type: 'string'}, { name: 'outputId', type: 'int'}, { name: 'stationId', type: 'int'}, { name: 'calendarId', type: 'int'}, { name: 'statusId', type: 'int'}, { name: 'station', value: 'stationId', values: availableStationsValues }, { name: 'calendar', value: 'calendarId', values: availableCalendarsValues }, { name: 'status', value: 'statusId', values: existingStatusValues } ], id: 'outputId' }; var storeGridDataAdapter; var getStoresDataSuccessCB = function(data) { var storesData = injectSelected(data['stores']); var stationsData = data['availableStations']; var calendarsData = data['availableCalendars']; var zonesData = data['existingZones']; var statusData = data['existingStatus']; existingZonesSource.localdata = zonesData; existingZonesDataAdapter.dataBind();// = new $.jqx.dataAdapter(existingZonesSource); availableStationsSource.localdata = stationsData; availableStationsDataAdapter.dataBind();// = new $.jqx.dataAdapter(availableStationsSource); availableStationsValues.source = availableStationsDataAdapter.records; availableCalendarsSource.localdata = calendarsData; availableCalendarsDataAdapter.dataBind();// = new $.jqx.dataAdapter(availableCalendarsSource); availableCalendarsValues.source = availableCalendarsDataAdapter.records; existingStatusSource.localdata = statusData; existingStatusDataAdapter.dataBind();// = new $.jqx.dataAdapter(existingStatusSource); existingStatusValues.source = existingStatusDataAdapter.records; storeGridSource.localdata = storesData; storeGridDataAdapter = new $.jqx.dataAdapter(storeGridSource); $("#storesGrid").jqxGrid('updatebounddata', 'cells'); resetPendingChanges(); //refreshSelectedCheckbox(0); } // Grid Rendering ////////////////////////////////////////////////////////////// function changeCursor(el, cursor) { el.style.cursor = cursor; }; var cellclass = function (row, datafield, value, rowdata) { if(Object.keys(editedCells).length) $("#saveDiv" ).show(); else $("#saveDiv" ).hide(); if((datafield + rowdata.outputId) in editedCells) { return "editedCell"; } } function injectSelected(data){ for(index in data){ data[index]["selected"] = false; } return data;} // Page Loading ///////////////////////////////////////////////////////////// $(function(){ // Init JQX Widgets ////////////////////////////////////////////////////////////////// existingZonesDataAdapter = new $.jqx.dataAdapter(existingZonesSource); availableStationsDataAdapter = new $.jqx.dataAdapter(availableStationsSource); availableCalendarsDataAdapter = new $.jqx.dataAdapter(availableCalendarsSource); existingStatusDataAdapter = new $.jqx.dataAdapter(existingStatusSource); storeGridDataAdapter = new $.jqx.dataAdapter(storeGridSource); $("#storesGrid").jqxGrid({ source:storeGridDataAdapter, altrows: true, columns: [ { text: '', menu: false, sortable: false, filterable: false, datafield: 'selected', columntype: 'checkbox', width: 40, resizable: false, pinned:true, renderer: function () { return '<div style="margin-left: 10px; margin-top: 5px;"></div>'; }, rendered: function (element) { $(element).jqxCheckBox({ width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 }); checksHeader = $(element); $(element).on('change', function (event) { if(!updatingChecksHeader){ var rows = $("#storesGrid").jqxGrid('getrows'); var checked = event.args.checked; doingMassCheking = true; $("#storesGrid").jqxGrid('beginupdate'); for (var i = 0; i < rows.length; i++) { $("#storesGrid").jqxGrid('setcellvaluebyid', rows[i].outputId, 'selected', checked); rows[i].selected = checked; } $("#storesGrid").jqxGrid('endupdate'); doingMassCheking = false; //refreshSelectedCheckbox(0); } }); return true; } }, { text: 'Store Number', datafield: 'storeNumber', width:100, editable: false }, { text: 'Address', datafield: 'address1', editable: false }, { text: 'City', datafield: 'city', width:150, editable: false }, { text: 'Province', datafield: 'province', width:100, editable: false }, { text: 'Identification', datafield: 'outputId', editable: false, width:0, hidden:true }, { text: 'Zone', datafield: 'zoneName', editable: false, width:0, hidden:true}, { text: 'Music Station', datafield: 'stationId', width:200, displayfield: 'station', editable:false }, { text: 'Calendar', datafield: 'calendarId', width:200, displayfield: 'calendar', editable:false } ], width: "100%", height: "100%", groupable: false, editable: true, editmode:"click", sortable: true, showsortcolumnbackground: true, showfilterrow: true, filterable: true, selectionmode: 'none', enabletooltips: true, rowdetails: true, columnsresize: true, initrowdetails: function (index, parentElement, gridElement, datarecord) { var tabsdiv = null; tabsdiv = $($(parentElement).children()[0]); if (tabsdiv != null) { var address = datarecord.address1; if(datarecord.address2 != null) { address += '<br>' + datarecord.address2; } storeInfoDiv = tabsdiv.find('.storeInformation'); var storeInfoContainer = $('<div>' + address + '<br>' + datarecord.city + '<br>' + datarecord.province + '<br>' + datarecord.phoneNumber + '<br>' + 'DeviceId: ' + datarecord.deviceId + '<br>' + '</div>'); $(storeInfoDiv).append(storeInfoContainer); } }, rowdetailstemplate: { rowdetails: "<div><div class='storeInformation'></div></div>", rowdetailsheight: 100 } ,showstatusbar:true ,statusbarheight:"30" ,renderstatusbar: function($statusbar){ var $container = $('<div class="statusBar"></div>'); var $statusDiv = $('<div id="status" class="left"></div>'); var $massEditButton = $('<button id="massEditButton" type="button" class="btn"><i class="icon-pencil"></i> Edit</button>'); $massEditButton .jqxButton({disabled: true}) .on("click", function(){showMassEditWindow();}); $container.append($massEditButton); var $exportToButton = $('<button type="button" class="btn"><i class="icon-download-alt"></i> Export</button>') .jqxButton({}) .on("click", function(){exportTo($(this).closest(".jqx-grid"));}); $container.append($exportToButton); $container.append($statusDiv); $statusbar.append($container); } }) .on("groupschanged", function(){ if($(this).jqxGrid("getrootgroupscount") > 0){ $("[role='columnheader']").find(".jqx-checkbox").remove(); } }) .on("bindingcomplete", function(){ $(this).jqxGrid("localizestrings",{groupsheaderstring: "Drag a column here to group this column"}); }) .on("filter", function (event) {/*refreshSelectedCheckbox(0);*/}) .on('cellvaluechanged', function (event) { if(!updatingChecksHeader){ onGridCellEdit(event); } }); // Call initial fetching of the data //getStoresData(); var data = {"stores":[{"address1":"3, rue Sainte-Catherine Est","address2":null,"city":"Gatineau","province":"QC","storeNumber":"6555","phoneNumber":"(514) 844-1679","statusId":0,"outputId":1,"deviceId":"LHGH-SB1-000001","zoneName":"Restaurant","stationId":1,"calendarId":1}],"availableStations":[{"name":"Subway URBAIN","id":1},{"name":"Subway RURAL","id":2}],"availableCalendars":[{"name":"automne","id":1},{"name":"reblut","id":2}],"existingZones":[{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"},{"name":"Restaurant"}],"existingStatus":[{"name":"New","id":0},{"name":"ReadyToPrint","id":1},{"name":"Ok","id":2},{"name":"Warning","id":3},{"name":"Critical","id":4},{"name":"Printed","id":5}]} getStoresDataSuccessCB(data); });</script><div id="storesGrid"></div> </body></html>
Hi reblutus,
Now, with a sample is much better and we were able to test your code
Set the “statusbarheight” to a Number i.e to 30 instead of “30”.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comOk thank you, that fixes the bug.
You could implement a tolerance for that.
Thank you
-
AuthorPosts
You must be logged in to reply to this topic.