We Keep Coding

How to fix JqGrid exportToExcel invalid xml error?

Every time that I attempt to export the contents of my jqGrid, it will fail and display this error:
Uncaught Error: Invalid XML: <?xml version="1.0" encoding="UTF-8" standalone="yes"?><Relationships xmlns="http:?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet1.xml"/><Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles" Target="styles.xml"/></Relationships>
at Function.error (jquery-1.10.2.js:530)
at Function.parseXML (jquery-1.10.2.js:610)
at HTMLTableElement.<anonymous> (jquery.jqGrid.min.js:1513)
at Function.each (jquery-1.10.2.js:671)
at init.each (jquery-1.10.2.js:280)
at init.exportToExcel (jquery.jqGrid.min.js:1483)
at init.$.fn.jqGrid (jquery.jqGrid.min.js:101)
at <anonymous>:1:22
The data from my grid is from a Web API built using ASP.NET MVC5
Below is the code snippet of my grid and my export button:
$('#myGrid').jqGrid({
url: '/api/Remittance/GetRemittance',
mtype: 'GET',
datatype: 'json',
styleUI: 'Bootstrap',
colModel: [
{ key: true, hidden: true, label: 'Id', name: 'Id', width: 300 },
{ label: 'System Source', name: 'System_Source', width: 150 },
{ label: 'Placement Ref', name: 'Placement_Ref', width: 200 },
{ label: 'Transmittal Date', name: 'Transmittal_Date', width: 150, formatter: 'date', formatoptions: { newformat: 'm/d/Y' } },
{ label: 'Transmittal Reference', name: 'Transmittal_Reference', width: 200 },
{ label: 'Transmittal Notes', name: 'Transmittal_Notes', width: 200 },
{ label: 'Doc Transaction Id', name: 'Doc_Transaction_Id', width: 150 },
{ label: 'Doc Transaction Type', name: 'Doc_Transaction_Type', width: 170 },
{ label: 'Doc Status', name: 'Doc_Status', width: 150 },
{ label: 'Doc Date', name: 'Doc_Date', width: 150, formatter: 'date', formatoptions: { newformat: 'm/d/Y' } },
{ label: 'Doc Reference', name: 'Doc_Reference', width: 200 },
{ label: 'Doc Order Reference', name: 'Doc_Order_Reference', width: 200 },
{ label: 'Doc From', name: 'Doc_From', width: 200 },
{ label: 'Doc To', name: 'Doc_To', width: 200 },
{ label: 'Doc Sales Representative', name: 'Doc_Sales_Representative', width: 200 },
{ label: 'Doc Sales/Supply Unit', name: 'Doc_Sales_Supply_Unit', width: 200 },
{ label: 'Doc Amount', name: 'Doc_Amount', width: 150, formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2 } },
{ label: 'Doc Deductions', name: 'Doc_Deductions', width: 150, formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2 } },
{ label: 'Doc Gross Amount', name: 'Doc_Gross_Amount', width: 150, formatter: 'currency', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2 } }
],
autoWidth: false,
shrinkToFit: false,
viewrecords: true,
emptyrecords: 'No records to display.',
width: $(this).parent().width(),
height: 375,
rowNum: 10,
pager: '#pagerGrid',
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
Id: '0'
}
$('#exportGrid').click(function () {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
$('#myGrid').jqGrid('exportToExcel', {
includeLabels: true,
includeGroupHeader: true,
includeFooter: true,
fileName: 'Remittance_' + mm + '-' + dd + '-' + yyyy + '.xlsx',
maxlength: 40
});
});

just use the jquery.jqGrid.js (without min version). It should work. Mine also have the same problem. It works now

Jq Grid Edit creating non editable controls

