EasyUI Forum
July 17, 2024, 03:10:50 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
   Home   Help Search Login Register  
Pages: [1]
Author Topic: Editable Datagrid Filter - columns get wider while filtering  (Read 8802 times)
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)
$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
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 < > =)

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'>
<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}"
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 + ')');
>Uplink Device</th>
<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>
Hero Member
Posts: 2269

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.
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,
« Last Edit: December 21, 2016, 12:50:43 PM by elmorekevin » Logged
Pages: [1]
Jump to:  

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