Hello,

I was trying to use the formatter property to create a hyperlink for the first column of the datagrid. I tried referring to the following links:

http://www.jeasyui.com/forum/index.php?topic=4585.0
http://www.jeasyui.com/forum/index.php?topic=5268.0
http://www.jeasyui.com/forum/index.php?topic=3486.0


But they didn't help me out much. I only need the formatter to work for the first column only, i.e, i want the hyperlink to be visible in the first column only. Below are the changes that i've carried out to achieve the same, but failed due to a script error.

This is my JSON object that is created after the ajax call:

Code:

{"COL_LIST":{"COL_DATA":[{"field":"col_0","title":"Client Code","formatter":"createLink"},{"field":"col_1","title":"Client"},{"field":"col_2","title":"Account"},{"field":"col_3","title":"Type Code"},{"field":"col_4","title":"Client Id"},{"field":"col_5","title":"Type"}]},"ROW_LIST":{"ROW_DATA":[{"col_0":"ROW0A03","col_1":"ABC DEBIT FUND","col_2":"A03","col_3":"ABCD","col_4":"6565","col_5":"AUTHORIZED"},{"col_0":"ROW1A03","col_1":"ABC DEBIT FUND","col_2":"A03","col_3":"EFGH","col_4":"17869","col_5":"AUTHORIZED"}]}}

The following code is written in my html page:

Code:

<TABLE id="RESULTS_TABLE"></TABLE>

The following code is written in the javascript block:

Code:

function createLink(value,row,extra)
{
	//var href = 'get_details.php?userid='+row.id;
	var href = "#";
	return '<a target="_blank" href="' + href + '">' + value + '</a>';
}

//json string mentioned above is passed here as a parameter to createDataGrid function.
function createDataGrid(data)
{
	data = JSON.parse(data);

	var col_data;
	var row_data;

	for (var key in data) {
		var val = data[key];

		for(var child_key in val)
		{
			//alert("key: " + child_key + "\nvalue: " + val[child_key]);
			if(child_key == "ROW_DATA")
			{
				row_data = val[child_key];
				//alert("row_data: " + row_data);
			}
			if(child_key == "COL_DATA")
			{
				col_data = [val[child_key]];
				//alert("col_data: " + col_data);
			}
		}
	}

	$('#RESULTS_TABLE').datagrid({
		columns: col_data,
		data: row_data,
		height:'auto'
	});
}

I get a script error stating "function expected". Is it something that I'm doing wrongly in the JSON string?

Thanks in advance!

Regards,
Darrel

Hello stworthy,

Thanks a lot. It worked!!! 

God bless you!!!!!

Regards,
Darrel

Hello,

I'm trying to create a datagrid using JSON objects by referring the example from the following jsfiddle
http://jsfiddle.net/H5rkg/. But I'm facing a error on intializing the datagrid, "Unable to get property 'width' of undefined or null reference" error.

The code and the JSON string that I've used are below.


I've declared my datagrid table in the body tag of my html page as follows:

Code:

<TABLE id="RESULTS_TABLE"></TABLE>

.

This is my json string returned on an ajax call on load, which is a valid JSON string. I've verified the string at http://jsonlint.com/:

Code:

'{"COL_LIST":{"COL_DATA":[{"field":"col_0","title":"Column 0"},{"field":"col_1","title":"Column 1"},{"field":"col_2","title":"Column 2"},{"field":"col_3","title":"Column 3"},{"field":"col_4","title":"Column 4"},{"field":"col_5","title":"Column 5"},{"field":"col_6","title":"Column 6"},{"field":"col_7","title":"Column 7"},{"field":"col_8","title":"Column 8"},{"field":"col_9","title":"Column 9"},{"field":"col_10","title":"Column 10"},{"field":"col_11","title":"Column 11"},{"field":"col_12","title":"Column 12"},{"field":"col_13","title":"Column 13"},{"field":"col_14","title":"Column 14"}]},"ROW_LIST":{"ROW_DATA":[{"col_0":"A03","col_1":"DS0001","col_2":"1004","col_3":"RUFF","col_4":"6","col_5":"150","col_6":"15\/09\/2015","col_7":"PWD","col_8":"22800","col_9":"0","col_10":"0","col_11":"22800","col_12":"RUFF","col_13":"VALUE","col_14":"UK"},{"col_0":"A03","col_1":"DS0004","col_2":"1004","col_3":"RUFF","col_4":"7","col_5":"12","col_6":"15\/09\/2015","col_7":"PWD","col_8":"1440","col_9":"0","col_10":"0","col_11":"1440","col_12":"RUFF","col_13":"VALUE","col_14":"UK"}]}}'

