Develop Reference

Feeding the dataview from JsonStore

Feeding the viewdata from the jsonstore
I want to use a JsonStore to feed my dataview. currently with the code below, the store is empty in the dataview. For testing, I wrote some code in the controller before opening the window and I can
see that the restful service retrieves data - getActivitiesToRescueCallback --> responce.responseText.
How can I feed my dataview with the Jsonstore?
In th ViewController:
getActivitiesToRescueCallback : function(options, success, response) {
if (success)
var result = Ext.decode(response.responseText); // Here I am getting data
},
getActivitiesToRescue : function() {
Ext.Ajax.request({
url : '/test/json_p',
params : {
"params[]" : "RESCUE",
"respName" : "",
"method" : "GetActivities",
"format" : "json"
},
callback : 'getActivitiesToRescueCallback',
scope : this
});
},
**View**
Ext.define('Tuv.test.rescue.RescueView', {
extend : 'Ext.window.Window',
alias : 'widget.rescueview',
alias : 'controller.rescueview',
bind : {
title : '{rescueTexts.masseRescue}'
},
height : 400,
width : 600,
constrainHeader : true,
maximizable : true,
closeAction : "hide",
layout : 'card',
activeItem : 0,
items : [ {
xtype : 'panel',
title : 'check activities',
layout : 'hbox',
border : false,
layoutConfig : {
align : 'stretch'
},
tbar : [ {
xtype : "button",
text : "copy",
handler : function() {},
scope : this
} ],
items : [ {
autoScroll : true,
width : 150,
items : {
xtype : 'dataview',
listeners : {
'afterrender' : function(comp) {
console.log('Test');
},
scope : this
},
store : new Ext.data.JsonStore({
url : '/test/json_p',
baseParams : {
"params[]" : "RESCUE",
respName : "",
method : "GetActivities",
format : "json"
},
idProperty : 'ACT_ID',
fields : [ 'ACT_ID', '_ACT_TYPE', '_FIRST_FORM', 'PRUEFSTATUS', '_DEBUG', '_SYNC_STATUS', '_SYNC_STATUS2', 'EQART', 'INVNR', 'ZTSPRID', 'ANLAGE_ZTSPRID', 'ZTSPRIDT' ]
}),
itemSelector : 'tr.dataRow',
tpl : new Ext.XTemplate('<table id="dataRescueTable">' + '<tpl for=".">', '<tr class="dataRow"><td>' + '<span <tpl if="STATUS==50">style="font-weight: bold;color:green"</tpl>>{name}</span></td></tr>', '</tpl>', '</table>')
}
} ],
bbar : {
buttonAlign : 'right',
items : [ {
text : "next",
handler : function(button) {
},
scope : this
} ]
}
} ]
});

To load the store I had to call store.load() or adding autoLoad: true as a config to the store.

Tabulator 4.1- Data is not populating in Table on IE 11

