Title: Editable Datagrid Filter - columns get wider while filtering
Post by: elmorekevin on August 29, 2016, 09:53:31 PM
I can't seem to find the root cause of this. The width of the columns grow by some amount of pixels each time I type or delete a letter. They keep growing until they are off the page, then I have to reload the whole webpage. I'll include my code. One thing that may be an issue is edatagrid vs datagrid--I'm not sure when to use one or the other. Thanks for the help! Datagrid Attributes (I made a php variable to try to keep the html consistent --I'm sure there's a nicer way) $datagrid_attributes = 'class="easyui-datagrid" fit="true" fitColumns="true" pagination="true" rownumbers="false" singleSelect="true" remoteFilter="true" remoteSort="true" pageSize="50" '; JS Function code: //IPD Device Table $(function(){ $('#dg-ipd').edatagrid({ url: 'get_ipd.php?location_filter=<?php echo $code;?>', loadMsg: "Loading data", updateUrl: 'update_ipd.php', toolbar: '#toolbar-ipd' }); //This section allow for special filtering (like a dropdown < > =) $('#dg-ipd').edatagrid('enableFilter'); });
Table code: <!--Tab 7--> <div title="Other IP Devices" style="padding:5px;height:100%"> <!--DataGrid editor for IPD--> <table id="dg-ipd" title="Other IP Devices: Double click the row to begin editing." toolbar="#toolbar-ipd" idField="id" <?php echo $datagrid_attributes; ?>> <thead frozen='true'> <tr> <th field="id" editor="{type:'textbox',options:{readonly:true}}">Inv ID</th> <th field="location" editor="{type:'textbox',options:{readonly:true}}">Location</th> <th field="make" editor="{type:'textbox',options:{readonly:true}}">Make</th> <th field="model" editor="{type:'textbox',options:{readonly:true}}">Model</th> <th field="mac" editor="{type:'textbox',options:{readonly:true}}">MAC</th> <th field="name" editor="text">Device Name</th> <th field="ip" editor="text">IP</th> <th field="ip_link" formatter="ip_link">IP</th> <th data-options="field:'uplink_device', 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> </div>
Title: Re: Editable Datagrid Filter - columns get wider while filtering
Post by: jarry on August 30, 2016, 02:19:31 AM
Please look at this example http://code.reloado.com/eketit3/edit#preview. It works fine.
Title: Re: Editable Datagrid Filter - columns get wider while filtering
Post by: elmorekevin on December 21, 2016, 12:49:08 PM
I found my issue in easyui.css. The width of a header was set for 10,000px. I changed to width: 100% and that stopped the widening columns.
.datagrid-header-inner { float: left; width: 10000px; }
I stripped my 6 tab html page down to just a single tab, and was still getting the effect. So after some poking around I tried changing that value. Thanks Again for the reply, Kevin
|