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");
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>
Thank you for your reply.
The ul target tag does not seem to be closed:
<ul class="templateListView" > data-role="iglistview" </ul>
<ul class="templateListView" >
Please let me know if this helps.
Sorry for the typo, I am still in same place where I started, I was successfully able to embed igGrid in our HTML5 App, but mobile List is not going anywhere, not able to get template working, all your samples has igList inside html, not using javascript file, is there anyway you can have sample that uses json data? here is my sample html again..
scriptPath: "../tabletBrowse/net2012.1.mobile/js/",
cssPath: "../tabletBrowse/net2012.1.mobile/css",
itemTemplate: "<div>${f0} ${f1}</div>"
HTML
<ul id="templateListView1" class="templateListView"
data-data-source="brData"
data-item-theme="c"
data-sub-page-header-theme="b"
>
Hi,
If you want to instantiate in html, that is fine, but get rid of the data-role attribute on the html element so it's only instantiated once. You might get the first instantiation without the item template.
regards,David Young
Thanks for quick answer, but I didn't follow your answer, so you are suggesting to remove data-role from html and leave <ul> tag correct? If I do that it shows error " Uncaught Error: There was an error parsing the JSON string: Unexpected token b"
HTML CODE:
<ul id="templateListView1" class="templateListView">
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.