Data is not populating inside the table. But when I am opening console or performing addRow operation, data gets updated.
Below is the code:
$(document).ready(function() {
$.get("./resources/json/result.json", function(data, status) {
createEmpDetailTbl(JSON.parse(data));
});
function createEmpDetailTbl(jsonData) {
table = new Tabulator("#emp-detail-table", {
data : jsonData,
height : "100%",
layout : "fitColumns",
tooltips:true,
tooltipsHeader: true,
addRowPos:"top",
pagination : "local",
paginationSize : 10,
columns : [ {
title : "Actions",
field : "username",
//sorter : "string",
width : 100,
frozen : true,
headerSort : false,
formatter : actionRowIcon,
cellClick : function(e, cell) {
//console.log("Event Source: "+e.srcElement.id);
//console.log("Cell Value: "+cell.getValue());
if('del' == e.srcElement.id){
var row = cell.getRow();
row.delete().then(function(){
//run code after row has been deleted
alert('Row Deleted Successfully');
$.ajax({
url: "/YourController",
cache: false,
dataType: "json",
success: function(data) {
//$("#content").html(data);
}
});
})
.catch(function(error){
//handle error deleting row
});
var rowIndex = row.getIndex();
//console.log('Row Data: '+row);
//console.log('Row Position: '+row.getPosition(true));
}
}
}, {
title : "Employee ID",
field : "username",
//sorter : "string",
width : 120,
align : "left",
headerSort : false,
editor:"input",
frozen : true
}, {
title : "Full Name",
field : "fname",
//sorter : "string",
width : 120,
align : "left",
headerSort : false,
frozen : true
}, {
title : "Email Address",
field : "email",
//sorter : "string",
width : 170,
align : "left",
headerSort : false,
cellClick : function(e, cell) {
//console.log("cell click")
},
}, {
title : "OUC",
field : "ouc",
//sorter : "string",
width : 70,
align : "left",
headerSort : false
}, {
title : "LOB",
field : "lob",
width : 70,
align : "left",
headerSort : false,
//sorter : "string"
}, {
title : "Type of Redundancy",
field : "tyRedun",
//sorter : "string",
width : 120,
align : "left",
headerSort : false,
}, {
title : "Type of Notice Period",
field : "tyNoticePeriod",
//sorter : "string",
width : 80,
align : "left",
headerSort : false
}, {
title : "Notice Period",
field : "noticePeriod",
//sorter : "string",
width : 70,
align : "left",
editor:"select",
editorParams:{values:["1 Month", "2 Month", "3 Month", "4 Month"]},
headerSort : false
}, {
title : "Proposed Exit Date",
field : "proExitDate",
//sorter : "date",
width : 80,
align : "left",
headerSort : false
}, {
title : "Consultation Manager UIN",
field : "conManagerUin",
width : 80,
align : "left",
headerSort : false
//sorter : "number",
}, {
title : "Consultation Date",
field : "conDate",
//sorter : "date",
width : 80,
align : "left",
headerSort : false
}, {
title : "Pension Contribution",
field : "pensionContri",
//sorter : "number",
width : 100,
align : "left",
headerSort : false
}, {
title : "Car Cash Allowance",
field : "carCashAllowance",
//sorter : "number",
width : 100,
align : "left",
headerSort : false
} ],
renderStarted:function(){
$('#loading').show();
},renderComplete:function(){
$('#loading').hide();
},
cellEdited:function(row){
//row - row component
//console.log('Changed......'+row.getData().username);
$.ajax({
type: 'GET',
//url: './resources/json/employee.json',
url: projectOptions.restUrl+'employee/'+row.getData().username,
dataType:'text',
contentType: 'application/json; charset=utf-8',
beforeSend:function(){
$('#loading').show();
},
success:function(response) {
if(response != ""){
var data=[];
data.push(response);
console.log(JSON.parse(data));
//table.updateData(JSON.parse(data));
table.addData(JSON.parse(data));
$('.alert').hide();
} else{
$('#error-txt').text('').text('Employee data not found.');
$('.alert').show();
}
},
complete:function(){
$('#loading').hide();
},
error:function(err, xhr, msg){
alert(err+"-------------------"+xhr);
}
});
}
});
}
JSON:
[{
"dn": null,
"username": "23456789",
"password": null,
"displayName": null,
"fname": "John",
"lname": "Smith209884",
"email": "x.x#wer.com",
"ouc": "TBS23B",
"lob": "wer",
"jobcode": "STST05",
"employer": "NO Plc",
"ldg": "GB LDG",
"origHireDate": "1980-09-01",
"serviceDate": "1980-09-01",
"terminationDate": null,
"authorities": [],
"accountNonExpired": true,
"accountNonLocked": true,
"credentialsNonExpired": true,
"enabled": true,
"timeBeforeExpiration": 2147483647,
"graceLoginsRemaining": 2147483647,
"name": "John Smith209884"
}]

There is no need to make the GET request yourself, Tabulator can do that for you.
Instead of using the data property, use the ajaxURL and pass it the url:
table = new Tabulator("#emp-detail-table", {
ajaxURL: "./resources/json/result.json",
height : "100%",
layout : "fitColumns",
...
});
If the table isnt loading the data it suggests it is in the wrong format, have you checked your console logs? Tabulator will leave a message in the logs explaining why it cant load the data. it will be expecting an array of objects:
[
{...},
{...},
]

How to show image in jsGrid from database using javaScript/JQuery/Hibernate/Spring?

I am trying to display image in the jsGrid from the database.I have tried below code.
.js code:
fields : [ {
title : "Currency Code",
name : "curr_code",
type : "text",
width : 35,
filtering : false,
editing : true,
align : "center"
},
.....
{
title : "Symbol",
name : "curr_symbol",
type : "text",
width : 35,
filtering : false,
editing : true,
align : "center"
},
{
type : "control",
editButton : true,
modeSwitchButton : true,
deleteButton : true,
width : 35
}
]
Grid View:
$.post('../../setupController/currencyGridView', function(obj) {
for (var i = 0; i < obj.length; i++) {
var currList = {
"curr_id" : obj[i].currency_id,
"curr_code" : obj[i].curr_code,
"curr_desc" : obj[i].curr_desc,
"curr_count" : obj[i].curr_country,
"curr_symbol" : obj[i].symbol,
}
$("#currencygrid").jsGrid("insertItem", currList).done(
function() {
});
}
});
Controller code:
#RequestMapping(value = "/currencyGridView", method = RequestMethod.POST)
#ResponseBody
public List<Currency> currencyGridView() {
List<Currency> currList = setupDao.currencyGridViewData();
return currList;
}
Now its showing output like this but not showing the image..

You can use itemTemplate. If you have image link you can do something like below
{
title: "Symbol",
type: "text",
width: 50,
itemTemplate: function(value, item) {
if(item.symbolId){
return '<img src="/img/"'+ item.symbolId + '" "width="42" height="42">';
}
return '';
}
}

Maybe you can override the itemTemplate function for that image column.
js
itemTemplate: function(value, item) {
return value;
},
Or do some custom row rendering : http://js-grid.com/demos/custom-row-renderer.html

add hyperlink text to specific rows ui-grid

I have config.json file where i define columnDefs. I want to add hyperlink text to name field and redirect to page with information about that row. I try with some examples on SO but no success..
config.json
"columnDefs":[
{
"name": "name"
},
{
"name": "object_type_s"
}
........
]
controller
$scope.gridOptions = {
columndDefs: config.columnDefs,
......
}
If i put cellTemplate in config file like this
{
"name": "name",
"cellTemplate": "<a href="#">"
},
this will add hyperlink in all rows in my grid. I want for example to add hyperlink only to rows where
$scope.gridOptions.data.object_type == "SOMETHING"

When you click on a name, it takes you a next page
$scope.gridOptions = {
paginationPageSizes : [ 25, 50, 75 ],
paginationPageSize : 25,
enableColumnResizing : true,
enableSorting : true,
enableRowSelection : true,
enableSelectAll : true,
enableRowHeaderSelection: true,
selectionRowHeaderWidth : 35,
rowHeight : 35,
showGridFooter : true,
The row template is used to get the selected row on an ui-grid
rowTemplate : rowTemplate(),
columnDefs : [
{
field : 'id',
name : 'id',
width: 200,
},
{
field : 'name',
name : 'name',
width : 120,
sort : {
priority : 0,
},
cellTemplate:'<div >' + ''+ '' + '</div>',
}
} ],
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
}
};
It gets a row, when we select a record
function rowTemplate() {
return '<div ng-click="grid.appScope.rowDblClick(row);">' + ' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ui-grid-cell></div>' + '</div>';
}
when you click a row, you get a row using this method
$scope.rowDblClick = function(row) {
console.log('The selected object id is : ', row.entity.id);
console.log('The selected object nameis : ', row.entity.name);
};

Sending additional parameters to editurl on JQgrid

My problem now is trying to send the ID (editable: false) of a row when editing that row.
For example, i have a grid with columns userid(editable: false), username(editable: true), firstname(editable: true), lastname(editable: true). When editing the row the grid is only sending the parameters username, firstname and lastname. In the server side i need the userid to know to which user i've tu apply those new values.
the editUrl looks like:
editurl : CONTEXT_PATH+'/ajax/admin/savePart.do?category=1',
Thanks
This is the full code:
$.jgrid.useJSON = true;
//http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3Acommon_rules
$(document).ready(function() {
//alert(CONTEXT_PATH);
var lastsel;
jQuery("#rowed3").jqGrid(
{
url : CONTEXT_PATH+'/ajax/getPartesByCategory.do?catid=<s:property value="categoryId" />',
//url : '/autoWEB/text.html',
datatype: "json",
ajaxGridOptions: { contentType: "application/json" },
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
headertitles: true,
colNames : [ 'ID', 'Pieza', 'Disponible'],
colModel : [ {
name : 'piezaId',
index : 'piezaId',
align : "right",
width : 50,
editable : false,
required : true
}, {
name : 'descripcion',
index : 'descripcion',
width : 390,
editable : true,
required : true
}, {
name : 'disponible',
index : 'disponible',
width : 80,
editable : true,
edittype : 'select',
editoptions:{value:"0:No;1:Si"},
required : true
} ],
rowNum : 20,
rowList : [ 20, 40, 60, 80 ],
pager : '#prowed3',
sortname : 'piezaId',
postData: {piezaId : lastsel},
mtype:"POST",
viewrecords : true,
sortorder : "desc",
onSelectRow : function(id) {
if (id && id !== lastsel) {
jQuery('#rowed3').jqGrid('restoreRow', lastsel);
jQuery('#rowed3').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl : CONTEXT_PATH+'/ajax/admin/savePieza.do?categoria=<s:property value="categoryId" />',
caption : "Piezas"
});
jQuery("#rowed3").jqGrid('navGrid', "#prowed3", {
edit : false,
add : false,
del : false
});
})

in your onSelectRow callback, you can modify the editUrl to be whatever you want, including passing in the ID you need.
$("#rowed3").jqGrid('setGridParam', {editurl:'whatever/url/you/need/with/the/id'});
jqGrid will add all the other nececessary params to that editurl for you.

You can use
hidden: true, editable: true, editrules: { edithidden: false }, hidedlg: true
in the definition of the piezaId (ID) column. The parameter hidedlg is currently not real needed, but can be useful if you decide the use other jqGrid features.

Passing values in the GET string worked for me.
editurl: '/ajax/update?line=1',