EasyUI Forum
March 28, 2024, 05:00:27 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Editable Datagrid Filter - columns get wider while filtering  (Read 8302 times)
elmorekevin
Newbie
*
Posts: 17


View Profile
« 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)
Code:
$datagrid_attributes = 'class="easyui-datagrid" fit="true" fitColumns="true" pagination="true" rownumbers="false" singleSelect="true" remoteFilter="true" remoteSort="true" pageSize="50" ';

JS Function code:
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:
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>
Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #1 on: August 30, 2016, 02:19:31 AM »

Please look at this example http://code.reloado.com/eketit3/edit#preview. It works fine.
Logged
elmorekevin
Newbie
*
Posts: 17


View Profile
« Reply #2 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
« Last Edit: December 21, 2016, 12:50:43 PM by elmorekevin » 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!