This is my javascript function that is called after the ajax call is completed, where I pass the JSON string as a parameter and then parse it to a JSON object:

Code:

function createDataGrid(data)
{
	data = JSON.parse(data);

	var col_data;
	var row_data;

	for (var key in data) {
		//alert("Key: " + key);
		var val = data[key];

		for(var child_key in val)
		{
			alert("key: " + child_key + "\nvalue: " + val[child_key]);
			if(child_key == "ROW_DATA")
			{
				row_data = JSON.stringify(val[child_key]);
				//row_data = JSON.parse(val[child_key]);
				alert("row_data: " + row_data);
			}
			if(child_key == "COL_DATA")
			{
				col_data = val[child_key];
				//col_data = JSON.parse(val[child_key]);
				alert("col_data: " + col_data);
			}
		}
	}

	//I get the error in this next step
	$('#RESULTS_TABLE').datagrid({
		columns: col_data,
		data: row_data,
		height: '100px'
	});
}

Please could anyone tell me what could be wrong in the code that's leading to this error.....

Thanks in advance.

Regards,
Darrel

Hello,

Finally got a method that did what i required,

$('#dtDateBox').datebox('getValue');

Thanks...


Regards,
Darrel Viegas

Hello,

Please could anyone tell me how to get dateBox value.

if i try the following codes then all of them are returning empty strings:

Code:

   alert($('#dtDateBox').val());
   alert($('#dtDateBox').text());
   alert(document.getElementById('dtDateBox').value);

I've initialized the dateBox as follows:

Code:

     <INPUT type="text" id="dtDateBox" name="dtDateBox" class="easyui-datebox" style="width:150px"/>

Please could anybody tell me how to get only the text of the datebox which the user chose.

Thanks in advance.

Regards,
Darrel Viegas.

Thanks a million, stworthy!!!!!!

The last suggestion works like a charm!!!! I removed the auto property and replaced it with the width property, added nowrap as suggested. It loaded the page with 40000 records in just 20 seconds. Filtering was working in like 7-8 secs which is 10 times better than before.... Thanks a lot.

I had one more question related to pagination, can the screen get masked with the loading text whenever the user clicks the next/previous links in the pagination bar, and get unmasked when the data has been loaded successfully.

Keep up the good work.
God bless you!!!!

Regards,
Darrel Viegas.

Hello stworthy,

Thanks for your quick reply. I did the changes in my file as per your suggestion. However the grid is still loading quite slowly and filtering the details also slowly, maybe because I'm having 200+ records in the JSON object. (I had reduced the size of the JSON object to 20 to avoid increasing the size of the html code in the fiddle).

Is there any possible way to speed the process up? Like populate the data only for the first pagesize rows (for eg. 50 rows) from the database and then on click on the next/previous page links of the pagination bar get the next/previous set of data as per the page size??

Thanks in advance. 

Regards,
Darrel Viegas

Hello,

I'm want to use the datagrid control to load data from the database. However before trying the same I decided to use static values and go ahead based on the results. However I faced an issue.
Whenever the grid is getting loaded the web page on the browser hangs for a few seconds. Also the grid takes a long time to be displayed on the browser.

Later i made use of filters over the grid columns, but to filter through these sample 20 entries, it takes a lot of time, nearly 10-15 seconds....

Files i've included for the sample code.

Code:

    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>

Code written inside the body tag.....

Code:

<table id="dg" title="DataGrid" style="width:700px;height:380px" data-options="
	singleSelect:true,rownumbers:true,pageSize:50,pagination:true,
	data:data
	">
		<thead>
		<tr>
			<th data-options="field:'client',auto:true,sortable:true">Client Code</th>
			<th data-options="field:'name',auto:true,sortable:true,editor:'textbox'">Client Name</th>
			<th data-options="field:'testcode',auto:true,align:'right',sortable:true">Test Code</th>
			<th data-options="field:'testname',auto:true,sortable:true,editor:'textbox'">Test Name</th>
			<th data-options="field:'indexNo',auto:true,align:'center',sortable:true,editor:'textbox'">indexNo</th>
			<th data-options="field:'other_code',auto:true,align:'center',sortable:true">Other Code</th>
			<th data-options="field:'date1',auto:true,align:'center',sortable:true">Appl date</th>
			<th data-options="field:'qty',auto:true,align:'center',sortable:true,editor:{type:'numberbox',options:{precision:1}}">Qty</th>
			<th data-options="field:'costvalue',auto:true,align:'center',sortable:true,editor:{type:'numberbox',options:{precision:1}}">Cost Value</th>
			<th data-options="field:'moneypaid',auto:true,align:'center',sortable:true">Money Paid</th>
			<th data-options="field:'date2',auto:true,align:'center',sortable:true">Date 2</th>
			<th data-options="field:'remarks',auto:true,align:'center',sortable:true,editor:'textbox'">Remarks</th>
		</tr>
		</thead>
	</table>
	<script type="text/javascript" src="js/jquery-easyui-1.4.3/datagrid-filter.js"></script>
	<script type="text/javascript">
	//for simplicity sake i've used only 20 entries. However in real life scenario there would definitely be more records

        var data = [
            {"client":"ABCD","name":"ABCD","testcode":"ABCDEF08","testname":"asdadUasdasd","indexNo":"INF066A19020","other_code":"","date1":"29/10/2012","qty":"0","costvalue":"15.48","moneypaid":"0","date2":"-","remarks":"REMARKS :                           "},
	{"client":"DEFG","name":"DEFG","testcode":"FRCT101","testname":"asdadUasdasd","indexNo":"F20000000001","other_code":"","date1":"29/10/2012","qty":"2","costvalue":"10","moneypaid":"20","date2":"29/10/2012","remarks":"REMARKS :                           "},
	{"client":"HIJK","name":"HIJK","testcode":"UNHDFC01","testname":"asdadUasdasd","indexNo":"INF066H19068","other_code":"","date1":"30/11/2012","qty":"100","costvalue":"1","moneypaid":"100","date2":"-","remarks":"REMARKS :                           "},
	{"client":"LMNO","name":"LMNO","testcode":"ALACEG14","testname":"asdadUasdasd","indexNo":"INPYALACEG14","other_code":"","date1":"10/08/2011","qty":"0","costvalue":"10000000","moneypaid":"50000000","date2":"22/11/2007","remarks":"REMARKS :                           "},
	{"client":"PQRS","name":"PQRS","testcode":"INFOSYS","testname":"asdadUasdasd","indexNo":"INE009A01020","other_code":"","date1":"10/07/2011","qty":"10","costvalue":"5","moneypaid":"50","date2":"-","remarks":"REMARKS :                           "},
	{"client":"TUVW","name":"TUVW","testcode":"ALACEG14","testname":"asdadUasdasd","indexNo":"INPYALACEG14","other_code":"","date1":"01/09/2011","qty":"10","costvalue":"10000000","moneypaid":"100000000","date2":"22/11/2007","remarks":"REMARKS :                           "},
	{"client":"XYZA","name":"XYZA","testcode":"EQCOAL","testname":"asdadUasdasd","indexNo":"IN99292A1091","other_code":"","date1":"10/09/2011","qty":"3400","costvalue":"10","moneypaid":"34000","date2":"-","remarks":"REMARKS :                           "},
	{"client":"BCDE","name":"BCDE","testcode":"ALACEG14","testname":"asdadUasdasd","indexNo":"INPYALACEG14","other_code":"","date1":"10/08/2011","qty":"100","costvalue":"10000000","moneypaid":"1000000000","date2":"22/11/2007","remarks":"REMARKS :                           "},
	{"client":"FGHI","name":"FGHI","testcode":"FRCT101","testname":"asdadUasdasd","indexNo":"F20000000001","other_code":"","date1":"29/10/2012","qty":"10","costvalue":"10","moneypaid":"100","date2":"29/10/2012","remarks":"REMARKS :                           "},
	{"client":"JKLM","name":"JKLM","testcode":"ALSTFC65","testname":"asdadUasdasd","indexNo":"INE721A07BA8","other_code":"","date1":"14/07/2011","qty":"100","costvalue":"1000","moneypaid":"100000","date2":"13/07/2011","remarks":"REMARKS :                           "},
	{"client":"NOPQ","name":"NOPQ","testcode":"EQCOAL","testname":"asdadUasdasd","indexNo":"IN99292A1091","other_code":"","date1":"10/09/2011","qty":"10000","costvalue":"10","moneypaid":"100000","date2":"-","remarks":"REMARKS :                           "},
	{"client":"RSTU","name":"RSTU","testcode":"EQCOAL","testname":"asdadUasdasd","indexNo":"IN99292A1091","other_code":"","date1":"10/09/2011","qty":"3000","costvalue":"15.48","moneypaid":"10","date2":"-","remarks":"REMARKS :                           "},
	{"client":"ABCD","name":"ABCD","testcode":"ABCDEF08","testname":"asdadUasdasd","indexNo":"INF066A19020","other_code":"","date1":"29/10/2012","qty":"0","costvalue":"15.48","moneypaid":"0","date2":"-","remarks":"REMARKS :                           "},
	{"client":"DEFG","name":"DEFG","testcode":"FRCT101","testname":"asdadUasdasd","indexNo":"F20000000001","other_code":"","date1":"29/10/2012","qty":"2","costvalue":"10","moneypaid":"20","date2":"29/10/2012","remarks":"REMARKS :                           "},
	{"client":"HIJK","name":"HIJK","testcode":"UNHDFC01","testname":"asdadUasdasd","indexNo":"INF066H19068","other_code":"","date1":"30/11/2012","qty":"100","costvalue":"1","moneypaid":"100","date2":"-","remarks":"REMARKS :                           "},
	{"client":"LMNO","name":"LMNO","testcode":"ALACEG14","testname":"asdadUasdasd","indexNo":"INPYALACEG14","other_code":"","date1":"10/08/2011","qty":"0","costvalue":"10000000","moneypaid":"50000000","date2":"22/11/2007","remarks":"REMARKS :                           "},
	{"client":"PQRS","name":"PQRS","testcode":"INFOSYS","testname":"asdadUasdasd","indexNo":"INE009A01020","other_code":"","date1":"10/07/2011","qty":"10","costvalue":"5","moneypaid":"50","date2":"-","remarks":"REMARKS :                           ","row_qty_prcsn":"0"},
	{"client":"TUVW","name":"TUVW","testcode":"ALACEG14","testname":"asdadUasdasd","indexNo":"INPYALACEG14","other_code":"","date1":"01/09/2011","qty":"10","costvalue":"10000000","moneypaid":"100000000","date2":"22/11/2007","remarks":"REMARKS :                           "},
	{"client":"XYZA","name":"XYZA","testcode":"EQCOAL","testname":"asdadUasdasd","indexNo":"IN99292A1091","other_code":"","date1":"10/09/2011","qty":"3400","costvalue":"10","moneypaid":"34000","date2":"-","remarks":"REMARKS :                           "},
	{"client":"BCDE","name":"BCDE","testcode":"ALACEG14","testname":"asdadUasdasd","indexNo":"INPYALACEG14","other_code":"","date1":"10/08/2011","qty":"100","costvalue":"10000000","moneypaid":"1000000000","date2":"22/11/2007","remarks":"REMARKS :                           "},
        ];
        $(function(){
			var dg = $('#dg').datagrid({
				remoteFilter: false,
				pagination: true,
				pageSize: 10,
				pageList: [10,20,50,100]
			});
			dg.datagrid('enableFilter');
			dg.datagrid('loadData', data);

			function showFilters(){
				dg.datagrid('enableFilter', [{
					field:'qty',
					type:'numberbox',
					options:{precision:1},
					op:['equal','notequal','less','greater']
				},{
					field:'costvalue',
					type:'numberbox',
					options:{precision:1},
					op:['equal','notequal','less','greater']
				},{
					field:'moneypaid',
					type:'numberbox',
					options:{precision:1},
					op:['equal','notequal','less','greater']
				}]);
			}

			showFilters();
        });
    </script>

