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, ""];
}
}
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
I have charts localized into non-English language such as Thai (example text : ภาษาไทย).
Everything seems to work fine, all texts can be displayed in that specific language.
But when I tried to export charts to files, these are list of what happened:
-Download to PNG image ---> Result : All non-English characters became squares.
-Download to JPEG image ---> Result : Same as downloading to PNG
-Download to PDF document ---> Result : Same as downloading to PNG
-Download to SVG vector image ---> Result : Displayed correctly
To know how it looks like, just replace English Label there with Thai example text (example text : ภาษาไทย).
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; margin-top: 1em"></div>
and
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
zoomType: 'xy'
},
title: {
text: 'ข้อมูลเข้านะจ๊ะ'
},
subtitle: {
text: 'สิบวันที่แล้วนะจ๊ะ'
},
xAxis: [{
categories: ['2012-08-01', '2012-08-02', '2012-08-03', '2012-08-04', '2012-08-05', '2012-08-06', '2012-08-07', '2012-08-08', '2012-08-09', '2012-08-10', '2012-08-11', '2012-08-12']
}],
exporting: {
buttons: {
exportButton: {
menuItems: [{},
{},
{},
{}, /* leave standard buttons */
{
text: 'Download as xls',
onclick: function() {
location.href="getXLS.php?param1=param¶m2=para2";}
}
]
}
}
},
yAxis: [{
min: 0,
max: 100,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // High wind
from: 90,
to: 100,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'AR to get',
style: {
color: '#606060'
}
}
}],
title: {
text: 'AR'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},{
min: 0,
max: 8000,
gridLineWidth: 1,
title: {
text: 'Inbound',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#AA4643'
}
},
opposite: true
}],
tooltip: {
formatter: function() {
var unit = {
'AR': '% ',
'1': '1',
'2': '2',
'3': '3'
}[this.series.name];
return ''+
this.x +': '+ this.y +' '+ unit;
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
yAxis: 1,
name: '1',
data: [2000, 1000, 3000, 2000, 1000]
}, {
yAxis: 1,
name: '2',
data: [4000, 7000, 4000, 6000, 5000]
}, {
name: '3',
type: 'spline',
color: '#F7801F',
yAxis: 0,
data: [90, 80, 70, 90, 85],
}]
});
});
});
I had the exact same problem. If you are sure the problem has no relation with encoding, then try the following depending on how you export
If you are exporting via your own server, make sure you added the required fonts
If you are exporting locally, add this one as well
<script src="http://code.highcharts.com/modules/offline-exporting.js"></script>
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");
}
I have a problem with jqGrid . jqGrid version 4.2.0 - jQuery Grid
grid show loaded data not in tree mode, only grid mode. Why ?
Please help me ! Можно по русски .
Add in header
<link href="../jqGrid/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="jqGrid/js/i18n/grid.locale-ru.js" type="text/javascript"></script>
<script src="jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
and my function to get data from web service .
function getDataSC(pData) {
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: '<%= ResolveClientUrl("~/FetchData.asmx/bindSCJson") %>',
dataType: "json",
success: function(data, textStatus) {
if (textStatus == "success")
ReceivedClientDataSC(JSON.parse(getMain(data)).rows);
},
error: function(data, textStatus) {
alert('An error has occured retrieving data!');
}
});
}
function ReceivedClientDataSC(data) {
var thegrid = $("#gridSC");
thegrid.clearGridData();
for (var i = 0; i < data.length; i++)
thegrid.addRowData(i + 1, data[i]);
}
function getMain(dObj) {
if (dObj.hasOwnProperty('d'))
return dObj.d;
else
return dObj;
}
var lastSel;
$("#gridSC").jqGrid({
datatype: function(pdata) { getDataSC(pdata); },
treeGrid: true,
treeGridModel : 'adjacency',
ExpandColumn: 'Name',
ExpandColClick: true ,
mtype: 'POST',
treeIcons: {plus:'ui-icon-circle-plus',minus:'ui-icon-circle-minus',leaf:'ui-
icon-person'},
height: "100%",
width: 900,
colNames: ['Id', 'Name', 'CountryName', 'Town', 'Adress', 'Phone', 'Email',
'Url'],
colModel: [
{ name: 'Id', index:'id', width:10, hidden:true,key:true},
{ name: 'Name', index: 'Name', width: 80},
{ name: 'CountryName',index:'CountryName', width:80},
{ name: 'Town', index: 'Town', width: 20 },
{ name: 'Adress', index: 'Adress', width: 90 },
{ name: 'Phone', index: 'Phone', width: 20},
{ name: 'Email', index: 'Email', width: 20 },
{ name: 'Url', index: 'Url', width: 30}
],
pager: $('#pjmapSC')
//rowNum:20,
//viewrecords: true,
//gridview: true,
//rowList:[10,20,30,100],
//sortname: 'Id',
//sortorder: 'asc'
})
}
json from server service (loaded to grid) :
{"d":"{\"total\":1,\"page\":1,\"records\":2,\"rows\":[{\"err\":null,\"Id\":1,\"Parent
\":0,\"Name\":\"Сервисные центры\",\"CountryCode\":103,\"Town\":\"Киев\",\"Adress
\":\"Красных партизан 1\",\"Phone\":\"123-321\",\"Email\":\"mail#mail.ru
\",\"CountryName\":\"United Arab Emirates\",\"Url\":\"www.service1\",\"isLeaf\":false,
\"Expanded\":true,\"Level\":1},{\"err\":null,\"Id\":2,\"Parent\":1,\"Name
\":\"Сервисный центр 1_1\",\"CountryCode\":103,\"Town\":\"Киев\",\"Adress\":\"Артема
\",\"Phone\":\"123-321\",\"Email\":\"fert#ukr.net\",\"CountryName\":\"United Arab
Emirates\",\"Url\":\"www.service2\",\"isLeaf\":true,\"Expanded\":true,\"Level\":2}],
\"userData\":null}"}
Help Please ! Thanks.
EDIT:
Thanks Oleg , but i try change my server string to
{"d":{"__type":"_admin.JqGridData","total":3,"page":1,"records":26,"rows": [{"id":1,"cell":["1","Сервисные центры","United Arab Emirates","Киев","Красных партизан 1","123-321","mail#mail.ru","www.service1","0",null,"False","False"]},{"id":2,"cell":["2","Сервисный центр 1_1","United Arab Emirates","Киев","Артема","123-321","fert#ukr.net","www.service2","1","1","True","False"]},{"id":4,"cell":["4","Сервисный центр 1_2","United Arab Emirates","Донецк","Артема","123-321","fert#ukr.net","www.service2","1","1","True","False"]},{"id":5,"cell":["5","Сервисный центр 1_3","United Arab Emirates","Одесса","Артема","123-321","fert#ukr.net","www.service3","1","1","True","False"]},
and
$("#gridSC").jqGrid({
url: '<%= ResolveClientUrl("~/FetchData.asmx/bindSC") %>',
datatype: 'json',
mtype: 'POST',
treeGridModel: 'adjacency',
ExpandColumn: 'Name',
ExpandColClick: true,
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
if (postData.searchField === undefined) postData.searchField = null;
if (postData.searchString === undefined) postData.searchString = null;
if (postData.searchOper === undefined) postData.searchOper = null;
//if (postData.filters === undefined) postData.filters = null;
return JSON.stringify(postData);
},
jsonReader: {
root: function (obj) { return obj.d.rows; },
page: function (obj) { return obj.d.page; },
total: function (obj) { return obj.d.total; },
records: function (obj) { return obj.d.records; }
},
colNames: ['Id', 'Name', 'CountryName', 'Town', 'Adress', 'Phone', 'Email', 'Url'],
colModel: [
{ name: 'Id', index: 'id', width: 10, hidden: true, key: true },
{ name: 'Name', index: 'Name', width: 80 },
{ name: 'CountryName', index: 'CountryName', width: 80 },
{ name: 'Town', index: 'Town', width: 20 },
{ name: 'Adress', index: 'Adress', width: 90 },
{ name: 'Phone', index: 'Phone', width: 20 },
{ name: 'Email', index: 'Email', width: 20 },
{ name: 'Url', index: 'Url', width: 30 }
],
rowNum: 10,
rowList: [10, 20, 300],
sortname: 'Name',
sortorder: "asc",
pager: "#pjmapSC",
viewrecords: true,
gridview: true,
rownumbers: true,
height: "100%",
caption: ''
})
and test
treeReader : {
level_field: "level",
parent_id_field: "parent",
leaf_field: "isLeaf",
expanded_field: "expanded"
},
nothing change in grid (not tree grid) . In server side my method
int startIndex = (page - 1) * rows;
int endIndex = (startIndex + rows < recordsCount) ?
startIndex + rows : recordsCount;
List<TableRow> gridRows = new List<TableRow>(rows);
for (int i = startIndex; i < endIndex; i++)
{
gridRows.Add(new TableRow()
{
id = lsc[i].Id,
cell = new List<string>(11) {
lsc[i].Id.ToString(),
lsc[i].Name,
lsc[i].CountryName,
lsc[i].Town,
lsc[i].Adress,
lsc[i].Phone,
lsc[i].Email,
lsc[i].Url,
lsc[i].level.ToString(),
lsc[i].parent,
lsc[i].isLeaf.ToString(),
lsc[i].expanded.ToString()
if i change to this
//string.Format("Name:{0}", lsc[i].Name)
my grid load incorrectly data
Help please.
Thanks Oleg , but i try change my server string to
{"d":{"__type":"_admin.JqGridData","total":3,"page":1,"records":26,"rows": [{"id":1,"cell":["1","Сервисные центры","United Arab Emirates","Киев","Красных партизан 1","123-321","mail#mail.ru","www.service1","0",null,"False","False"]},{"id":2,"cell":["2","Сервисный центр 1_1","United Arab Emirates","Киев","Артема","123-321","fert#ukr.net","www.service2","1","1","True","False"]},{"id":4,"cell":["4","Сервисный центр 1_2","United Arab Emirates","Донецк","Артема","123-321","fert#ukr.net","www.service2","1","1","True","False"]},{"id":5,"cell":["5","Сервисный центр 1_3","United Arab Emirates","Одесса","Артема","123-321","fert#ukr.net","www.service3","1","1","True","False"]},
and
$("#gridSC").jqGrid({
url: '<%= ResolveClientUrl("~/FetchData.asmx/bindSC") %>',
datatype: 'json',
mtype: 'POST',
treeGridModel: 'adjacency',
ExpandColumn: 'Name',
ExpandColClick: true,
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
if (postData.searchField === undefined) postData.searchField = null;
if (postData.searchString === undefined) postData.searchString = null;
if (postData.searchOper === undefined) postData.searchOper = null;
//if (postData.filters === undefined) postData.filters = null;
return JSON.stringify(postData);
},
jsonReader: {
root: function (obj) { return obj.d.rows; },
page: function (obj) { return obj.d.page; },
total: function (obj) { return obj.d.total; },
records: function (obj) { return obj.d.records; }
},
colNames: ['Id', 'Name', 'CountryName', 'Town', 'Adress', 'Phone', 'Email', 'Url'],
colModel: [
{ name: 'Id', index: 'id', width: 10, hidden: true, key: true },
{ name: 'Name', index: 'Name', width: 80 },
{ name: 'CountryName', index: 'CountryName', width: 80 },
{ name: 'Town', index: 'Town', width: 20 },
{ name: 'Adress', index: 'Adress', width: 90 },
{ name: 'Phone', index: 'Phone', width: 20 },
{ name: 'Email', index: 'Email', width: 20 },
{ name: 'Url', index: 'Url', width: 30 }
],
rowNum: 10,
rowList: [10, 20, 300],
sortname: 'Name',
sortorder: "asc",
pager: "#pjmapSC",
viewrecords: true,
gridview: true,
rownumbers: true,
height: "100%",
caption: ''
})
and test
treeReader : {
level_field: "level",
parent_id_field: "parent",
leaf_field: "isLeaf",
expanded_field: "expanded"
},
nothing change in grid (not tree grid) . In server side my method
int startIndex = (page - 1) * rows;
int endIndex = (startIndex + rows < recordsCount) ?
startIndex + rows : recordsCount;
List<TableRow> gridRows = new List<TableRow>(rows);
for (int i = startIndex; i < endIndex; i++)
{
gridRows.Add(new TableRow()
{
id = lsc[i].Id,
cell = new List<string>(11) {
lsc[i].Id.ToString(),
lsc[i].Name,
lsc[i].CountryName,
lsc[i].Town,
lsc[i].Adress,
lsc[i].Phone,
lsc[i].Email,
lsc[i].Url,
lsc[i].level.ToString(),
lsc[i].parent,
lsc[i].isLeaf.ToString(),
lsc[i].expanded.ToString()
if i change to this
//string.Format("Name:{0}", lsc[i].Name)
my grid load incorrectly data
Help please.
You main error is in the wrong case of the column names of Tree Grid which you use. It should be level, parent, expanded instead of Level, Parent, Expanded which you use in the JSON input. Only isLeaf you use correctly. So you should either correct the column which use your web service or add parameter treeReader which describes the names which you use:
treeReader = {
level_field: "Level",
parent_id_field: "Parent",
leaf_field: "isLeaf",
expanded_field: "Expanded"
}
Additionally I would recommend you to change your code so that you use datatype: 'json' instead of datatype as function.