jQWidgets Forums

March 2, 2013 at 4:17 pm Export jqxgrid to excel #16256
guille
Member
hello Dimitar
i have the exactly same problem with the dataexport….. so i tried the snippet code that you provided us in this forum but i do not know what am i doing wrong?? because if i create the variable exportInfo nothing works not even the function of the botom in the page…
i will show you my example code….
<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/ventanas-modales.css">		
		<link rel="stylesheet" href="jwigets2.5/jqwidgets/styles/jqx.base.css" type="text/css" />
		
<script type="text/javascript" src="jwigets2.5/scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jwigets2.5/scripts/gettheme.js"></script>
<script type="text/javascript" src="jwigets2.5/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jwigets2.5/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jwigets2.5/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jwigets2.5/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jwigets2.5/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jwigets2.5/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jwigets2.5/jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="jwigets2.5/jqwidgets/jqxdata.export.js"></script>
<script type="text/javascript" src="jwigets2.5/jqwidgets/jqxgrid.export.js"></script>
<script type="text/javascript" src="jwigets2.5/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="jwigets2.5/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jwigets2.5/jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" src="jwigets2.5/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="jwigets2.5/jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="jwigets2.5/jqwidgets/jqxnumberinput.js"></script>	
<script type="text/javascript" src="jwigets2.5/jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="jwigets2.5/jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="jwigets2.5/jqwidgets/globalization/jquery.global.js"></script>		
		
		<script type="text/javascript">
	$(document).ready(function () {
		var theme = getTheme();
		// prepare the data
		var employeeSource =
		{
			datatype: "json",
			datafields: [
			{ name: 'idcurso', type: 'int'},
			{ name: 'curso', type: 'string'},
			{ name: 'tipocurso', type: 'string'},
			{ name: 'anio', type: 'int'},
			{ name: 'semestre', type: 'String'},
			{ name: 'dia', type: 'String'},
			{ name: 'horario', type: 'Strin'},			
			{ name: 'fechainicio', type: 'date'},
			{ name: 'fechaterm', type: 'date'},	
			{ name: 'cont', type: 'int'},
			{ name: 'Name', type: 'String'}	
			],
			url: "gridcombogrupo.php"
		};
		var employeesDataAdapter = new $.jqx.dataAdapter(employeeSource);
		// create a comboBox. 
		// The displayMember specifies that the list item's text will be the Employee's Name. 
		// The valueMember specifies that the list item's value will be the Employee's ID.
		$("#jqxcomboboxgrid").jqxComboBox(
		{
			width: 250,
			height: 25,
			source: employeesDataAdapter,
			theme: theme,
			promptText: 'Seleccione un curso',
			selectedIndex: -1,
			displayMember: 'Name',
			valueMember: 'idcurso'
		});
		$("#jqxcomboboxgrid").bind('select', function(event)
		{
			// get employee's ID.
			var employeeID = event.args.item.value;
			// prepare the data
			var ordersSource =
			{
				datatype: "json",
				datafields: [
				{ name: 'carnet', type: 'int', source: employeesDataAdapter.records, text: 'Name', id: 'idcurso'},
				{ name: 'nombre1', type: 'string'},
				{ name: 'apellido1', type: 'string'},
				{ name: 'carrera', type: 'string'},
				{ name: 'recibo', type: 'string'},
				{ name: 'curso', type: 'string'},
				{ name: 'laboratorio', type: 'int'},
				{ name: 'nombre1p', type: 'string'},
				{ name: 'apellido1p', type: 'string'}
				],
				type: 'POST',
				data: {idcurso:employeeID},
				url: "gridcombocurso.php"
			};
			var dataAdapter = new $.jqx.dataAdapter(ordersSource);
			$("#gridcombo").jqxGrid({theme: theme, 
			source: dataAdapter,
			width: 800,             
            altrows: true,
            sortable: true,
            selectionmode: 'multiplecellsextended',
			columns: 
			[
				{datafield: "carnet", text: "Carnet", width: '15%'},
				{datafield: "nombre1", text: "Primer Nombre", width: '15%'},
				{datafield: "apellido1", text: "Primer Apellido", width: '15%'},
				{datafield: "carrera", text: "Carrera", width: '15%'},
				{datafield: "recibo", text: "No Recibo", width: '15%'},
				{datafield: "curso", text: "Nombre Curso", width: '30%'},
				{datafield: "laboratorio", text: "Laboratorio", width: '15%'},
				{datafield: "nombre1p", text: "Nombre Docente", width: '15%'},
				{datafield: "apellido1p", text: "Apellido Docente", width: '15%'}
			]
			});
		}); 
			$("#excelExport").jqxButton({ theme: theme });
            
			
			
		
            $("#excelExport").click(function () {
            var  exportInfo = $("#gridcombo").jqxGrid('exportdata', 'xls');           
            });
            
		
	});
    </script>
	
	</head>
	<body>
	<div align="center">
	<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: inherit;">
       						<span>Buscar un Grupo:</span>							
			 				<div style="margin-top: 7px; margin-bottom: 5px;" id="jqxcomboboxgrid"></div>					
							<div id="gridcombo"></div>				
							
	</div>
	
	<input type="button" value="Export to Excel" id='excelExport' /> - <input type="button" value="Export to XML" id='xmlExport' />	
	
	</body>
</html>