Thanks! That did the trick.

Code:

  <style>
    .datagrid-header td {
      vertical-align: bottom;
     }
    .datagrid-header .datagrid-cell{
      height: 36px;
      display: table-cell;
      vertical-align: bottom;
    }
    
  </style>

Jarry,

I saved a new version of your working example. The changes I made were:
1. Added CSS to align the header text to the bottom
2. Added a <br> to one of the header titles.

http://code.reloado.com/epevot/4/edit#preview

Thanks!

There is one minor issue with the resize handles that I mentioned earlier. I've attached a picture to help describe it.

When the cell is multi-line, the resize handles only seem to appear where there is text present.

Above the text, where the red squiggles are, the resize handles don't appear.

Anyone a CSS master and know how to fix that?

Thanks!

Fixed it perfect! Thanks!

PS I removed the video from youtube.

I have a rather large datagrid, with two frozen columns.

When I double-click to edit a cell, the datagrid scrolls automatically to somewhat center the cell and cursor to the center of the div or screen. I'm trying to prevent this behavior, it is hard to keep track of the column you are trying to edit.

I've created a video of the behavior since it is a little tough to explain. What could be causing this behavior?

https://youtu.be/CZbSAYsLNbE

Thanks!

I upgraded some files, and that fixed my issue.

EasyUI for jQuery 1.4.5.x to 1.7.5
jQuery v1.6 to v1.12.4

The resize handles are working correctly now!

Thanks jarry

Thanks, I think I understand what they are meant to do, but these options are not functioning in my datagrid.

Is it because I am using "edatagrid" that these options don't work?

You can see I have 20 set for the resizeEdge, but it is no wider than it used to be.

I am having trouble making use of the datagrid properties resizeEdge and resizeHandle.

I've built my application using the edatagrid files available at https://www.jeasyui.com/extension/downloads/jquery-easyui-edatagrid.zip

They don't seem to be taking effect, so maybe they aren't supported in the file I have downloaded, and I need the non "e" version? I've never really figured out the difference between the "e" and "non e" datagrid, but I have always erred on using the "e" version since we use this for lots of editing. I can't seem to find a version for these files either, to make sure these options are supported (1.3 and up).

The columns in this editor seem to have always been resizable, so I'm not sure if I need to include the column attribute "resizable" for the datagrid options to work.

I also wanted to point out a possible bug. It seems that when a datagrid header is two lines tall (like text has wrapped), that the resize handle only appears horizontally across from the text. If there is another header with only a single line of text, the handle only appears on the lower half of the header.

Thanks for any help you can spare,
Kevin

Code:

$(function(){
	$('#dg-ap').edatagrid({
		fit: true,
		fitColumns: false,
		idField: 'id',
		loadMsg: 'Loading data',
		nowrap: true,
		pageSize: 50,
		pagination: true,
		remoteFilter: true,
		remoteSort: true,
		resizeEdge: 20,
		resizeHandle: 'right',
		rownumbers: true,
		sortName: 'id',
		singleSelect: true,
		toolbar: '#toolbar-ap',
		updateUrl: 'update_ap.php',
		//The following section prevents editing of the AP name, unless it has no name. Use the edit link in the column header instead.
		onBeforeEdit: function(val,index,row){
		 	var col = $(this).datagrid('getColumnOption', 'ap_name');
			var cell_data = $('#dg-ap').datagrid('getSelected').ap_name;
			if (cell_data == null || cell_data==''){
				col.editor = {type: 'validatebox', options: {required:true}};
			} else {
				col.editor = null;
			}
			//Set AP's active column to 1 ('Y') by default on new save
			/* var ed = $(this).datagrid('getEditor', {index:index,field:'active'});
			console.log(ed);
			$(ed.target).val(1) */
			
		},
		onEndEdit: function(index,row){
			var ed = $(this).datagrid('getEditor',{index:index,field:'antenna_id'});
			row.antenna_name = $(ed.target).combobox('getText');
		}
	});
});

I cannot seem to get this to work. Sorry for reviving this post, thought it would help someone else who finds this. Here is my datagrid code followed by the field definition:

Code:

$(function(){
	$('#dg-ap').edatagrid({
		fit: true,
		fitColumns: true,
		idField: 'id',
		loadMsg: 'Loading data',
		nowrap: true,
		pageSize: 50,
		pagination: true,
		remoteFilter: true,
		remoteSort: true,
		rownumbers: true,
		sortName: 'id',
		singleSelect: true,
		toolbar: '#toolbar-ap',
		updateUrl: 'update_ap.php',
		//The following section prevents editing of the AP name, unless it has no name. Use the edit link in the column header instead.
		onBeforeEdit: function(val,index,row){
			var col = $(this).datagrid('getColumnOption', 'ap_name');
			var cell_data = $('#dg-ap').datagrid('getSelected').ap_name;
			if (cell_data == null || cell_data==''){
				col.editor = {type: 'validatebox', options: {required:true}};
			} else {
				col.editor = null;
			}
			//Set AP's active column to 1 ('Y') by default on new save
			var ap_active_column = $(this).datagrid('getEditor', {index:index,field:'active'});
			console.log(ap_active_column);
			$(ap_active_column.target).val(1)
			
		}
	});
});

"active" field definition:

Code:

<th field="active" width="45" sortable="true" required="true" 
			editor="{type:'combobox',
				options:{
					valueField: 'id',
					textField: 'text',
					data:[{
						id: '0',
						text: 'N'
						},{
						id: '1',
						text: 'Y'
						}
					]
				}			
			}">Active</th>

When I run this code, I get this in the console:

Code:

Uncaught Syntax error, unrecognized expression: [datagrid-row-index=[object Object]]
k.error @ jquery-1.6.min.js:16
k.filter @ jquery-1.6.min.js:16
k @ jquery-1.6.min.js:16
k @ jquery-1.6.min.js:16
find @ jquery-1.6.min.js:16
getTr @ jquery.easyui.min.js:11094
getTr @ jquery.easyui.min.js:11087
_737 @ jquery.easyui.min.js:10091
_73b @ jquery.easyui.min.js:10103
getEditor @ jquery.easyui.min.js:10726
$.fn.datagrid @ jquery.easyui.min.js:10381
onBeforeEdit @ VM1549:29
onBeforeEdit @ jquery.edatagrid.js:99
_724 @ jquery.easyui.min.js:10028
(anonymous) @ jquery.easyui.min.js:10713
each @ jquery-1.6.min.js:16
each @ jquery-1.6.min.js:16
beginEdit @ jquery.easyui.min.js:10712
$.fn.datagrid @ jquery.easyui.min.js:10381
(anonymous) @ jquery.edatagrid.js:302
each @ jquery-1.6.min.js:16
each @ jquery-1.6.min.js:16
editRow @ jquery.edatagrid.js:287
$.fn.edatagrid @ jquery.edatagrid.js:233
onDblClickCell @ jquery.edatagrid.js:70
_686 @ jquery.easyui.min.js:9304
handle @ jquery-1.6.min.js:16
k @ jquery-1.6.min.js:16

So I figured it had to do with having extra stuff already in the onBeforeEdit definition. When I remove the "val" from the function, and comment out the ap_name section (so it looks like the example in the previous post), then I get this in the console (this first null line is due to console.log(ap_active_column)):

Code:

null 
VM1306:31 Uncaught TypeError: Cannot read property 'target' of null
    at HTMLTableElement.onBeforeEdit (eval at <anonymous> (jquery-1.6.min.js:16), <anonymous>:31:23)
    at HTMLTableElement.onBeforeEdit (jquery.edatagrid.js:99)
    at _724 (jquery.easyui.min.js:10028)
    at HTMLTableElement.<anonymous> (jquery.easyui.min.js:10713)
    at Function.each (jquery-1.6.min.js:16)
    at init.each (jquery-1.6.min.js:16)
    at Object.beginEdit (jquery.easyui.min.js:10712)
    at init.$.fn.datagrid (jquery.easyui.min.js:10381)
    at HTMLTableElement.<anonymous> (jquery.edatagrid.js:302)
    at Function.each (jquery-1.6.min.js:16)

What might I be doing wrong here?
Thanks!

Success, thanks!

Hi, I was able to add a link into the header as in the attached image. Problem comes about when I am trying to add a new row of information. If I click that link, then the row I was adding gets canceled! I was hoping to have a link to some reference information needed while filling out the row, but doesn't help when the work you've entered gets lost.

Is there something I can change to avoid this behavior? Here's the way the header link is written:

Code:

{field:'county',title:'County <a target="_blank" href="https://docs.google.com/spreadsheets/d/sdfg/edit#gid=asdf">Abbrs.</a>',width:50,sortable:true,editor:{type:"text"}},

Thanks,
Kevin

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!

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

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>

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!