Splitter load another jqxWidget html

[onesixxParticipant]

Hi,

there is treemenu in left panel and other contents in right panel

image

Like this.

$(\’#jqxTree\’).jqxTree({ theme: theme, width: \’100%\’ , height: \’100%\’});
$(\’#jqxTree\’).bind(\’select\’, function (event) {
url = \”./KRpt/\”+event.args.element.id+\”.htm\”;
$(\”#rightPanel_Content\”).load(url );
});

the first question is …is the right way to include other htm using JQuery load function?

the secound questionis the one of html in right panel have a Export button.
if the code do alone, it works. but with splitter, it\’s NOT work.

$(\”#excelExport\”).click(function () {
$(\”#jqxgrid\”).jqxGrid(\’exportdata\’, \’xls\’, \’jqxGrid\’);
});

[DimitarParticipant]

Hello onesixx,

Yes, this is a proper way of loading content in a splitter panel.

As for your second question, please provide us with a code sample, so that we may determine the source of the issue.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[onesixxParticipant]

thank for relply

there are menu.php(Splitter) and rpt_task1.htm.

export button of rpt_task1.htm work well alone.
but when it was loaded from menu.php, it doen’t work well in export button.
please help me.

menu.php

  
        $(document).ready(function () {
            // set Split
            $('#main_splitter').jqxSplitter({
                width: 1600, height: 600,
                roundedcorners: true,
                theme: theme,
                    panels: [
                        {  size: 250, min: 100,  max:300,
                           collapsible: true, collapsed: false, resizable: true },
                        {  size: 840, min: 840,  max:840,
                           collapsible: true, collapsed: false, resizable: true }
                    ]
            });
            // Create jqxTree
            $('#jqxTree').jqxTree({ theme: theme,   width: '100%' , height: '100%'});
            $('#jqxTree').bind('select', function (event) {
                 url = event.args.element.id+".htm";
                 $("#rightPanel_Content").load(url );
            });
        });
    
    <div>
        <div>
            <div style="border: none">
                
                    
                        <img style='float: left;margin-right: 5px' />
                        <span>Report</span>
                        
                            
                                <img style='float: left;margin-right: 5px' src='./folder.png' />
                                <span> AAA</span>
                                
                                    
                                        <img style='float: left;margin-right: 5px' src='./contactsIcon.png' />
                                        <span>AAA_1</span>
            </div>
        </div>
 
         <div style="width:100%  height;100%">
        		<div></div>
         </div>
    </div>

—————

rpt_task1.htm

//-######Draw Grid
		function r_grid(){
		 	$(document).ready(function () {
		        		//-###### prepare the data
				var source ={
					datatype  : "json",
					root      : "Rows",
					datafields: [
						{ name: 'position_c'          ,type: 'string'}, //1
			                 	{ name: 'department'        ,type: 'string'}, //2
			                 	{ name: 'last_name'          ,type: 'string'}, //3
					],
					url : url
				};
			    	// alert (source.url);
				$("#jqxgrid").jqxGrid({
				 	source : source,
			        	theme  : theme,
			        	width  : 860,
			        	columns: [
			        		{ text:'영업본부'    },
				        	{ text:'영업소'      },
				         	{ text:'영업사원'  },
					],
				});
				//Export
				$("#content_sub").show();
                		$("#excelExport").click(function () {
                			$("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');
            			});
            			$("#autoResize").jqxButton({ theme: theme });
            			$("#autoResize").click(function () {
			                $("#jqxgrid").jqxGrid('autoresizecolumns');
			        });
			})
		}
	
	<div>
		<div>
	         		 방문일자별 영업활동 리포트 
		</div>
	    	<div>
			<div></div>
			<div style='float: left'>
                			
            		</div>
		</div>
		<div>
	    		Copyright &copy; 2013. KOSS Business Solution. All rights reserved.
		</div>
	</div>

[DimitarParticipant]

Hi onesixx,

The issue may come from the way you load the grid. Another possibility is using an iframe. E.g.:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Vertical Splitter </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../../scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#mainSplitter').jqxSplitter({ width: 1000, height: 480, panels: [{ size: 300 }, { size: 700}] });
            $("#load").click(function () {
                $("#iF").attr({ "src": "../jqxgrid/spreadsheet.htm" });
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="mainSplitter">
            <div class="splitter-panel">
                <button id="load">
                    Load iframe
                </button>
            </div>
            <div class="splitter-panel">
                <iframe style="width: 100%; height: 100%;" id="iF"></iframe>
            </div>
        </div>
    </div>
</body>
</html>

Where ../jqxgrid/spreadsheet.htm is the path to the Spreadsheet demo. This way, the export works fine.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts