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
]
} );
Related
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');
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 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
i'm new in ExtJS and Servlet.
I created a form with 2 fields usinf ExtJS :
var panel = Ext.create('Ext.form.Panel',
{
title: 'Personnal Data',
bodyPainting: 5,
width: 350,
region:'center',
url: 'save_form.php',
items:
[{
xtype: 'textfield',
fieldLabel: 'First Name ',
name: 'firstName'
},
{
xtype: 'textfield',
fieldLabel: 'Last Name ',
name: 'lastName'
}],
buttons:
[{
text: 'Submit',
handler: function()
{
var formData = this.up('form').getForm();
}
}]
});
But i don't know how to pass the value of the two fields to a servlet, by clicking on the button.
And how can i retrieve the data entered in the form, in the servlet ?
Thank you !
By default ExtJS Forms will send over the values in an "ajax" fashion and I believe it will be a "post". In your servlet (assuming you are posting to a servlet defined in your web.xml file) in your doPost (or doGet) methods, use the "request" variable in the method and do
request.getParameter("firstName")
and
request.getParameter("lastName")
.
Link to HttpServlet Definition (is the same for just about every java container).
Edit:
In your handler you need to add:
formData.submit();
So I am trying to add a combobox that has 2 values on the same line as my text field, but am having trouble doing so.
This is what it looks like right now:
I want to be able to move the combobox to the left of the 2 textfields that I have.
This is the code that I have for my combobox which I have placed outside of my Formpanel:
var cbTemplate = new Ext.form.ComboBox({
typeAhead: false,
width: 125,
hideTrigger:true,
allowBlank: true,
displayField: 'val',
});
// ComboBox for switching status
var carWeightData={lstValueRecords: [{val: 'Item 1'},{val: 'Item 2'}]};
var cbCombo = jQuery.extend(true, {}, cbTemplate);
cbCombo.id = 'cbCarWeight';
cbCombo.name = 'cbCarWeight';
cbCombo.emptyText = 'Please Select';
cbCombo.hideTrigger = false;
cbCombo.mode = 'local';
cbCombo.triggerAction = 'all';
cbCombo.store = new Ext.data.Store({
data: comboData,
reader: new Ext.data.JsonReader({
root: 'lstValueRecords',
fields: [
{name: 'val', mapping: 'val'}
]
})
});
So I am trying to add a combobox that has 2 values on the same line as my text field, but am having trouble doing so.
This is what it looks like right now: combobox
I want to be able to move the combobox to the left of the 2 textfields that I have.
This is the code that I have for my combobox which I have placed outside of my Formpanel:
var cbTemplate = new Ext.form.ComboBox({
typeAhead: false,
width: 125,
hideTrigger:true,
allowBlank: true,
displayField: 'val',
});
// ComboBox for switching status
var carWeightData={lstValueRecords: [{val: 'Item 1'},{val: 'Item 2'}]};
var cbCombo = jQuery.extend(true, {}, cbTemplate);
cbCombo.id = 'cbCarWeight';
cbCombo.name = 'cbCarWeight';
cbCombo.emptyText = 'Please Select';
cbCombo.hideTrigger = false;
cbCombo.mode = 'local';
cbCombo.triggerAction = 'all';
cbCombo.store = new Ext.data.Store({
data: comboData,
reader: new Ext.data.JsonReader({
root: 'lstValueRecords',
fields: [
{name: 'val', mapping: 'val'}
]
})
});
This is my textfield portion which is inside the FormPanel and inside a column:
columnWidth:.6,
layout: 'form',
items: [
cbCombo,{
xtype: 'container',
layout: 'hbox',
hideLabel: true,
labelStyle: 'width: 105px',
fieldLabel: 'Combo Data',
anchor: '90%',
items:[{
xtype:'textfield',
name: 'locationId1',
flex: 12
},{
xtype: 'label',
margins: '0 0 0 5',
text:'-',
flex: 1
},{
xtype:'textfield',
name: 'locationId2',
flex: 12
}]
}]
Is there anyway that I could move the combobox down to be next to the texfield?
Please help!
Why don't you just do the same as your text fields?
items: [
{
xtype: 'combo',
// combobox configuration
},{
xtype:'textfield',
name: 'locationId1',
flex: 12
},
...
]
Nothing prevents you from putting an instantiated component in there, either:
items: [
new Ext.form.ComboBox({
// combobox configuration
}),
{
xtype:'textfield',
name: 'locationId1',
flex: 12
},
...
]
Extending an Ext component with jQuery is something I would refrain myself from doing, however o_O