jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Export jqxgrid to excel
Tagged: angular grid, excel, export, Exportdata, grid, jquery grid, jqxgrid, save-file.php, variable
This topic contains 21 replies, has 8 voices, and was last updated by Dimitar 8 years, 9 months ago.
-
AuthorExport jqxgrid to excel Posts
-
i successfully managed to display data from mysql into jqxGrid. now i having problem to export the data in to excel. i follow the same flow as in jqwidgets demo, when i click on export button nothing happens.
can anyone guide me on this. thanks in advance.
here is my code:
<html>
<head>
<title id=’Description’>With jqxGrid, you can export your data to Excel, XML, CSV, TSV, JSON and HTML.</title>
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.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/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”jqwidgets/scripts/gettheme.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.export.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.export.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var theme = getTheme();
// prepare the data
var url = “include/query_by_module.php”;
var source =
{
datatype: “json”,
datafields: [
{ name: ‘client’, type: ‘string’ },
{ name: ‘sc_no’ },
{ name: ‘po_no’ },
{ name: ‘pro’, type: ‘string’ },
{ name: ‘mod_name’, type: ‘string’ },
{ name: ‘tier’, type: ‘string’ }
],
root: “data”,
id: ‘id’,
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: dataAdapter,
theme: theme,
altrows: true,
sortable: true,
selectionmode: ‘multiplecellsextended’,
columns: [
{ text: ‘Client’, datafield: ‘client’, width: 300 },
{ text: ‘SC No’, datafield: ‘sc_no’, width: 150 },
{ text: ‘PO No’, datafield: ‘po_no’, width: 150 },
{ text: ‘Product’, datafield: ‘pro’, width: 150 },
{ text: ‘Module’, datafield: ‘mod_name’, width: 200 },
{ text: ‘Tier’, datafield: ‘tier’, width: 110 }
]
});
$(“#excelExport”).jqxButton({ theme: theme });$(“#excelExport”).click(function () {
$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘xls’, ‘jqxGrid’);
});});
</script>
</head>
<body>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”></div>
<div style=’margin-top: 20px;’>
<div style=’float: left;’>
<input type=”button” value=”Export to Excel” id=’excelExport’ />
<br /><br />
<input type=”button” value=”Export to XML” id=’xmlExport’ />
</div>
<div style=’margin-left: 10px; float: left;’>
<input type=”button” value=”Export to CSV” id=’csvExport’ />
<br /><br />
<input type=”button” value=”Export to TSV” id=’tsvExport’ />
</div>
<div style=’margin-left: 10px; float: left;’>
<input type=”button” value=”Export to HTML” id=’htmlExport’ />
<br /><br />
<input type=”button” value=”Export to JSON” id=’jsonExport’ />
</div>
</div>
</div>
</body>
</html>Hello sathiyaseelan8,
The export method uses a file (save-file.php) hosted on jQWidget’s website. For various security reasons, your computer may not allow access to that file. A workaround is to export the data to a variable. For more information, please refer to the API documentation. The file save-file.php is inluded in the source code package for customers with Developer or Enterprice license and you may use it on your server if you like.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/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 DHi Dimitar,
i still dont get you. how the save-file.php should be. any example of it.
Hello,
License is not required for you to use the export functionality of jqxGrid. However, access to the file save-file.php comes with Developer or Enterprice license. If you don’t have one, your export queries contact jQWidgets’s server for access to the file. An alternative is exporting the grid to a variable. Since there are various reasons your grid may fail to export, please provide us with its source code so that we may determine the source of the issue.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/$(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(
”
+ 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() {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,
};
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
VehicleSelect Vehicle
Multiple VehicleFrom:To:Stopped More Than:<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>
Hi dkiran2323,
Please re-post your code (include the entire page) and remember to format it using the { } button.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/<%@ 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: </div> <div id='jqxWidgetfrom'></div> <div class="ftclass"> To: </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>
Hi dkiran2323,
We were not able to reproduce the reported issue locally. The reason may be a firewall on your computer, which does not allow connection to jQWidgets’s server, where the file save-file.php is stored.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/hii Dimitar,
i already tried many ways but looks none is working.
can you assist me on how to export the grid to a varible??
Hi sathiyaseelan8,
Here is a code snippet, showing how to export a grid to a variable:
var exportInfo; $("#excelExport").click(function () { exportInfo = $("#jqxgrid").jqxGrid('exportdata', 'xls'); });
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/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>
Hi,
I am using jqxgrid for exporting my data.It works,but now a days it shows me an error that “Not Found”.What is this.Is there any licence required to access library.or some thing firewall issue is present.I can’t predict what is the issue now?.Please,help me…..
Thanks,
Manish -
AuthorPosts
You must be logged in to reply to this topic.