Datagrid Resize Columns

[elmorekevin]

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');
		}
	});
});

[jarry]

The 'resizeEdge' indicates the edge width of the column cell. Only this area can be dragged to resize the column. Set the 'resizeHandle' to 'right' to limit the resizing direction of resizing to right side.

[elmorekevin]

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.

[jarry]

Please look at this example http://code.reloado.com/epevot/edit#preview. It works fine.

[elmorekevin]

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

[elmorekevin]

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!

[jarry]

How do you set he multi-line heads cell? Please show an example to demonstrate your issue.

[elmorekevin]

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!

[jarry]

Please look at this example http://code.reloado.com/epevot/5/edit#preview

[elmorekevin]

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>