Develop Reference

jQgrid colum filtering is not working in single column

jQgrid table is workin fine. In the last line I've enabled column filtering. Search/Filtering in other column is working fine. But not working on the the Status column that has been generated from formatter
$('#jqGrid').jqGrid({
datatype: "local",
data : res.data,
colModel: [
{
label : 'Batch No.', name:'batch_no', firstsortorder:'asc'
},
{
label : 'Batch Wt.', name:'expected_batch_wt', formatter:'number', align:'right'
}
,
// ...
// ...
{
label : 'Status'
,formatter:function (cellvalue, options, rowObject){
if(condition)
status = 'MSG 1';
else if(condition)
status = 'MSG 2';
else
status = 'DEF MSG';
return status;
}
,align : 'center'
// ,sortable : false
}
],
rowNum : 1000,
rownumbers : true,
pager : '#jqGridPager',
caption : `CURRENT STOCK REPORT`,
height : '500px',
width : '1500',
footerrow : true,
userDataOnFooter : true,
gridComplete : function(){
var $grid = $('#jqGrid'),
sum_batch_count = $grid.jqGrid('getCol', 'batch_no', false, 'count'),
sum_batch_wt = $grid.jqGrid('getCol', 'expected_batch_wt', false, 'sum');
$grid.jqGrid('footerData', 'set', {
'batch_no' : sum_batch_count,
'expected_batch_wt' : sum_batch_wt
});
}
});
jQuery("#jqGrid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });

In your case datatype is local and the formatter shows certain value depending on condition. This value is not connected with your actual local data. When a datatype is local the search is performed within local data array - in your case this is: res.data. Since this data does not contain your new constructed values, the search return nothing.
To solve the problem one possible solution is to use unformatter function.
Depending on the jqGrid version used (Guriddo jqGrid, free-jqGrtid, jqGrid <= 4.7) you have diffrent options, but is needed to know the version. I recommend you too to search this site for solving the problem you have.

Add different controls in different rows in UI5 table

I have table sap.ui.table.Table ans I have a model in which some records have links and some doesn't. I want to render the link in the sap.m.Link component in the column and when the link is not available in the record, it should render "Link is not provided." in the sap.m.Text in the column.
As the sap.ui.table.Column has the template aggregation which does not support binding aggregation as it is only 0 or 1 controls supported. And the formatter is also applicable here. Is there any way that the content of the column can be changed runtime according to the module data?
My module data is :
var data = [{
id : 1,
link : 'abc.com'
},
{
id : 2
},
{
id : 3,
link : 'pqr.com'
}]
I am providing the code:
var link = new sap.m.Link({text : "{link}"});
var noLink = new sap.m.Text({text : "Link is not provided."});
var idColumn = new sap.ui.table.Column({
label : [new sap.m.Label({text : "ID"})],
template : [new sap.m.Text({text : "{id}"})]
});
var linkColumn = new sap.ui.table.Column({
label : [new sap.m.Label({text : "Link"})],
template : [??????]
});
var table = new sap.ui.table.Table({
columns : [idColumn, linkColumn]
});
var model = new sap.ui.model.json.JSONModel();
model.setData({items : data});
table.setModel(model);
table.bindRows("/items");
I want to add the link and noLink in the column likColumn runtime according to the data in the module. How can I achieve this?

The display content of each column can be changed using formatter
e.g:
new sap.m.Link({
width: "20em",
//editable: false,
//text: "{items>link}"
text: {
path: "items>link",
formatter: function(link){
if (link === undefined) return "Link is not provided"
return link;
}
}
});
...
oTable.addEventDelegate({
onAfterRendering: function(){
$('#idTable a:contains("Link is not provided")').removeClass("sapMLnk");
}
}, oTable);
UPDATE: This is a jsbin with the full example of what you need:
UPDATED example

How can I update a complex knockout observable programatically?

I'm using durandal/requirejs/knockout here.
I'm also using the coderenaissance plugin for mapping (ko.viewmodel.updateFromModel(zitem, data).)
I'm getting the following data from my ajax call which I'm mapping into my zitem observable.
{
"itemNumber" : "ABATAH000",
"effectiveDate" : "2015-11-03T15:30:05.7118023-05:00",
"expiryDate" : "2015-05-03T15:30:05.7118023-04:00",
"minimumPremium" : 25,
"zSubItems" : [{
"zSubItemName" : "Mine",
"unitDistance" : 100000,
"zSubSubItems" : [{
"zSubSubItemName" : "CoverageA",
"zSubSubItemPremium" : 100.0,
"id" : 0
}
],
"id" : 1
}
],
"id" : 0
}
And here is the viewmodel I'm using:
define(['plugins/http', 'durandal/app', 'knockout', 'services/datacontext'],
function (http, app, ko, datacontext) {
var zitem = ko.observable();
var activate = function () {
//This is just a wrapper around an ajax call.
return datacontext.getPolicy("value")
.then(function(data) {
ko.viewmodel.updateFromModel(zitem, data);
});
};
var updateMinimumPremium = function (thisItem) {
//This doesn't work
zitem.minimumPremium(thisItem.minimumPremium + 1);
};
return {
displayName: 'zitem example',
zitem: zitem,
updateMinimumPremium: updateMinimumPremium,
activate: activate
};
});
I'm binding the updateMinimumPremium to a click on a button at the same level as the minimumPremium element.
<button data-bind="click: $parent.updateMinimumPremium">Add 1</button>
How can I update [minimumPremium] or [zSubSubItemPremium] programatically?

"minimumPremium" would be observable
zitem.minimumPremium(thisItem.minimumPremium() + 1);

Your zitem is observable as well, so try this:
zitem().minimumPremium(thisItem.minimumPremium + 1);
In real application don't forget to check the value of zitem() call - it can be uninitialized.

How to include HTML code within prime ui or jquery datatable "columns" option's headerText?

I am trying to apply internationalization to my web app that uses JSP pages.I found this link How to internationalize a Java web application? and it really helped me.
However I am now trying to use the given tag fmt:message tag within my primeui datatable's headerText so that I can see column name of my datatable in spanish language.But it's being displayed as text on the screen.Whereas I want it to function as it does on my JSP page i.e to pick user.data.userName="spanish translation for username" from my properties file text_es.properties.
Below is the code for my datatable which is included in script tag on my JSP:
$(function() {
$('#tbllocal').puidatatable({
caption : 'Inbox Tasks',
paginator : {
rows : 5
},
columns : [
{
field : 'userName',
**headerText : '<fmt:message key='user.data.userName'/>',**
sortable : true
},{
field : 'userEmailId',
headerText : 'userEmailId',
sortable : true
} ],
datasource : function(callback) {
$.ajax({
type : "GET",
url : 'crud',
dataType : "json",
context : this,
success : function(response) {
callback.call(this, response);
}
});
},
selectionMode : 'single',
rowSelect : function(event, data) {
$('#messages').puigrowl('show', [ {
severity : 'info',
summary : 'Row Selected',
detail : (data.firstName + ': ' + data.lastName)
} ]);
},
rowUnselect : function(event, data) {
$('#messages').puigrowl('show', [ {
severity : 'info',
summary : 'Row Unselected',
detail : (data.firstName + ': ' + data.lastName)
} ]);
},
jsonReader : {
response : "response"
}
});
});

Still there is no support for including html in datatable header till primeui 2.0 i have also posted this question on frimeui forum please refer following link for further details
http://forum.primefaces.org/viewtopic.php?f=16&t=42417

itemfilereadstore reading from json file

i'm starting out with Dojo and trying to get a thumbnail gallery to display from a json file with no luck so far. I've searched and viewed other examples but none have helped me. Please help me to see what i'm doing wrong.
It's working when specifying the data in the script however(as shown by the commented out code) I can't get it to read data from an external file.
My code so far:
<script>
require(["dojo/ready",
"dijit/registry",
"dojo/dom",
"dojo/on",
"dojo/parser",
"dojo/data/ItemFileReadStore",
"dojox/image/Gallery"
], function (ready, registry, dom, on, parser, ifrs, Gallery) {
ready(function () {
// Define the attribute names used to access the items in the data store
parser.parse();
var itemNameMap = {
imageThumbAttr: "thumb",
imageLargeAttr: "large"
};
// Define the request, with no query, and a count of 20, so 20 items will be
// requested with each request
var request = {
query: {},
count: 20
};
// var store = new ifrs(imgs);
/* imageItemStore.data = {
identifier: 'title',
label: 'Images',
items: [
{
thumb: "http://www.flickr.com/photos/44153025#N00/748348847",
large: "http://www.flickr.com/photos/44153025#N00/748348847",
title: "Photo"
}
]
};*/
imageItemStore = new dojo.data.ItemFileReadStore({ url: "/images.json" });
registry.byId('gallery1').setDataStore(imageItemStore, request, itemNameMap);
});
});
</script>
My json file:
{ items: [
{
"thumb":"images/extraWide.jpg",
"large":"images/extraWide.jpg",
"title":"I'm wide, me",
"link":"http://www.flickr.com/photos/44153025#N00/748348847"
},
{
"thumb":"images/imageHoriz.jpg",
"large":"images/imageHoriz.jpg",
"title":"I'm a horizontal picture",
"link":"http://www.flickr.com/photos/44153025#N00/735656038"
},
{
"thumb":"images/imageHoriz2.jpg",
"large":"images/imageHoriz2.jpg",
"title":"I'm another horizontal picture",
"link":"http://www.flickr.com/photos/44153025#N00/714540483"
},
{
"thumb":"images/imageVert.jpg",
"large":"images/imageVert.jpg",
"title":"I'm a vertical picture",
"link":"http://www.flickr.com/photos/44153025#N00/715392758"
},
{
"large":"images/square.jpg",
"thumb":"images/square.jpg",
"link" :"images/square.jpg",
"title":"1:1 aspect ratio"
}
]}
My markup:
<div class="claro" style="height:400px">
<div data-dojo-type="dojox.image.Gallery" id="gallery1" style="height:400px"></div>
<div data-dojo-id="imageItemStore" data-dojo-type="dojo.data.ItemFileReadStore"></div>
</div>
Any help would be greatly appreciated

Have you looked a the JsonRest store instead of an ItemFileReadStore? http://dojotoolkit.org/reference-guide/1.9/dojo/store/JsonRest.html