Am using JQ grid.
My Jq grid will come inside JQ dialog.
When i click on edit pop up is comming but the control are non editable.
Java Script for JQ Grid:
$(document).ready(function () {
$('.viewIcon').click(function () {
$(function () {
$("#jqtable").dialog({
title: "Admin Console",
resizable: false,
modal: true,
width: 'auto',
appendTo: "form",
open: function (event, ui) {
jQuery("#jQGridDemo").jqGrid({
url: 'api/AdminConsole/GetListDetailData',
datatype: "json",
colNames: ['Key', 'Value'],
colModel: [
{ name: 'Key', index: 'Key', width: 200, align: "left", editable: true },
{ name: 'Value', index: 'Value', width: 200, align: "left", editable: true, edittype: 'text' },
],
jsonReader: {
repeatitems: true,
page: function () { return 1; },
root: function (obj) { return obj.rows; },
records: function (obj) { return obj.length; }
},
pager: "#jqGridPager"
});
$("#jQGridDemo").jqGrid('navGrid', '#jqGridPager',
{
add: true,
edit: true,
del: true
});
},
});
});
});
});
$("#jqtable").dialog("open");
UI for dialog displays like this and content are non editable.

I found answer
Added below code
$(document).ready(function () {
$.fn.jqm = false;
$.jgrid.jqModal = $.jgrid.jqModal || {};
$.extend(true, $.jgrid.jqModal, { toTop: true });
});

I Need to Allow only values between 0 -999 only in Jqgrid Edit Form

