jQWidgets Forums

Forum Replies Created

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts

February 6, 2013 at 9:23 am in reply to: Export jqxgrid to excel Export jqxgrid to excel #14790

Member

<%@ page session="true"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stoppage Report</title>
<style type="text/css">
html {
	height: 100%
}
body {
	height: 100%;
	margin: 0;
	padding: 0
}
</style>
<link href="css/stoppagereport.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/jqx.base.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jqxcore.js"></script>
<script type="text/javascript" src="js/jqxbuttons.js"></script>
<script type="text/javascript" src="js/jqxscrollbar.js"></script>
<script type="text/javascript" src="js/jqxmenu.js"></script>
<script type="text/javascript" src="js/jqxcheckbox.js"></script>
<script type="text/javascript" src="js/jqxgrid.js"></script>
<script type="text/javascript" src="js/jqxgrid.selection.js"></script>
<script type="text/javascript" src=".js/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="js/jqxdata.js"></script>
<script type="text/javascript" src="js/jqxdata.export.js"></script>
<script type="text/javascript" src="js/jqxgrid.export.js"></script>
<script type="text/javascript" src="js/jqxgrid.sort.js"></script>
<script type="text/javascript" src="js/gettheme.js"></script>
<script type="text/javascript" src="js/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="js/jqxcalendar.js"></script>
<script type="text/javascript" src="js/jqxtooltip.js"></script>
<script type="text/javascript" src="js/jquery.global.js"></script>
<script type="text/javascript" src="js/jqxpanel.js"></script>
<script type="text/javascript" src="js/jqxgrid.grouping.js"></script>
<script type="text/javascript" src="js/jqxgrid.pager.js"></script>
<script type="text/javascript" src="js/jqxlistbox.js"></script>
<script type="text/javascript" src="js/jqxdropdownlist.js"></script>
<script type="text/javascript" src="js/jquery.session.js"></script>
<script type="text/javascript">
	$(document)
			.ready(
					function() {
						var theme = getTheme();
						$("#vehicleslist").hide();
						// Create a jqxDateTimeInput
						$("#jqxWidgetfrom").jqxDateTimeInput({
							width : '150px',
							height : '25px',
							theme : theme,
							formatString : 'dd/MM/yyyy hh:mm'
						});
						$("#jqxWidgetfrom2").jqxDateTimeInput({
							width : '150px',
							height : '25px',
							theme : theme,
							formatString : 'dd/MM/yyyy hh:mm'
						});
						$("#RadioGroup1_0")
								.click(
										function() {
											$("#vehicleslist").show();
											var JSONRequest = {
												"SMode" : "RSend"
											};
											$
													.ajax({
														type : "POST",
														url : "SearchManager",
														data : JSONRequest,
														dataType : "json",
														beforeSend : function(x) {
															if (x
																	&& x.overrideMimeType) {
																x
																		.overrideMimeType("application/json;charset=UTF-8");
															}
														},
														success : function(
																categoriesJson) {
															var count = 0;
															$
																	.each(
																			categoriesJson,
																			function(
																					index,
																					RegistrationDTO) {
																				var str = (RegistrationDTO.registration)
																						.replace(
																								/\s+/g,
																								'_');
																				$(
																						'#vehicleregselect')
																						.append(
																								'<option value=' + str +'>'
																										+ RegistrationDTO.registration
																										+ '</option>');
																				count++;
																			});
														}
													});
										});
						$("#vehicleregselect").change(
								function() {
									$("#vm").val($("#vehicleregselect").val());
									$.session.set("registrationselected", $(
											"#vehicleregselect").val());
								});
						$("#RadioGroup1_1").click(function() {
							$("#vehicleslist").hide();
							$("#vm").val("MV");
						});
						$('#jqxWidgetfrom').bind('valuechanged',
								function(event) {
									var jsDate = event.args.date;
									fd = jsDate;
									$("#fromdate").val(jsDate);
								});
						$('#jqxWidgetfrom2').bind('valuechanged',
								function(event) {
									var jsDate = event.args.date;
									td = jsDate;
									+$("#todate").val(jsDate);
								});
						$("#go")
								.click(
										function() {
											var parameters = $("#vm").val()
													+ '&FDate='
													+ $("#fromdate").val()
															.substring(4, 24)
													+ '&TDate='
													+ $("#todate").val()
															.substring(4, 24)
													+ '&TMode='
													+ $("#stimeframe").val();
											// alert(encodeURIComponent(parameters));
											var url1 = 'ReportsManager?SMode=Stoppage&VMode='
													+ parameters;
											//var JSONRequest ={"SMode":"RSend","VMode":$("#vm").val()};
											var source = {
												datatype : "json",
												datafields : [ {
													name : 'location'
												}, {
													name : 'stoppeddate'
												}, {
													name : 'starteddate'
												}, {
													name : 'duration'
												}, {
													name : 'latitude'
												}, {
													name : 'longitude'
												}, {
													name : 'courseindegrees'
												}, ],
												url : url1,
											// data: JSONRequest
											//root: 'data'
											};
											var vdataAdapter = new $.jqx.dataAdapter(
													source);
											// Create jqxGrid
											$("#jqxgrid")
													.jqxGrid(
															{
																altrows : true,
																groupable : true,
																theme : theme,
																sortable : true,
																source : vdataAdapter,
																columnsresize : true,
																width : 920,
																pageable : true,
																autoheight : true,
																keyboardnavigation : false,
																selectionmode : 'multiplecellsextended',
																enabletooltips : true,
																columns : [
																		{
																			text : 'Location',
																			datafield : 'location',
																			width : 400
																		},
																		{
																			text : 'Stoppedtime',
																			datafield : 'stoppeddate',
																			width : 150
																		},
																		{
																			text : 'Startedtime',
																			datafield : 'starteddate',
																			width : 150
																		},
																		{
																			text : 'Duration',
																			datafield : 'duration',
																			width : 165
																		},
																		{
																			text : 'Latitude',
																			datafield : 'latitude',
																			width : 50
																		},
																		{
																			text : 'Longitude',
																			datafield : 'longitude',
																			width : 50
																		},
																		{
																			text : 'Course',
																			datafield : 'courseindegrees',
																			width : 50
																		} ],
																//],
																pagesizeoptions : [
																		'5',
																		'10' ],
															});
										});
						$("#expand").jqxButton({
							theme : theme
						});
						$("#collapse").jqxButton({
							theme : theme
						});
						$("#expandall").jqxButton({
							theme : theme
						});
						$("#collapseall").jqxButton({
							theme : theme
						});
						// expand group.
						$("#expand").bind('click', function() {
							var groupnum = parseInt($("#groupnum").val());
							if (!isNaN(groupnum)) {
								$("#jqxgrid").jqxGrid('expandgroup', groupnum);
							}
						});
						// collapse group.
						$("#collapse").bind(
								'click',
								function() {
									var groupnum = parseInt($("#groupnum")
											.val());
									if (!isNaN(groupnum)) {
										$("#jqxgrid").jqxGrid('collapsegroup',
												groupnum);
									}
								});
						// expand all groups.
						$("#expandall").bind('click', function() {
							$("#jqxgrid").jqxGrid('expandallgroups');
						});
						// collapse all groups.
						$("#collapseall").bind('click', function() {
							$("#jqxgrid").jqxGrid('collapseallgroups');
						});
						// trigger expand and collapse events.
						$("#jqxgrid")
								.bind(
										'groupexpand',
										function(event) {
											var args = event.args;
											$("#expandedgroup").html(
													"Group: " + args.group
															+ ", Level: "
															+ args.level);
										});
						$("#jqxgrid")
								.bind(
										'groupcollapse',
										function(event) {
											var args = event.args;
											$("#collapsedgroup").html(
													"Group: " + args.group
															+ ", Level: "
															+ args.level);
										});
						$("#jqxgrid")
								.bind(
										"cellclick",
										function(event) {
										
											var rowindex = event.args.rowindex;
								
											var latitude = $('#jqxgrid')
													.jqxGrid('getcellvalue',
															rowindex,
															"latitude");
											var longitude = $('#jqxgrid')
													.jqxGrid('getcellvalue',
															rowindex,
															"longitude");
											var duration = $('#jqxgrid')
													.jqxGrid('getcellvalue',
															rowindex,
															"duration");
											var stoppeddate = $('#jqxgrid')
													.jqxGrid('getcellvalue',
															rowindex,
															"stoppeddate");
											var startdate = $('#jqxgrid')
													.jqxGrid('getcellvalue',
															rowindex,
															"starteddate");
											var courseindegrees = $('#jqxgrid')
													.jqxGrid('getcellvalue',
															rowindex,
															"courseindegrees");
								
											$.session.set("latitudeselected",
													latitude);
											$.session.set("longitudeselected",
													longitude);
											$.session.set("durationselected",
													duration);
											$.session.set(
													"stoppeddateselected",
													stoppeddate);
											$.session.set("startdateselected",
													startdate);
											$.session.set("courseselected",
													courseindegrees);
										});
						$("#jqxgrid").bind("bindingcomplete", function(event) {
							//alert("binding.. completed");
						});
						$("#excelExport").jqxButton({
							theme : theme
						});
						$("#htmlExport").jqxButton({
							theme : theme
						});
						$("#excelExport").click(
								function() {
									$("#jqxgrid").jqxGrid('exportdata', 'xls',
											'jqxGrid');
								});
						$("#htmlExport").click(
								function() {
									$("#jqxgrid").jqxGrid('exportdata', 'html',
											'jqxGrid');
								});
					
					});
