EasyUI Forum
March 29, 2024, 12:46:23 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: First datagrid in series of tabs formatting issue  (Read 6578 times)
elmorekevin
Newbie
*
Posts: 17


View Profile
« on: January 12, 2017, 10:18:39 AM »

For some reason I cannot get the columns to fit properly on one of my datagrids. The fitColumns option works correctly on the second tab (which is an exact copy/paste duplicate of the first), but it does not work correctly on the first tab. The columns seem to be frozen on the first tab, I cannot resize them. I don't have frozen columns anywhere in my code.

When the 'Loading Data' shows, the columns appear correctly, but then shrink. It doesn't seem to be anything to do with the data since the second renders fine.

I am using a mix of javascript and html rendered tabs. I've attached an image of the two tabs (the first on top of the second).

Thanks!
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: January 12, 2017, 06:03:08 PM »

This may be the 31 stylesheet limit in IE. Please try to set the 'sharedStyleSheet' property to true for your datagrid components. If your issue continues, please show an example to demonstrate your issue.
Logged
elmorekevin
Newbie
*
Posts: 17


View Profile
« Reply #2 on: January 16, 2017, 08:04:55 PM »

I have found that if I comment out one of the other datagrids from one of the other tabs, then the first tab loads properly. Is there a limit on the number of datagrids that can be loaded simultaneously, or maybe it's a related to the loading time? If it's loading time I am hoping I can use the solution below, but I can't get the filter to work.

I'm trying to use the href option to make it so the whole page loads faster, but the 'enableFilter' option is not taking effect when this happens. Please see http://www.jeasyui.com/forum/index.php?topic=6024.0 

Thanks!

Here's an example of the href:
In the main file editor.php
<!--Tab 7--><div title="Other IP Devices" style="padding:5px;height:100%" href="_tab7.html"></div>

_tab7.html:
Code:
<script>
//http://www.jeasyui.com/forum/index.php?topic=6024.0
$(function(){
$('#dg-ipd').edatagrid({});
$('#dg-ipd').edatagrid('enableFilter');
});
</script>

<!--DataGrid editor for IPD-->
<table id="dg-ipd" title="Other IP Devices: Double click the row to begin editing." toolbar="#toolbar-ipd" idField="id" class="easyui-datagrid" fit="true" fitColumns="true" pagination="true" rownumbers="false" singleSelect="true" remoteFilter="true" remoteSort="true" pageSize="50" url='get_ipd.php' loadMsg="Loading data" updateUrl='update_ipd.php' toolbar='#toolbar-ipd' fitColumns='true' >
<thead >
<tr>
<th field="id" width="20">Inv ID</th>
<th field="location" width="20">Location</th>
<th field="make" width="20">Make</th>
<th field="model" width="20">Model</th>
<th field="mac" width="20">MAC</th>
<th field="name" width="20" editor="text">Device Name</th>
<th field="ip" width="20" editor="text">IP</th>
<th field="ip_link" width="20" formatter="ip_link">IP</th>
<th data-options="field:'uplink_device',width:20, formatter: function(value,row){return row.uplink_device}"
editor="{type:'combobox',
options:{
valueField: 'uplink_device_name',
textField: 'uplink_device_name',
url: 'search_uplink_device_name.php',
onSelect: function(rec)
{
var url = 'search_uplink_device_name.php?q=' + rec.uplink_device_name;
$.getJSON( url, function( data )
{
   var result = eval('(' + data + ')');
   alert(result.uplink_device_name);
});
}
}
}"
>Uplink Device</th>
</tr>
</thead>
</table>
<div id="toolbar-ipd">
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg-ipd').edatagrid('saveRow')">Save Changes</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg-ipd').edatagrid('cancelRow')">Cancel</a>
</div>
Logged
elmorekevin
Newbie
*
Posts: 17


View Profile
« Reply #3 on: January 16, 2017, 08:34:57 PM »

I found that I needed setTimeout for the enableFilter method in order to have that load using href:

setTimeout(function(){
      $('#dg-ipd').edatagrid('enableFilter');
}, 1000);

Thanks to this post!
http://www.jeasyui.com/forum/index.php?topic=4489.0
Logged
elmorekevin
Newbie
*
Posts: 17


View Profile
« Reply #4 on: January 16, 2017, 10:55:28 PM »

After doing some more cleanup, I found that I did not need to use setTimeout to have the enableFilter appear. I was mistakenly calling all of the datagrid data twice, once via html with class="easyui-datagrid" and also via javascript with $('#dg-site').edatagrid({}). Now that the tabs load speedily when clicked, the Filter always shows.

It used to take over 20 seconds to load, now it loads in less than 1!
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!