Now, I also get the error now whenever I filter or click on the pagination links to go to another page in the grid (Possibly because I previously was having around 220 records in the javascript data objec!):

"SCRIPT28: Out of stack space
datagrid-filter.js, line 592 character 4"


Fiddle link for the same example:      http://jsfiddle.net/DROCKS/pee6bx62/4/

Any help would be appreciated. Thanks in advance...

Regards,
Darrel Viegas.

Hello stworthy,

Thanks a lot, for the example.

I actually had left hopes on using the grid with the panel control inside a tab. Then referring the fiddle code that you provided, I realized where my mistake was.

Thanks once again and God bless you!!!

Continue the good work!!!!

Regards,
Darrel Viegas.

Hello stworthy,

The following is the code if the datagrid jsp.....

Code:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>DataGrid Demo</title>
</head>
<body>
	<table class="easyui-datagrid" style="width:700px;height:250px" id = "grd_col_movable"
			data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get',toolbar:'#tb',pagination:true,remoteSort:false,multisort:true">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80,sortable:true">Item ID</th>
				<th data-options="field:'productid',width:100,sortable:true">Product</th>
				<th data-options="field:'listprice',width:80,align:'right',sortable:true">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right',sortable:true">Unit Cost</th>
				<th data-options="field:'attr1',width:240,sortable:true">Attribute</th>
				<th data-options="field:'status',width:60,align:'center',sortable:true">Status</th>
			</tr>
		</thead>
	</table>
	<div id="tb" style="padding:2px 5px;" align="left">
		Move Cols &nbsp; <input class="easyui-switchbutton" data-options="onText:'Yes',offText:'No'" id="move_cols_flag" name="move_col_flag" style="width:50px;height:20px"> &nbsp;&nbsp;
		Show Cols &nbsp;<select id="col_select" style="width:150px"></select>
		<div id="col_filter">
			<div style="color:#99BBE8;background:#fafafa;padding:5px;">Choose Columns</div>
			<input type="checkbox" name="lang" class="chkBox" value="itemid" checked><span>Item ID</span><br/>
			<input type="checkbox" name="lang" class="chkBox" value="productid" checked><span>Product</span><br/>
			<input type="checkbox" name="lang" class="chkBox" value="listprice" checked><span>List Price</span><br/>
			<input type="checkbox" name="lang" class="chkBox" value="unitcost" checked><span>Unit Cost</span><br/>
			<input type="checkbox" name="lang" class="chkBox" value="attr1" checked><span>Attribute</span><br/>
			<input type="checkbox" name="lang" class="chkBox" value="status" checked><span>Status</span>
		</div>
	</div>
	<script>
		$(document).ready(function() {
			function showHideColumn(chkbox_element)
			{
				if(chkbox_element.checked)
				{
					$('#grd_col_movable').datagrid('showColumn',chkbox_element.value);
				}
				else
				{
					$('#grd_col_movable').datagrid('hideColumn',chkbox_element.value);
				}
				$('#grd_col_movable').datagrid('fitColumns');
				$('#grd_col_movable').datagrid('columnMoving');
			}

			$('.chkBox').click(function(event) {
				showHideColumn(this);
			});
			
			if(!gridpage_loaded)
			{
				$('#grd_col_movable').datagrid();
				$('#grd_col_movable').datagrid('fitColumns');
				$('#grd_col_movable').datagrid('columnMoving');
				
				$('#col_select').combo({
					//required:true,
					editable:false,
					multiple:true
				});
				$('#col_filter').appendTo($('#col_select').combo('panel'));
				$('#col_filter input').click(function(){
					var my_text = '';
					var my_val = '';
	
					$('#col_filter input').each(function(){
						if ($(this).is(":checked")) {
							var v = $(this).val();
							var s = $(this).next('span').text();
							
							my_text == '' ? my_text = s : my_text += ','+s;
							my_val  == '' ? my_val = v : my_val += ','+v;	
						}
					});
	
					$('#col_select').combo('setValue', my_val).combo('setText', my_text);
	            });
				
				gridpage_loaded = true;
				
				$('#move_cols_flag').switchbutton({
		            checked: false,
		            onChange: function(checked){
		                if(checked)
		                {
		                	$('#grd_col_movable').datagrid();
		    				$('#grd_col_movable').datagrid('fitColumns');
		                	$('#grd_col_movable').datagrid('columnMoving');
		                }
		                else
		                {
		                	$('#grd_col_movable').datagrid();
		    				$('#grd_col_movable').datagrid('fitColumns');
		                }
		            }
		        });
			}
		});
	</script>