</script>
</head>
<body>
	<div id="SectionText">
		<label> Select Report For: <input type="radio"
			name="RadioGroup1" value="Single" id="RadioGroup1_0" /> Single
			Vehicle
		</label><label for="vehicleslist"></label> <select name=""
			id="vehicleregselect">
			<option>Select Vehicle</option>
		</select> <label> <input type="radio" name="RadioGroup1"
			value="Multiple" id="RadioGroup1_1" /> Multiple Vehicle
		</label>
	</div>
	<input type="hidden" id="vm" />
	<input type="hidden" id="todate" />
	<input type="hidden" id="fromdate" />
	<input type="hidden" id="todate" />
	<div id="dt">
		<div class="dtContainer">
			<div class="ftclass">From:&nbsp;</div>
			<div id='jqxWidgetfrom'></div>
			&nbsp;&nbsp;
			<div class="ftclass">&nbsp;To:&nbsp;</div>
			<div id='jqxWidgetfrom2'></div>
		</div>
	</div>
	<div id="submitbar">
		<div id="sttime">
			Stopped More Than:<input class="ipt" id="stimeframe" name="intervel"
				type="text" size="6" /><input id="go" type="button" value="Submit" />
		</div>
	</div>
	<div id="jqxgrid"></div>
	<div style='margin-top: 20px;'>
		<div style='float: left;'>
			<input type="button" value="Export to Excel" id='excelExport' /> <input
				type="button" value="Export to HTML" id='htmlExport' />
		</div>
	</div>