i am new to jqgrid , I need to Allow only values between 0 -999 only in Jqgrid Edit Form,
I need to display Custom message "Please enter number between 0 and 999".
$(document).ready(function () {
$("#TableDataGrid").jqGrid({
url: '/DataHandler.ashx?MethodName=RulesGetAllData1',
datatype: "json",
colNames: ['ID', 'Rule','value'],
prmNames: { id: "ID" },
colModel: [
{ name: 'ID', hidden: true, key: true, index: 'ID', editoptions: { disabled: true }, width: 20, "sortable": true, sorttype: 'integer', searchoptions: { sopt: ['eq'] }, searchrules: { required: true } },
{
name: 'RuleName', index: 'RuleName', width: 40, editable: true, sorttype: 'text',
searchoptions: {
sopt: ['eq', 'bw', 'bn', 'cn', 'nc', 'ew', 'en'],
maxlength: 30, size: 30,
style: "width:auto;padding:0;max-width:100%;float:left"
},
searchrules: { required: true },
editrules: { required: true},
editoptions: { maxlength: 30, size: 30, disabled: true }
},
{
name: 'Value', index: 'Value', width: 40, editable: true, sorttype: 'integer',
searchoptions: {
sopt: ['eq', 'ge', 'le'],
maxlength: 5, size: 5,
style: "width:auto;padding:0;max-width:100%;float:left"
},
editoptions: { maxlength: 3, size: 5 },
,
searchrules: { required: true }
}
],

try to Put this code on editrules on which field you need to put validation
editrules: {
required: true, custom: true, custom_func: function (value, colname) {
if (value.indexOf('+') > -1 || value.indexOf('-') > -1
|| value.indexOf('.') > -1 || value.indexOf(' ') > -1)
return [false, "Please enter number between 0 and 999"];
if (isNaN(value))
return [false, "Please enter number between 0 and 999"];
else
return [true, ""];
}
}

Export html table in highchart to pdf format but its display without html design

In Highchart title And Subtitle both display in table format But
when I trying to export html table in highchart to pdf format but its display without html design
<script type="text/javascript">
createGraph({
chart: {
renderTo: 'container',
defaultSeriesType: 'line',
margin: [140, 150, 60, 80],
events: {}
},
credits: {
enabled: false // remove highcharts.com
},
colors: ['#009999', '#0000FF', '#6600CC','#006600','#CC0000'],
title: {
align: 'left',
style: {
color: '#6600CC',
fontWeight: 'bold',
fontSize: '14px'
},
text:'<table style="color: #0000FF">'+
'<tr><td>'+<%= Parameter%> +'</td></tr>'+
'<tr><td>'+<%= PCode%> +'</td></tr>'+
'<tr><td>'+<%= PName%> +'</td></tr>'+
'</table>',
useHTML: true
},
subtitle: {
align: 'left',
style: {
color: '#6600CC',
fontWeight: 'bold',
fontSize: '14px'
},
text:'<table class="TFtableCol2">'+
'<tr><td>'+<%= HMean%> +'</td>' +
'<td>'+<%= HSTD%> +'</td>' +
'<td>'+<%= HRSD%> +'</td>' +
'<td>'+<%= HUCL%> +'</td>' +
'<td>'+<%= HLCL%> +'</td>' +
'</tr>'+
'<tr><td>'+<%= SDose%> +'</td>' +
'<td>'+'Spec Type :'+<%= SpecType%> +'</td>'+
'<td>'+<%= SPValue%> +'</td>'+
'<td>'+<%= SHLimit%> +'</td>'+
'<td>'+<%= SLLimit%> +'</td>'+
'</tr>'+
'</table>',
useHTML: true
},
xAxis: {
categories: <%= LotNumber%> ,
title: {
text: 'Lot #'
}
},
yAxis: {
title: {
text: 'Concentration ('+<%= Unit%>+')'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y +' '+ <%= Unit%>;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 100
},
series:[{
name: 'Spec '+ <%= SpecType%> ,
data: <%= SpecValue%>
},
{
name: 'Series',
data: <%= Series%>
},
{
name: 'Mean',
data: <%= Mean%>
},
{
name: 'UCL',
data: <%= UCL%>
},
{
name: 'LCL',
data: <%= LCL%>
}]
});
function createGraph(chartOptions) {
// open the basic chart
$(document).ready(function () {
// set the click event for the parent chart
chartOptions.chart.events.click = function () {
hs.htmlExpand(document.getElementById(chartOptions.chart.renderTo), {
width: 9999,
height: 9999,
allowWidthReduction: true,
preserveContent: false
}, {
chartOptions: chartOptions
});
};
var chart = new Highcharts.Chart(chartOptions);
});
}
// Create a new chart on Highslide popup open
hs.Expander.prototype.onAfterExpand = function () {
if (this.custom.chartOptions) {
var chartOptions = this.custom.chartOptions;
if (!this.hasChart) {
chartOptions.chart.renderTo = $('.highslide-body')[0];
chartOptions.chart.events.click = function () {};
var hsChart = new Highcharts.Chart(chartOptions);
}
this.hasChart = true;
}
};
</script>
Graph Display like this
But In PDF like this
how can i solve my issue?
please help
thank you

how to send list of id`s select from checkbox in a jqgrid in partialview to the controller

i need to send a list of values selected from checkboxes in each of the columns in the jqgrid, my problem is to send this info to the controller,
this is some of the code that i need to send from this partialview to the controller
this is my jqgrid:
jQuery("#TratamientoGrid").jqGrid({
url:"Tratamiento/SearchGridTreat",
datatype:"json",
colNames: ['ID', 'Nombre', 'Apellido', 'Nº Doc', 'Estado', 'Fecha Inicio'],
jsonReader: { repeatitems: false },
colModel: [
{ name: 'TratamientoId',index: 'Id', key: true, width: 40 },
{ name: 'Paciente.Nombre',index: 'pacienteNombre', width: 125 },
{ name: 'Paciente.Apellido', index: 'pacienteApellido', width: 125 },
{ name: 'Paciente.NumeroDocumento', index:'numeroDocumento', width: 75 },
{ name: 'TratamientoEstado.Nombre', index: 'estado', width: 125 },
{ name: 'FechaInicioTratamiento', formatter: 'date', index: 'fechaInicio', width: 100 },
],
rowNum: 5,
rowList: [5, 10, 20, 30],
loadonce: true,
pager: '#TratamientoPag',
sortname: 'ID',
caption: 'Imprimir código QR de Tratamiento',
multiselect: true,
viewrecords: true,
sortorder: "desc",
height: 'auto',
autowidth: true,
onSelectRow: function(id) {
var index = listOfIds.indexOf(id);
if (index == -1)
{
listOfIds.push(id);
}
else
{
listOfIds.splice(index, 1);
}
document.getElementById('lblCantSelected').innerHTML = listOfIds;//to show ids
}
});
jQuery("#TratamientoGrid").jqGrid('navGrid', '#TratamientoPag', { edit: false, add: false, del: false, search: false });
this is a button where i need to send the ids to the controller
function getTreatmentsSelected(id) {
var tlist;
tlist = jQuery("#TreatmentGrid").jqGrid('getGridParam','selarrrow') ;
$.ajax({
url:'#Url.Action("TreatmentDoSomething", "Treatment")',
type:'post',
data:{List: tlist},
success:function(data){
alert("Done");
}
});
}
and this is where i need to get the list of id`s
public ActionResult TreatmentDoSomething()!
{
return PartialView("_TreatmentDoSomething");
}