I have json data array (shown below) and would like to display in Mobile ist View Control, something like this:
data-item-template="<div> <span> array element 1</span> <span>array element 2 </span> </div>"
Note: I have simplified to understand problem, data displayed is very complex and around 50 array elements.
Json Data:
{
"browseData": [
[
"10S10010",
"10C1000",
"Z"
],
"SO011203",
"A"
]
}
Hi annasaheb,
Thank you for posting in the community.
I have researched this scenario and it seems that in this scenario the json properties should not contain arrays as it would not be possible to access their respective items (as templating counts on property access). More on accessing properties can be found at:
http://help.infragistics.com/NetAdvantage/jQuery/2012.1/CLR4.0?page=igListView_Adding_igListView_to_a_Web_Page.html
var source = [{parent : [ "1", "2"]}]
would become
var source = [ {"parent":"1"}, {"parent":"2"} ]
var source = [
{"parent":"1"},
{"parent":"2"}
Afterwards this would be displayable in your template using something like:
data-item-template="<div> <span> ${parent} </span> <span> </span> </div>"
Please feel free to contact me if you have any questions.
Thanks for the answer, I might have to add label to each array data. I can live with that. but now as I need to build generic data item template in Javascript, how can I do it? following code shows "There are no list items!", If I assign datasource & itemTemplate in html, it works fine.
HTML:
<ul id="templateListView"
data-role="iglistview"
</ul>
BLOCKED SCRIPT
$(window).load(function (){
//Initialize
$(".templateListView").igListView({
dataSource: "brData",
itemTemplate: "<div><h2>${f0}</h2><p>${f1}</p></div>"
});
$(".templateListView").igListView("dataBind");
Thank you for your reply.
I have just tested this scenario and the item templating seems to be working both in HTML and javascript.
For instance:
Can you confirm that in this scenario you are accessing the "templateListView" element by class (i.e with a dot) rather than by its ID.
I tried your suggestion, but still list doesn't display any data, may be I am doing something wrong.
here is code snippet:
Javascript
$.ig.loader({
scriptPath: "../tBrowse/net2012.1.mobile/js/",
cssPath: "../tBrowse/net2012.1.mobile/css",
resources: "igmList,igmRating"
$.ig.loader(function () {
var brData =
"f0": "10S10010",
"f1": "10C1000",
"f2": "",
"f3": 1,
"f4": "60007",
"f5": "EA",
"f6": 10,
"f7": 10,
"f8": "2011-10-14T07:00:00Z",
"f9": 0,
"f10": "",
"f11": "",
"f12": "",
"f13": "10C1000",
"f14": "10-100",
"f15": "",
"f16": "",
"f17": null
},
];
dataSourceType: "json",
itemTemplate: "<div><h2>${f0}</h2><p>${f1}</p></div>",
features: [
name: "Sorting"
HTML BODY:
<div data-role="page" id="listing" >
<ul class="templateListView"
</div>
So my e-mail bounced. I have attached the files along with a readMe on what to do. Let me know if you have any difficulty.
-Dave
This has been implemented as a feature in 12.2. It has not been tested yet, so it could be CTP or RTM depending upon time. If you are using the jquery widget (not the MVC wrapper), I could get you java script code that will do the formatting internally, assuming you set the format of course. If you'd like you can e-mail me at dyoung at infragistics.com.
Thanks Petar for doing research and creating product idea. It looks like type "date" always displays long date with time stamp, it occupies lots of space on screen, I don't think it's usable, we are planning to remove igList because of this limitation. looks like iglist is meant for string type data only.
Date displayed as "Sat Feb 05 2011 16:00:00 GMT-0800 (Pacific Standard Time)" which is not acceptable, do you know, if there is any other way to display short date like "Sat Feb 05 2011" (using itemTemplate & customBindings)?
Thanks
Hello annasaheb,
After further research this functionality has been determined to be a new product idea. I have sent this product idea directly to our Product Management team. Our product team chooses new product ideas for development based on popular feedback from our customer base. Infragistics continues to monitor application development for all of our products, so as trends appear in requested features, we can plan accordingly.
Your reference number for this product idea is: PI12060029.If you would like to follow up on your product idea at a later point, you may contact Developer Support management via email. Please include the reference number of your product idea in the subject and body of your email message. You can reach Developer Support management through the following email address: dsmanager@infragistics.com
Thank you for your request.
So far, it seems that currently the templating engine only calls to toString() on JS primitives (bool, date, etc) and due to performance reasons it seems that at the moment the engine does not support formatting. After doing more research on the matter I will provide you with more information.