Maximize panel to the whole screen

[Darrel]

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.

[stworthy]

Pease try this:

Code:

<style>
	.max{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9999999;	
	}
</style>
<script type="text/javascript">
	$(function(){
		$('#p').panel({
			maximizable: true,
			onMaximize: function(){
				var opts = $(this).panel('options');
				var p = $(this).panel('panel');
				opts.fit = false;
				opts.stub = $('<div></div>').insertAfter(p);
				p.appendTo('body').addClass('max');
				$(this).panel('resize', {
					width: $(window).width(),
					height: $(window).height()
				});
			},
			onRestore: function(){
				var opts = $(this).panel('options');
				var p = $(this).panel('panel');
				p.insertAfter(opts.stub).removeClass('max');
				opts.stub.remove();
				p.parent().removeClass('panel-noscroll');
			}
		})
	})
</script>

[Darrel]

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

[stworthy]

How do you define a panel that contains a datagrid? Please provide an example to demonstrate your issue.

[Darrel]

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.

[stworthy]

There seems to be no problem with your code. The problem may occur in your sampleGrid.jsp page. If you call 'getPager' method on a datagrid that hasn't been created successfully, the error occur.

[Darrel]

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

[stworthy]

Please refer to this example http://jsfiddle.net/qgv5bhqt/

[Darrel]

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.