bduguay
Newbie
Posts: 31
|
|
« on: March 27, 2015, 06:30:23 AM » |
|
Hi, I have a datagrid in a panel, which is in a tab(See pic). When I upgraded from 1.3.4 to 1.4.2 the datagrid doesn't show the records until the refresh button is pressed. (See second pic) This is the code I use to create the table <table id="causeGrid" class="easyui-datagrid" style="height:180px" data-options="toolbar:'#causeToolbar', idField:'causeNumber', pagination:true, rownumbers:false, fitColumns:true, singleSelect:true, striped:true, nowrap:true, resizeHandle:'right', onSelect: function(rowIndex, rowData) {$('#causeDetails').val($.trim(rowData.cause));}, onDblClickRow: function(rowIndex, rowData) {viewCause(true, false);}, url: '../TMR_Cause_ReadServlet', queryParams : { <%=DB_Constants.DB_TMR_MAIN_TMR_NUMBER%> : 7555 }"> <thead> <tr> <th data-options="field:'causeNumber',width:0,hidden:true"></th> <th data-options="field:'itemNumber',width:40">Item #</th> <th data-options="field:'cause',width:350">Cause</th> <th data-options="field:'lastModifiedBy',width:0,hidden:true"></th> <th data-options="field:'lastModifiedByName',width:50">Last Updated By</th> <th data-options="field:'lastModifiedDate',width:50">Last Updated Date</th> </tr> </thead> </table>
Please Help. Thank you
|
|
|
Logged
|
|
|
|
jarry
|
|
« Reply #1 on: March 27, 2015, 07:26:43 PM » |
|
Please set 'fit' property to true for your datagrid component, or set its width style to 'width:100%'.
|
|
|
Logged
|
|
|
|
aswzen
|
|
« Reply #2 on: March 29, 2015, 05:11:25 PM » |
|
Please set 'fit' property to true for your datagrid component, or set its width style to 'width:100%'.
wow..i have the same probleeem ..but in loading section im trying to figure out what happened in latest easy ui i found that datagrid-view div element properties showing height always only 22px/24px when rendering or sometimes after rendered, not like the oldest version that automatically autosize the height of datagrid at first time rendering. i think the app developer have to downgrade the datagrid-view renderer. and i tried to make the fiddle with the same properties with my grid, but i don't know why its now showing the same error like in my workspace(localhost).. this is mine in attachment the code: <table id="table_work_order_shooting" class="easyui-datagrid" data-options=" rownumbers:true, singleSelect:true, selectOnCheck:false, checkOnSelect:false, border:false, striped:true, width:'100%', fit:true, url:'/list_work_order_shooting'" pagination="true">
|
|
« Last Edit: March 29, 2015, 05:25:12 PM by aswzen »
|
Logged
|
|
|
|
aswzen
|
|
« Reply #3 on: March 30, 2015, 03:23:45 AM » |
|
here the realworld implementation that showing abnormal datagrid rendering process http://asw.web.id/sandbox/easyui/demo/datagrid/basic.htmlclick load panel and then..please look at the pagination position..why its on top position? i made the json data with php sleep() function about 4 seconds... thank you in advance
|
|
|
Logged
|
|
|
|
bduguay
Newbie
Posts: 31
|
|
« Reply #4 on: March 30, 2015, 07:04:51 AM » |
|
Thank you jarry. That worked for those tabs, but when I applied it to grids that I have in tabs within tabs (see pic), it doesn't work. If you click on a different tab and then go back to the tab with the issue, it will show correctly. Also, I'm trying to set the tab to my 'Main' tab when the dialog is opened and it is no longer working. In 1.3.4 I used the following code, but it is no longer working. $('#tabs').tabs('select', 'Main');
Please advise. Thank you.
|
|
|
Logged
|
|
|
|
jarry
|
|
« Reply #5 on: March 30, 2015, 09:09:30 AM » |
|
|
|
|
Logged
|
|
|
|
bduguay
Newbie
Posts: 31
|
|
« Reply #6 on: March 30, 2015, 09:40:22 AM » |
|
Thanks.
I included the patch on my page and it still doesn't show correctly. The user needs to click on another tab, within the same tab set, and then go back to the tab with the grid on it, in order for it to show correctly.
|
|
|
Logged
|
|
|
|
jarry
|
|
« Reply #7 on: March 30, 2015, 03:20:27 PM » |
|
You may need to show some code snippets to demonstrate how you define the layout,tabs and datagrid.
|
|
|
Logged
|
|
|
|
|
jarry
|
|
« Reply #9 on: March 31, 2015, 01:36:21 AM » |
|
Please prevent from creating the datagrid more than once. Remove the 'class=easyui-datagrid' attribute from the <table> element, or remove the code below from your page. $('#bug_test').datagrid({ onDblClickRow:function(rowIndex){ alert(rowIndex); } });
|
|
|
Logged
|
|
|
|
|
bduguay
Newbie
Posts: 31
|
|
« Reply #11 on: March 31, 2015, 05:07:59 AM » |
|
Here is the code for my dialog.(removed parts that didn't pertain since there is a character limit) <div id="editTMR" class="easyui-dialog" style="width:1040px" data-options="iconCls:'<%=icon%>', closed:true, buttons:'#editTMRButtons', closable:false"> <form id="tmrForm" method="post"> <table> <tr> <td> <div class="easyui-panel" title="Quick Data" style="width:1020px; padding:5px; borderWidth:0" data-options="iconCls:'<%=icon%>'"> <table> <tr> <td><strong>TMR #:</strong></td> <td> <input id="tmrNumber" class="easyui-validatebox easyui-tooltip" readonly name="tmrNumber" title="The Trouble Management Report Number" style="width:80px" /> </td> <td style="padding:1px; border:1px solid #ddd"> <a href="#" class="easyui-linkbutton easyui-tooltip" title="Go to the Trouble Report Number" data-options="iconCls:'icon-tr',plain:true" onclick="verifyGoToTroubleReport()"><strong>Trouble Report #:</strong></a> </td> <td> <input id="trNumber" class="easyui-validatebox easyui-tooltip" readonly name="trNumber" title="The Trouble Report Number" style="width:80px" onclick="verifyGoToTroubleReport()"/> </td> <td><strong>Rank:</strong></td> <td> <input id="rank" class="easyui-validatebox easyui-tooltip" readonly name="rank" style="width:40px" title="The Rank for the Trouble Management Report"/> </td> <td> <div id="severityRanking"> <table> <tr> <td><strong>Qty Rank:</strong></td> <td> <input id="quantityRank" class="easyui-validatebox easyui-tooltip" readonly name="quantityRank" style="width:40px" title="The Quantity Rank for the Trouble Management Report"/> </td> </tr> </table> </div> </td> <td><strong>IDX:</strong></td> <td> <input id="indexPoints" class="easyui-numberbox easyui-tooltip" name="indexPoints" readonly style="width:30px" value="0" title="Index Points for the Trouble Report" /> </td> <td><strong>TMR Due Date:</strong></td> <td> <input id="tmrDueDate" class="easyui-datebox" name="tmrDueDate" readonly style="width:100px"/> </td> <td><strong>Status:</strong></td> <td> <input id="status" class="easyui-validatebox easyui-tooltip" readonly name="status" title="The Status of the Trouble Management Report" style="width:135px" /> </td> </tr> </table> </div> </td> </tr> <tr> <td> <div id="tabs" class="easyui-tabs" style="width:1020px; height:440px"> <div title="Main" style="padding:10px" data-options="iconCls:'icon-main'"> .... </div> <div title="Analysis" style="padding:10px" data-options="iconCls:'icon-analysis'"> .... </div> <div title="Cause" style="padding:10px" data-options="iconCls:'icon-cause'"> <div class="easyui-panel" title="Cause" style="height:210px;width:1000px; padding:0px; borderWidth:0" data-options="iconCls:'icon-cause'"> <table id="causeGrid" class="easyui-datagrid" data-options="toolbar:'#causeToolbar', idField:'causeNumber', pagination:true, fit:true, rownumbers:false, fitColumns:true, singleSelect:true, striped:true, autoRowHeight:false, onSelect: function(rowIndex, rowData) {$('#causeDetails').val($.trim(rowData.cause));}, onDblClickRow: function(rowIndex, rowData) {viewCause(true, false);}, url: '../TMR_Cause_ReadServlet', queryParams : { <%=DB_Constants.DB_TMR_MAIN_TMR_NUMBER%> : <%=TR_Constants.DEFAULT_NO_PRIMARY_KEY%> }"> <thead> <tr> <th data-options="field:'causeNumber',width:0,hidden:true"></th> <th data-options="field:'itemNumber',width:40">Item #</th> <th data-options="field:'cause',width:350">Cause</th> <th data-options="field:'lastModifiedBy',width:0,hidden:true"></th> <th data-options="field:'lastModifiedByName',width:50">Last Updated By</th> <th data-options="field:'lastModifiedDate',width:50">Last Updated Date</th> </tr> </thead> </table> </div> <br /> <div class="easyui-panel" title="Cause Details" style="width:1000px; height:160px; padding:5px; borderWidth:0" data-options="iconCls:'icon-comment'"> <table> <tr> <td> <textarea id="causeDetails" name="causeDetails" class="easyui-tooltip" title="The Cause" style="width:975px; height:110px; resize:none;" placeholder="The Cause" readonly></textarea> </td> </tr> </table> </div> </div> <div title="Countermeasure" style="padding:10px" data-options="iconCls:'icon-countermeasure'"> <div class="easyui-panel" title="Countermeasures" style="height:250px;width:1000px; padding:0px; borderWidth:0" data-options="iconCls:'icon-countermeasure'"> <table id="countermeasuresGrid" class="easyui-datagrid" data-options="idField:'countermeasureNumber', toolbar:'#countermeasuresToolbar',pagination:true, autoRowHeight:false, rownumbers:false, fitColumns:true, singleSelect:true, striped:true, fit:true, onSelect: function(rowIndex, rowData) {showCMA(rowData);}, onDblClickRow: function(rowIndex, rowData) {viewCountermeasure(true, false);}, url: '../TMR_Countermeasures_ReadServlet', queryParams : { <%=DB_Constants.DB_TMR_MAIN_TMR_NUMBER%> : <%=TR_Constants.DEFAULT_NO_PRIMARY_KEY%> }"> <thead> <tr> <th data-options="field:'countermeasureNumber',width:0,hidden:true"></th> <th data-options="field:'causeNumber',width:0,hidden:true"></th> <th data-options="field:'causeItemNumber',width:15">Cause #</th> <th data-options="field:'tmrNumber',width:0,hidden:true"></th> <th data-options="field:'itemNumber',width:13">Item #</th> <th data-options="field:'countermeasureDetails',width:120">Details</th> <th data-options="field:'cmAssignedTo',width:0,hidden:true"></th> <th data-options="field:'cmAssignedToName',width:35">Assigned To</th> <th data-options="field:'cmDueDate',width:23">Due Date</th> <th data-options="field:'cmCompletedDate',width:30">Completed Date</th> <th data-options="field:'cmAnalysisResponse',width:0,hidden:true"></th> <th data-options="field:'cmaDoneBy',width:0,hidden:true"></th> <th data-options="field:'cmaDoneByName',width:0,hidden:true"></th> <th data-options="field:'cmaCompletedDate',width:0,hidden:true"></th> <th data-options="field:'cmaPlatformQA',width:0,hidden:true"></th> <th data-options="field:'cmaPlatformQAName',width:0,hidden:true"></th> <th data-options="field:'lastModifiedBy',width:0,hidden:true"></th> <th data-options="field:'lastModifiedByName',width:35">Last Updated By</th> <th data-options="field:'lastModifiedDate',width:30">Last Updated Date</th> </tr> </thead> </table> </div> <br /> <div class="easyui-panel" title="Countermeasure Analysis" style="width:1000px; height:130px; padding:5px; borderWidth:0" data-options="iconCls:'icon-countermeasure-alysis'"> <table> <tr> <td style="vertical-align:top;text-align:'right'">Response:</td> <td colspan="5"> <textarea id="cmTabResponse" name="cmTabResponse" class="easyui-tooltip" title="The Response to the Countermeasure" style="width:890px; height:50px; resize:none;" placeholder="The Response to the Countermeasure" readonly></textarea> </td> </tr> <tr> <td>CMA Done By:</td> <td> <select id="cmTabDoneBy" class="easyui-combogrid" name="cmTabDoneBy" style="width:200px" data-options="panelHeight:50,panelWidth:200, idField:'key', textField:'value', readonly:true, columns: [[ {field:'key', title:'', width:0, hidden:true}, {field:'value', title:'Person Name', width:180} ]]"> </select> </td> <td>CMA Completed Date:</td> <td> <input id="cmTabCompletedDate" class="easyui-datebox" name="cmTabCompletedDate" readonly style="width:150px" /> </td> <td>Platform QA Engineer:</td> <td> <select id="cmTabPlatformQA" class="easyui-combogrid" name="cmTabPlatformQA" style="width:200px" data-options="panelHeight:50,panelWidth:200, idField:'key', textField:'value', readonly:true, columns: [[ {field:'key', title:'', width:0, hidden:true}, {field:'value', title:'Person Name', width:180} ]]"> </select> </td> </tr> </table> </div> </div> <%-- ------------------------------- --%> <%-- This is where the issue occurs --%> <%-- ------------------------------- --%> <div title="Images and Attached Files" style="padding:10px" data-options="iconCls:'icon-attachment'"> <div class="easyui-tabs" style="height:380px"> <div title="Images" style="padding:10px" data-options="iconCls:'icon-image'"> <div class="easyui-panel" style="height:200px;width:970px; padding:0px; borderWidth:0"> <table id="imageGrid" class="easyui-datagrid" style="width:100%" data-options="toolbar:'#imagesToolbar', idField:'fileNumber', pagination:true, rownumbers:false, fitColumns:true, singleSelect:true, striped:true, fit:true, onSelect: function(rowIndex, rowData) {$('#imageFileNotes').val(rowData.notes);}, onDblClickRow: function(rowIndex, rowData) {viewFile(externalFileType.image);}, url: '../TR_External_File_ReadServlet', queryParams : { <%=DB_Constants.DB_TR_REFERENCE_TYPES_REFERENCE_TYPE_NUMBER%> : <%=TR_Constants.REFERENCE_TYPE_NUMBER_TMR%>, <%=DB_Constants.DB_FIELD_REFERENCE_NUMBER%> : <%=TR_Constants.DEFAULT_NO_PRIMARY_KEY%>, <%=DB_Constants.DB_TR_FILE_TYPES_FILE_TYPE_NUMBER%> : <%=TR_Constants.FILE_TYPE_PICTURE%>, <%=TR_Constants.REQUESTING_SYSTEM%> : '<%=requestingSystem%>' }"> <thead> <tr> <th data-options="field:'fileNumber',width:0,hidden:true"></th> <th data-options="field:'fileLocation',width:0,hidden:true"></th> <th data-options="field:'thumbnail',width:15">Thumbnail</th> <th data-options="field:'fileName',width:50">Filename</th> <th data-options="field:'notes',width:40">Notes</th> </tr> </thead> </table> </div> <br /> <div class="easyui-panel" title="Notes" style="width:970px; height:110px; padding:0px; borderWidth:1" data-options="iconCls:'icon-comment'"> <table> <tr> <td style="vertical-align:text-top"> <div style="padding:1px; border:1px solid #ddd"> <a href="#" id="imageEditNotes" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="editFileNotes(externalFileType.image)">Edit the Image Notes</a> </div> </td> <td> <textarea id="imageFileNotes" name="imageFileNotes" class="easyui-tooltip" title="Any notes related to the Image" style="width:785px; height:65px; resize:none;" placeholder="Any notes for the selected Image" readonly></textarea> </td> </tr> </table> </div> </div> <div title="Attached Files" style="padding:10px" data-options="iconCls:'icon-attachment'"> <div class="easyui-panel" style="height:200px;width:970px; padding:0px; borderWidth:0"> <table id="attachedFileGrid" class="easyui-datagrid" style="width:100%" data-options="toolbar:'#attachedFilesToolbar', idField:'fileNumber', fit:true, pagination:true, rownumbers:false, fitColumns:true, singleSelect:true, striped:true, autoRowHeight:false, onSelect: function(rowIndex, rowData) {$('#attachedFileNotes').val(rowData.notes);}, onDblClickRow: function(rowIndex, rowData){viewFile(externalFileType.attachment);}, url: '../TR_External_File_ReadServlet', queryParams : { <%=DB_Constants.DB_TR_REFERENCE_TYPES_REFERENCE_TYPE_NUMBER%> : <%=TR_Constants.REFERENCE_TYPE_NUMBER_TMR%>, <%=DB_Constants.DB_FIELD_REFERENCE_NUMBER%> : <%=TR_Constants.DEFAULT_NO_PRIMARY_KEY%>, <%=DB_Constants.DB_TR_FILE_TYPES_FILE_TYPE_NUMBER%> : <%=TR_Constants.FILE_TYPE_OTHER%>, <%=TR_Constants.REQUESTING_SYSTEM%> : '<%=requestingSystem%>' }"> <thead> <tr> <th data-options="field:'fileNumber',width:0,hidden:true"></th> <th data-options="field:'fileLocation',width:0,hidden:true"></th> <th data-options="field:'fileName',width:50">Filename</th> <th data-options="field:'notes',width:15">Notes</th> </tr> </thead> </table> </div> <br /> <div class="easyui-panel" title="Notes" style="width:970px; height:110px; padding:0px; borderWidth:0" data-options="iconCls:'icon-comment'"> <table> <tr> <td style="vertical-align:text-top"> <div style="padding:1px; border:1px solid #ddd"> <a href="#" id="fileEditNotes" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="editFileNotes(externalFileType.attachment)">Edit the File Notes</a> </div> </td> <td> <textarea id="attachedFileNotes" name="attachedFileNotes" class="easyui-tooltip" title="Any notes related to the Attached File" style="width:805px; height:65px; resize:none;" placeholder="Any notes related to the Attached File" readonly></textarea> </td> </tr> </table> </div> </div> </div> </div> <%-- -------------- --%> <%-- End of issue --%> <%-- -------------- --%> <div title="Accountability" style="padding:10px" data-options="iconCls:'icon-person'"> .... </div> <div title="Comments" style="padding:10px" data-options="iconCls:'icon-comment'"> .... </div> </div> </td> </tr> </table> </form> </div>
Here are the external files I'm linking too <%-- jQuery --%> <script src="/is/js/jquery/2.1.3/jquery-2.1.3.min.js" type="text/javascript"></script> <%-- jQuery EasyUI - enhances jQuery --%> <script src="/is/js/jquery-easyui/1.4.2/jquery.easyui.min.js" type="text/javascript"></script> <%-- jQuery EasyUI - enhances jQuery - Required for the TreeGrid --%> <script src="/is/js/jquery-easyui/1.4.2/datagrid-detailview.js" type="text/javascript"></script> <%-- jQuery EasyUI - enhances jQuery - Patch--%> <script src="/is/js/jquery-easyui/1.4.2/jquery.easyui.patch.js" type="text/javascript"></script>
Any help is appreciated. Thank you.
|
|
|
Logged
|
|
|
|
aswzen
|
|
« Reply #12 on: March 31, 2015, 09:16:48 PM » |
|
umm..try to put the datagrid and notes in separeted layout..
<DIALOG> <LAYOUT>
<LAYOUT TOP> <PANEL></PANEL> </LAYOUT TOP> <LAYOUT BOTTOM> <TAB> <LAYOUT> <LAYOUT TOP> ============DATAGRID===== </LAYOUT TOP> <LAYOUT BOTTOM> ============NOTE TEXTAREA===== </LAYOUT BOTTOM> </LAYOUT> </TAB> </LAYOUT BOTTOM>
</LAYOUT> </DIALOG>
|
|
« Last Edit: March 31, 2015, 09:18:38 PM by aswzen »
|
Logged
|
|
|
|
bduguay
Newbie
Posts: 31
|
|
« Reply #13 on: April 01, 2015, 10:33:50 AM » |
|
Thanks for the input. I tried the layout and found that it still did not maximize. I've attached an image. Here is the code: <div title="Images" style="padding:10px" data-options="iconCls:'icon-image'"> <div class="easyui-layout" style="width:970px;height:310px"> <div data-options="region:'north'" style="height:200px"> <table id="imageGrid" class="easyui-datagrid" style="height:100%;width:100%" data-options="toolbar:'#imagesToolbar', idField:'fileNumber', pagination:true, rownumbers:false, fitColumns:true, singleSelect:true, striped:true, fit:true, onSelect: function(rowIndex, rowData) {$('#imageFileNotes').val(rowData.notes);}, onDblClickRow: function(rowIndex, rowData) {viewFile(externalFileType.image);}, url: '../TR_External_File_ReadServlet', queryParams : { <%=DB_Constants.DB_TR_REFERENCE_TYPES_REFERENCE_TYPE_NUMBER%> : <%=TR_Constants.REFERENCE_TYPE_NUMBER_TMR%>, <%=DB_Constants.DB_FIELD_REFERENCE_NUMBER%> : <%=TR_Constants.DEFAULT_NO_PRIMARY_KEY%>, <%=DB_Constants.DB_TR_FILE_TYPES_FILE_TYPE_NUMBER%> : <%=TR_Constants.FILE_TYPE_PICTURE%>, <%=TR_Constants.REQUESTING_SYSTEM%> : '<%=requestingSystem%>' }"> <thead> <tr> <th data-options="field:'fileNumber',width:0,hidden:true"></th> <th data-options="field:'fileLocation',width:0,hidden:true"></th> <th data-options="field:'thumbnail',width:15">Thumbnail</th> <th data-options="field:'fileName',width:50">Filename</th> <th data-options="field:'notes',width:40">Notes</th> </tr> </thead> </table> </div> <div title="Notes" style="height:110px; padding:0px; borderWidth:1" data-options="region:'south',iconCls:'icon-comment'"> <table> <tr> <td style="vertical-align:text-top"> <div style="padding:1px; border:1px solid #ddd"> <a href="#" id="imageEditNotes" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true" onclick="editFileNotes(externalFileType.image)">Edit the Image Notes</a> </div> </td> <td> <textarea id="imageFileNotes" name="imageFileNotes" class="easyui-tooltip" title="Any notes related to the Image" style="width:785px; height:65px; resize:none;" placeholder="Any notes for the selected Image" readonly></textarea> </td> </tr> </table> </div> </div> </div>
Please help. Thank you.
|
|
|
Logged
|
|
|
|
jarry
|
|
« Reply #14 on: April 01, 2015, 05:30:57 PM » |
|
Please refer to the attached example 'test.html'.
|
|
|
Logged
|
|
|
|
|