Senior Developer. I am a new developer and I am not sure about jqgrid.
Thank you very much for your help.
I am concerned about performance degradation when querying large amounts of data in jqgrid. So we only retrieve the data from the DB as much as the rowNum select Box value, and the total count of the data together with the number.
I want to change the values of the pager according to the response
data after querying the condition. (pager value of jqgrid - total,
records...).
The structure of the server response object is
data: {
page: {
totalRowCount,
currentPage,
displayRowCount,
totalPage
},
fileInfoDtoList
}
That's it.
The totalRowCount and fileInfoDtoList sizes are not the same.
fileInfoDtoList contains only the data shown in the table of the current page.
totalRowCount is the total number of data that will be generated in the actual condition query.
I tried to change lastpage, records, total with setGridParam and also changed the internal value by assigning jsonReader to variable using getGridParam, but the actual pagerUI value did not change.
fileDataGrid.jqGrid({
url: setUrl(),
mtype: "GET",
datatype: "json",
colModel: [
{
label: 'date', name: 'baseDate',
formatter: function (cellValue, options, rowdata) {
let fixedValue = cellValue.substr(0, 4) + "-" +
cellValue.substr(4, 2) + "-" +
cellValue.substr(6, 2);
return $.fn.fmatter.call(this, "date", fixedValue, options, rowdata);
},
formatoptions: {
newformat: "Y-m-d"
}
, align: 'center'
},
{label: 'aa', name: 'diseaseName', align: 'right'},
{label: 'bb', name: 'fileName', align: 'right'},
{label: 'cc', name: 'fileSize', align: 'right'},
{label: 'dd', name: 'fileStateName', align: 'center'},
],
jsonReader: {
records: 'page.totalRowCount',
total:'page.totalPage',
root: 'fileInfoDtoList',
page: 'page.currentPage',
repeatitems: false
},
rowNum: 10,
viewrecords: true,
rownumbers: true,
emptyrecords: 'No Datas',
loadonce: false,
sortable: 'true',
pager: '#pager',
rowList: [10, 20, 30],
//paging event area
onPaging: function (pgButton) {
console.log(pgButton);
setTimeout(function () {
$.ajax({
url: setUrl(),
method: 'get',
success: function (data) {
console.log(data);
let rowNum = $("#fileDataCollectJqGrid").getGridParam('rowNum');
let currentPage = $("#fileDataCollectJqGrid").getGridParam('page');
let lastPage = $("#fileDataCollectJqGrid").getGridParam('lastpage');
let totalrows = $("#fileDataCollectJqGrid").getGridParam('totalrows');
console.log(" rowNum : " + rowNum + " currentPage : " + currentPage + " lastPage : " + lastPage + " totalrows : " + totalrows );
fileDataGrid.jqGrid('clearGridData');
let jsonReader = fileDataGrid.jqGrid('getGridParam', 'jsonReader');
console.log(jsonReader);
jsonReader.total = 999;
console.log(fileDataGrid.jqGrid('getGridParam', 'jsonReader'));
fileDataGrid.jqGrid("setGridParam", {
datatype: "local",
data: data.fileInfoDtoList,
lastpage: data.page.totalPage,
records: data.page.totalRowCount,
});
fileDataGrid.trigger('reloadGrid');
}
})
}, 0);
}
});
button event area
$("#searchButton").click(function () {
$.ajax({
url: setUrl(),
method: "get",
success: function (data) {
console.log(setUrl());
console.log(data);
let $fileDataCollectJqGrid = $('#fileDataCollectJqGrid');
$fileDataCollectJqGrid.jqGrid('clearGridData');
$fileDataCollectJqGrid.jqGrid("setGridParam", {
datatype: "local",
data: data.fileInfoDtoList,
totalRows: data.page.totalPage,
});
$fileDataCollectJqGrid.trigger('reloadGrid');
}
});
});
Initially, when I set jqgrid, it knows that the value of pager is set according to the setting value of jsonReader.
I tried to set the value of the pager after the condition query, but the value was not changed in the pagerUI part.
And I tried to change the total (total Page Count) and records (total Row Count) of the pager with setGridParam, but I changed the lastpage, totalrows, and so on. However, the total Row Count has changed by the size of the list.
fileDataGrid.jqGrid("setGridParam", {
datatype: "local",
data: data.fileInfoDtoList, <<--changed total (total Page Count) value of pager as this size of list.
lastpage: data.page.totalPage,
records: data.page.totalRowCount,
});
i solved problem myself!
just settled post Data as setGridParam when i call data request method.
i already set pager data in jsonReader. so i could solve my problem.
$('#fileDataCollectJqGrid').jqGrid('setGridParam', {
postData: {
collectId: "${collectId}",
baseDate: $('#dateInput').val(),
diseaseCode: $('#diseaseSelect').val(),
fileName: $('#fileNameInput').val(),
stateCode: $('#collectionStatus').val()
},
}).trigger('reloadGrid');
Related
I am using JQuery Datatable Editor with Server Side processing using Java Servlet. Editing a row works fine but the updated data is not being shown in the table.
The edit is successful and I am able to see the JSON object for the updated row in the browser console.
var editor = new $.fn.dataTable.Editor( {
ajax: '/fda/intranet/translationNew/TranslationFileServ',
table: '#example',
idSrc: 'id',
fields: [
{ label: 'Id', name: 'id',type: "readonly" },
{ label: 'In Current File', name: 'inCurrentFile',type: "readonly" },
{ label: 'en_us', name: 'en_us',type: "readonly" },
{ label: 'translatedTo', name: 'translatedTo',type: "readonly" },
{ label: 'translation', name: 'translation', type: 'textarea' }
// etc
]
} );
I'm developing an application using Java Spring and ExtJS. The front end contains a panel with some fields including 3 comboboxes. To fill the comboboxes, I have defined a function which is fired on ComboBox afterRender. I have a store for each combobox (each combobox is filled from different tables).
The problem is when the page is rendered, the function is called 3 times but only the 3rd combo box is filled, or the JSON string returned contains only the value for last combo box. Actually the request for all 3 comboboxes are sent, but only the last request is processed.
Can anyone give me an idea how to handle this problem?
This is how i defied a combo box.
{
xtype: 'combobox',
x: 300,
y: 70,
store: 'TasksStr',
msgTarget: 'side',
displayField: 'label',
valueField: "value",
itemId: 'TaskRef',
fieldLabel: 'Task Ref',
name: 'taskRef'
} //Similarly 2 more combo boxes for Project and Status
This is the controller:
init: function(application) {
this.control({
"#TaskRef": {
afterrender: this.onComboboxAfterRender,
select: this.onFormBlur
},
"#ProjectRef": {
afterrender: this.onComboboxAfterRender,
select: this.onFormBlur
},
"#StatusRef": {
afterrender: this.onComboboxAfterRender,
select: this.onFormBlur
}
});
}
This is the store:
Ext.define('MainApp.store.TasksStr', {
extend: 'Ext.data.Store',
requires: [
'MainApp.model.Model'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'TasksStr',
model: 'MainApp.model.Model',
proxy: {
type: 'ajax',
url: 'http://localhost:8080/project/Tasks',
reader: {
type: 'json',
root: 'data',
totalProperty: 'count'
}
}
}, cfg)]);
}
});
This is the controller in java:
#RequestMapping(value="/{id}")
public String getElanLUT(#PathVariable("id") String Id, ModelMap model ){
System.out.println(Id);
try{
ABCDao.set(Id);
List<ABC> List = Dao.getABC();
model.addAttribute("data", List);
model.addAttribute("success", true);
model.addAttribute("count", List.size());
}catch(Exception e){
model.addAttribute("success", false);
e.printStackTrace();
}
return "jsonTemplate";
}
While running this code, the console for java prints all 3 Id's but the value returned is just the 3rd one.
Thanks in advance.!
You need to create store instances for all 3 combo boxes.
{
xtype: 'combobox',
x: 300,
y: 70,
store: Ext.create('MainApp.store.TasksStr'),
msgTarget: 'side',
displayField: 'label',
valueField: "value",
itemId: 'TaskRef',
fieldLabel: 'Task Ref',
name: 'taskRef'
}
I have a select widget as follows
var pulseLen = new Select({
id : "_PulseLength",
label:"PulseLength",
name: "pulseLength",
value : 100,
options: [
{ label : "5", value :"5" },
{ label : "10", value :"10" },
{ label : "30", value :"30" },
{ label : "100", value :"100" },
{ label : "300", value :"300" }
]
});
Now based on the value selected in the above pulseLength widget i have to change the options of the below Select Range widget
Its part of GUI validations.
var range = new Select({
id:"_Range",
label:"Range"),
name: "range",
value: "5000",
options: [
{ label : "5", value :"5000" },
{ label : "10", value :"10000" },
{ label : "20", value :"20000" },
{ label : "40", value :"40000" },
{ label : "80", value :"80000" },
{ label : "160", value :"160000" },
{ label : "260", value :"260000" }
]
});
API to generate dynamic options
function getRangeArray(pulselen){
var myOptions = "";
var array = [0.5,1,2,5,10,20,40];
console.log("Length got is " + pulselen);
for(i=0;i<array.length;i++){
var myTmp = "{label : '" + array[i] + "', value : '"+array[i] * 1000 + "'}";
//console.log(myTmp);
if(i==array.length-1){
myOptions = myOptions + myTmp;
}else{
myTmp=myTmp+",";
myOptions = myOptions + myTmp;
}
//console.log(myOptions);
}
//console.log(myOptions);
myOptions = "[" + myOptions + "];";
return myOptions;
}
OnChange event of the pulseLength trying to change the options
var newOptions = getRangeArray(value);
console.log(newOptions);
registry.byId("_Range").set("options", newOptions);
Sample Output
[{label : '0.5', value : '500'},
{label : '1', value : '1000'},
{label : '2', value : '2000'},
{label : '5', value : '5000'},
{label : '10', value : '10000'},
{label : '20', value : '20000'},
{label : '40', value : '40000'}];
There are a couple of things wrong here, I think. Like Thomas Kagan said in the comments, there are some typos:
The range select widget has a ; after "value:" and a ) after "label:
Range".
Next, in your getRangeArray function, you are actually building a string! That's not necessary - you would have to parse it with JSON.parse to be useful. Instead, just build the array with objects directly:
function getRangeArray(pulselen){
var myOptions = [];
var array = [0.5,1,2,5,10,20,40];
console.log("Length got is " + pulselen);
for(i=0;i<array.length;i++){
myOptions.push({label: array[i].toString(), value: "" + array[i]*1000 });
}
return myOptions;
}
Notice that I call toString() on the labels! Otherwise dijit/form/Select will throw some really weird errors - it expects the labels to be strings.
Also, although I don't know if it's necessary, you may have to call reset() on the _Range widget after updating its options:
registry.byId("_Range").set("options", newOptions).reset();
.. at least you used to, but it seems to work without it now.
Here's a fiddle with your code, and the updated parts: http://jsfiddle.net/ycrz1ug4/
I am new to Highstock, am not able to plot the graph.
I am sending an AJAX request to get the graph data.I am returning List of X-Axis Data, and List of Y-Axis Data, I also used Map but the values are coming like {1420051860000=101}, which is not acceptable format in Highstock.
$(document).ready(function(){
$.ajax({ url: 'getData',
dataType : 'json',
type: 'GET'
success: function (data) {
var xAxisdata= data.xAxisData;
var yAxisData=data.yAxisData;
//converting two arrays to two-dimesional array, It's not working
var jarray = [];
for (var i=0; i<xAxisdata.length && i<yAxisdata.length; i++){
jarray[i] = [xAxisdata[i], [yAxisdata[i]]];
}
//Getting these values for X and Y values
var xAxisdata=[1420051860000,1420052160000,1420052460000,1420052760000,1420053060000,....];
var yAxisdata=[100,110,112,113,110,112,111,110,115,116,114,114,110,114,112,113,110,....];
//Creates chart
var chart =new Highcharts.StockChart({
chart: {
renderTo: "container",
zoomType: 'x'
},
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 280
},
title : {
text : 'AAPL Stock Price'
},
credits: {
enabled: false
},
xAxis: {
title: {
text: 'Time'
},
type: 'datetime',
labels:{
formatter:function(){
return Highcharts.dateFormat('%H<br/>%d<br/>%m<br/>%Y',this.value);
}
},
},
yAxis: {
title: {
text: "Stock "
},
lineWidth: 1,
min:0,
gridLineWidth: 0
},
series : [{
name : 'AAPL',
showInLegend: true,
data : jarray,
marker : {
enabled : true,
radius : 3
}
}]
});
}
});
} );
And also facing issue with Months, in javaScript the months are starting from 0 to 11, But in java starts from 1. If the month is JAN-2014, it showing FEB-2014.
Suggest me the best way to plot the graph using JSON Response.
You were very close, there's just a little issue with the format of your array you've built.
Try to use
var jarray = [];
for (var i=0; i<xAxisdata.length && i<yAxisdata.length; i++){
jarray[i] = [xAxisdata[i], yAxisdata[i]];
}
Just remove the outer square brackets on [ yAxisdata[i] ]
Like in this jsFiddle
Currently i am working in java jqgrid I want to display the sorted grid after clicking of a column header.I already used onsortcol.but it is not working .her is my code.onsort col function is in active but it doesnt performs sorting.thanks in advance
CODE:
jq(function() {
var base = "<%=request.getContextPath()%>";
var records = -1;
jq("#grid").jqGrid({
url:base+'/admin/adminusermanagecrud.htm',
datatype: 'json',
mtype: 'GET',
colNames:['', 'Name','Employee ID','User Name','Mobile','City','State','Is Active','Created Date','Role','Bank Name'],
colModel:[
{name:'id',index:'id', width:55,editable:false,hidden:true},
{name:'adminName',index:'adminName', width:175,editable:true,sortable:true, editrules:{edithidden:true,required:false}, editoptions:{size:25,readonly:false,disabled:false},search:false},
{name:'adminEmployeeId',index:'adminEmployeeId', width:175,editable:true, editrules:{edithidden:true,required:false}, editoptions:{size:25,readonly:true,disabled:false},search:true},
{name:'adminuserName',index:'adminuserName', width:175,editable:true, editrules:{edithidden:false,required:false}, editoptions:{size:25,readonly:false,disabled:false},search:true},
{name:'mobile',index:'mobile', width:175,editable:true, editrules:{edithidden:false,required:false}, editoptions:{size:25,disabled:false},search:true},
{name:'city',index:'city', width:175,editable:true, editrules:{edithidden:true,required:false}, editoptions:{size:25,disabled:true},search:true},
{name:'state',index:'state', width:175,editable:true, editrules:{edithidden:true,required:false}, editoptions:{size:25,disabled:true},search:true},
{width:165,formatter:linkFormat,editable:true,edittype:'select',editrules:{edithidden:true,required:false}, editoptions:{value:"0:Activate;1:De-Activate",size:25,disabled:false,multiple:false},search:false},
{name:'createDate',index:'createDate',width:185,editable:true, editrules:{edithidden:true,required:false}, editoptions:{size:25,disabled:true},search:false},
{name:'role',index:'role',width:175,editable:true,editrules:{edithidden:true,required:false},editoptions:{size:25,disabled:true},search:false},
{name:'bankName',index:'bankName',width:175,editable:true,editrules:{edithidden:true,required:false},editoptions:{size:25,disabled:true},search:false}
],
postData:{
},
loadError:function(xhr,status,error)
{
var base = "<%=request.getContextPath()%>";
alert(status);
if(xhr.status == '403' || xhr.status == '401' || status == 'parsererror')
{
window.location.href = base+"/login.htm";
}
},
rowNum:5,
//rowList:[5,10,15,20],
height: 150,
//width:750,
autowidth: true,
rownumbers: true,
pager: '#pager',
sortname: 'adminName',
scrollrows:true,
viewrecords: true,
sortorder: "asc",
caption:"Admin Users Summary",
onSortCol: function (index, columnIndex, sortOrder) {
alert(index);
return 'stop';
},
cellEdit: false,
emptyrecords: "Search returned no results",
loadonce: false,
loadComplete: function()
{
},
jsonReader : {
root: function(obj)
{
if(obj.status == false)
{
window.location.href = base+"/login.htm";
}
else
{
records = obj.records;
return obj.rows;
}
},
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "id"
},
editurl:base+"/admin/edit.htm"
});
jq("#grid").navGrid('#pager',
{edit:false,add:false,del:false,search:true,excel:true},
{ },
{ },
{ },
{
sopt:['eq','cn', 'bw', 'ew'],
closeOnEscape: true,
multipleSearch: false,
closeAfterSearch: true
}
);
jq("#btnFilter").click(function()
{
jq("#grid").jqGrid('searchGrid',
{
multipleSearch: false,
sopt:['eq']
}
);
});
});
Inside your controller you would need to handle the sorting. Something similar to
var pagedQuery = filteredQuery.OrderBy(sidx + " " + sord).Skip((page - 1) * rows).Take(rows);
where you actually sort your dataset and return it to jqGrid.