</body>
</html>

I haven't called the getPager() anywhere in the code.... Is it possible that when the data grid is getting created that this error may be occurring?

Thanks & Regards,
Darrel Viegas

Hello stworthy,

I've used the portal extension to build a widget with a datagrid view inside the panel....

The file sampleGrid.jsp is just having a normal datagrid from your demo...

The following line is written in the javascript:

Code:

	var panels = [
			{id:'p5_1',title:'Data Grid',height:200,collapsible:true,closable:true,maximizable:true,href:'sampleGrid.jsp'},
			//other json strings   ];

On choosing the checkbox from the combox option in the html page, I've called the function to add a panel containing the datagrid    to the portal application.

The following line is one of the options that i've written in the combobox dropwdown:

Code:

	<input type="checkbox" name="lang" id="widget_chkBox_p5_1" value= '{"id":"p5_1","title":"Data Grid","height":200,"collapsible":true,"closable":true,"maximizable":true,"href":"sampleGrid.jsp" }' /><span>Datagrid Sample</span><br/>

These are the functions that i've called and defined in the document ready section:

Code:

	//function to show the panel in the portal
	$('#widget_chkBox_p5_1').click(function(event) {
		$.showWidgetPanel("pp_1",this);
	});

	//function that will check the checkbox value before creating the new panel
	jQuery.showWidgetPanel = function(div_id, chkbox_element)
	{
		if(chkbox_element.checked)
		{
			$.addWidgetToPanel(div_id, chkbox_element.id);
		}
	};

	//function to actually add the widget to the portal panel
	jQuery.addWidgetToPanel = function(div_id, panel_id)						//@param1: the current selected tab value & @param2: the checkbox id
	{
		var options = $.getPanelOptions(panel_id);
		if (options)
		{
			var p = $('<div/>').attr('id',options.id).appendTo("#"+div_id);
			
			p.panel(options);

			//normal call to the portal to add the new panel
			$("#"+div_id).portal('add',{
				panel:p,
				columnIndex:'0'
			});

			$('#'+options.id).panel({
				onMaximize: function(){
					var opts = $('#'+options.id).panel('options');
					var p = $('#'+options.id).panel('panel');
					opts.fit = false;
					opts.stub = $('<div></div>').insertAfter(p);
					p.appendTo('body').addClass('max');
					$('#'+options.id).panel('resize', {
						width: $(window).width(),
						height: $(window).height()
					});
				},
				onRestore: function(){
					var opts = $('#'+options.id).panel('options');
					var p = $('#'+options.id).panel('panel');
					p.insertAfter(opts.stub).removeClass('max');
					opts.stub.remove();
					p.parent().removeClass('panel-noscroll');
				}
			});
		}
	};


	//This is the modified getPanelOptions function
	jQuery.getPanelOptions = function(id)
	{
		for(var i=0; i<panels.length; i++)
		{
			if (panels[i].id == id)
			{
				return panels[i];
			}
		}
		if($('#'+id).length > 0)
		{
			return $.parseJSON($('#'+id).val());			//getting checkboxes value and parsing it to JSON
		}

		return undefined;
	};

I'm most probably getting the error in the part when I'm adding the widget in the addWidgetToPanel() function. But the error is coming in the jquery,easyui.min.js file

Thanks and regards,
Darrel Viegas.

[Unable to get property 'panel' of undefined or null reference]

Thanks a lot, stworthy. It works great!!!!
But however I'm facing one problem when using the above mentioned code to set the maximize or restore event of a panel that contains a datagrid view. It throws an error "Unable to get property 'panel' of undefined or null reference" at the following line in the jquery.easyui.min.js file, when I assign the onMaximize and OnRestore functions:

Code:

    getPager:function(jq){
        return $.data(jq[0],"datagrid").panel.children("div.datagrid-pager");
    }

Is there any work around for datagrids?

Thanks & Regards,
Darrel Viegas

Hello,

Is it possible to maximize a "easyui-panel" to the entire browser window and minimize it back to the original position, just like the "easyui-window" element does. When the "easyui-window" is maximized it comes over the entire screen and on minimizing it, it returns to the same position before it was maximized??

Can anyone help me out to achieve this using "easyui-panels" only...

Thanks in advance.

-Darrel Viegas.

Hello,

I'm really impressed with this easyui plugin that has been created. Just love it. Quite easy to use and can be understood by anyone who knows basic javascript/jQuery. Thanks for this wonderful work...

Actually I needed some assistance in the portal application using your portal plugin. I've managed to make the plugin work as per my requirements, one more thing is needed that is dynamic movements of the panel/elements in the portal. For ex:
http://gridster.net/demos/resize-limits.html

In the portal application we create a div and three sub div with their respective widths. Also within these divs there are tables created. So even if i move my panels they will snap only to a particular <TD> tag.

In the link for the plugin mentioned above, the plugin allows the html elements to be re-arranged whenever I shift one of the element and also on resize of the element the other elements are re-arranged accordingly. I require that the portal application should do the same, i.e, on shifting one of the panel the others arrange themselves automatically. The same behavior should be done when i'm resizing the element. So please could you advice me on how to proceed further. Cause I can't seem to figure out how to proceed with the same. God bless!!!

Thanks & Regards,
Darrel Viegas.