</body>
</html>

February 2, 2013 at 6:38 am in reply to: Export jqxgrid to excel Export jqxgrid to excel #14530

dkiran2323

Member

<div id="jqxgrid"></div>
	<div style='margin-top: 20px;'>
		<div style='float: left;'>
			<input type="button" value="Export to Excel" id='excelExport' /> <input
				type="button" value="Export to HTML" id='htmlExport' />
		</div>
	</div>

February 2, 2013 at 6:36 am in reply to: Export jqxgrid to excel Export jqxgrid to excel #14529

dkiran2323

Member

February 2, 2013 at 5:19 am in reply to: Export jqxgrid to excel Export jqxgrid to excel #14528

dkiran2323

Member

$(document)
.ready(
function() {
var theme = getTheme();
$(“#vehicleslist”).hide();
// Create a jqxDateTimeInput
$(“#jqxWidgetfrom”).jqxDateTimeInput({
width : ‘150px’,
height : ’25px’,
theme : theme,
formatString : ‘dd/MM/yyyy hh:mm’
});
$(“#jqxWidgetfrom2”).jqxDateTimeInput({
width : ‘150px’,
height : ’25px’,
theme : theme,
formatString : ‘dd/MM/yyyy hh:mm’
});
$(“#RadioGroup1_0”)
.click(
function() {
$(“#vehicleslist”).show();

$
.each(
categoriesJson,
function(
index,
RegistrationDTO) {

var str = (RegistrationDTO.registration)
.replace(
/\s+/g,
‘_’);

$(
‘#vehicleregselect’)
.append(
”
+ RegistrationDTO.registration
+ ”);

count++;
});

}
});

});

$(“#vehicleregselect”).change(
function() {

$(“#vm”).val($(“#vehicleregselect”).val());
$.session.set(“registrationselected”, $(
“#vehicleregselect”).val());
});

$(“#RadioGroup1_1”).click(function() {
$(“#vehicleslist”).hide();
$(“#vm”).val(“MV”);

});
$(‘#jqxWidgetfrom’).bind(‘valuechanged’,
function(event) {
var jsDate = event.args.date;

fd = jsDate;
$(“#fromdate”).val(jsDate);
});

$(‘#jqxWidgetfrom2’).bind(‘valuechanged’,
function(event) {
var jsDate = event.args.date;
td = jsDate;
+$(“#todate”).val(jsDate);
});

$(“#go”)
.click(
function() {

url : url1,

};

var vdataAdapter = new $.jqx.dataAdapter(
source);
// Create jqxGrid
$(“#jqxgrid”)
.jqxGrid(
{

altrows : true,

groupable : true,
theme : theme,
sortable : true,
source : vdataAdapter,
columnsresize : true,
width : 920,
pageable : true,
autoheight : true,
keyboardnavigation : false,
selectionmode : ‘multiplecellsextended’,
enabletooltips : true,
columns : [

{
text : ‘Location’,
datafield : ‘location’,
width : 400
},
{
text : ‘Stoppedtime’,
datafield : ‘stoppeddate’,
width : 150
},
{
text : ‘Startedtime’,
datafield : ‘starteddate’,
width : 150
},
{
text : ‘Duration’,
datafield : ‘duration’,
width : 165
},
{
text : ‘Latitude’,
datafield : ‘latitude’,
width : 50
},
{
text : ‘Longitude’,
datafield : ‘longitude’,
width : 50
},
{
text : ‘Course’,
datafield : ‘courseindegrees’,
width : 50
} ],
//],
pagesizeoptions : [
‘5’,
’10’ ],

});

});
$(“#expand”).jqxButton({
theme : theme
});
$(“#collapse”).jqxButton({
theme : theme
});
$(“#expandall”).jqxButton({
theme : theme
});
$(“#collapseall”).jqxButton({
theme : theme
});
// expand group.
$(“#expand”).bind(‘click’, function() {
var groupnum = parseInt($(“#groupnum”).val());
if (!isNaN(groupnum)) {
$(“#jqxgrid”).jqxGrid(‘expandgroup’, groupnum);
}
});
// collapse group.
$(“#collapse”).bind(
‘click’,
function() {
var groupnum = parseInt($(“#groupnum”)
.val());
if (!isNaN(groupnum)) {
$(“#jqxgrid”).jqxGrid(‘collapsegroup’,
groupnum);
}
});
// expand all groups.
$(“#expandall”).bind(‘click’, function() {
$(“#jqxgrid”).jqxGrid(‘expandallgroups’);
});
// collapse all groups.
$(“#collapseall”).bind(‘click’, function() {
$(“#jqxgrid”).jqxGrid(‘collapseallgroups’);
});
// trigger expand and collapse events.
$(“#jqxgrid”)
.bind(
‘groupexpand’,
function(event) {
var args = event.args;
$(“#expandedgroup”).html(
“Group: ” + args.group
+ “, Level: ”
+ args.level);
});
$(“#jqxgrid”)
.bind(
‘groupcollapse’,
function(event) {
var args = event.args;
$(“#collapsedgroup”).html(
“Group: ” + args.group
+ “, Level: ”
+ args.level);
});

$(“#jqxgrid”)
.bind(
“cellclick”,
function(event) {

var rowindex = event.args.rowindex;

var latitude = $(‘#jqxgrid’)
.jqxGrid(‘getcellvalue’,
rowindex,
“latitude”);
var longitude = $(‘#jqxgrid’)
.jqxGrid(‘getcellvalue’,
rowindex,
“longitude”);
var duration = $(‘#jqxgrid’)
.jqxGrid(‘getcellvalue’,
rowindex,
“duration”);
var stoppeddate = $(‘#jqxgrid’)
.jqxGrid(‘getcellvalue’,
rowindex,
“stoppeddate”);
var startdate = $(‘#jqxgrid’)
.jqxGrid(‘getcellvalue’,
rowindex,
“starteddate”);
var courseindegrees = $(‘#jqxgrid’)
.jqxGrid(‘getcellvalue’,
rowindex,
“courseindegrees”);

$.session.set(“latitudeselected”,
latitude);
$.session.set(“longitudeselected”,
longitude);
$.session.set(“durationselected”,
duration);
$.session.set(
“stoppeddateselected”,
stoppeddate);
$.session.set(“startdateselected”,
startdate);

$.session.set(“courseselected”,
courseindegrees);

});

$(“#jqxgrid”).bind(“bindingcomplete”, function(event) {
//alert(“binding.. completed”);
});

$(“#excelExport”).jqxButton({
theme : theme
});
$(“#htmlExport”).jqxButton({
theme : theme
});

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

$(“#htmlExport”).click(
function() {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘html’,
‘jqxGrid’);
});
});

Select Report For: Single
Vehicle

Select Vehicle
Multiple Vehicle

From:

To:

Stopped More Than:

January 31, 2013 at 11:25 am in reply to: Export jqxgrid to excel Export jqxgrid to excel #14430

dkiran2323

Member

Hi Dimitar,

So do we need license to export grid to excel, when iam exporting it, empty excel is opening, but when i run export grid demo on jqxwidgets , grid is exported to excel correctly.

1, Let me know do we required license.
2. or my code error. i included dataexport.js gridexport.js also.

Thanks
Kiran Kumar D

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)