If you are using Internet Explorer, please remove blackberry.com from your compatibility view settings.

Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Contributor
bbbatman
Posts: 10
Registered: ‎01-16-2013
My Device: BB 10 Dev Alpha
My Carrier: Airtel

Appending child nodes to GridList via js.

Hi, 

 

I am new to HTML5 and Blackberry Webworks so this might seem trivial. But after trying various permutations for almost a whole day, I am not able to see why this is not working. 

 

I am trying to create a gridlist and append rows and items into it via a javascript file. 

But somehow it doesn't render correctly. 

 

First let me show the hard-coded HTML that works. 

 

<div id="demoDynContent" data-bb-type="group" data-bb-back-caption="Dyn2">
<div data-bb-type="row">
<div data-bb-type="item" data-bb-img="images/grid/square/1.png" data-bb-title="Programatically">DEMO</div>
<div data-bb-type="item" data-bb-img="images/grid/square/1.png" data-bb-title="Programatically">DEMO2</div>
</div>
</div>

 

This works fine and I am able to see a row with 2 items in it. I am also able to create multiple rows by adding code similar to the above code for each new row. 

 

 

Now I am trying to create the same thing via java script. 

 

Here is the HTML

 

		<div id="gridDynContent" data-bb-type="group" data-bb-back-caption="Dyn"></div>

 and here is the java script which creates 3 rows with each row containing 3 items.

 

 pub.populateGrid = function () {
		var i;
		var j;
		var listDivElement = document.getElementById('gridDynContent');
		var items = [];
		var item;
		debugger;
		for (i = 0 ; i < 3; i++){
			item = pub.createRow();
			items.push(item);
			listDivElement.appendChild(item);
		}
};

pub.createRow = function() {
		var row = document.createElement('div');
		row.setAttribute('data-bb-type', 'row');
		var items = [];
		var item;

		for (var i = 0; i < 3; i++) { 
			item = document.createElement('div'); 
			item.setAttribute('data-bb-type','item');
			item.setAttribute('data-bb-title','my title'); 
			item.innerHTML = 'my description'; 
			item.setAttribute('background-image','images/grid/square/1.png');
			row.appendChild(item); 
		} 
	return row; 
};

Now, while debugging  I can see that both these methods are getting called and at the end of pub.populateGrid()

 I can also see that the listDivElement has the required html for creating 3 rows having 3 items each. However All I am able to see is 9 instances of the string that I have added as item.innerHTML while creating the items with no Grid Layout. But when I hard-code this exact same grid code directly into HTML, it all works and a grid is seen.

 

Another thing that I saw and thought was strange is that while the innerHTML is exactly what I want, the innerText had exactly the same thing that was getting displayed. 9 instances of the string that I was adding as the inner html in the second function. Not sure if this is relevant here, but just in case. 

 

Could someone please point out where I am going wrong. 

 

/Prashanth

Please use plain text.
Developer
nunodonato
Posts: 313
Registered: ‎03-28-2012
My Device: Curve 9360, Playbook, BB10 Dev Alpha
My Carrier: TMN

Re: Appending child nodes to GridList via js.

Hi there!

 

The code for a gridList is much more than that, however bbUI takes care of converting simple html to complex html+js. To do that, it needes to apply (style) your html. That is done when the screen is loaded, and not after.

Your javascript should run on the "onscreenready" event of bbui, if its run after that, no style is applied, unless you call a refresh() function for the item. 

The gridlist, unfortunately, still lacks the refresh function.

Nuno
theBBthing.wordpress.com - my BlackBerry development blog: news, tips and tutorials
bitoutsidethebox.com - re-imagining digital solutions


Please use plain text.
Contributor
bbbatman
Posts: 10
Registered: ‎01-16-2013
My Device: BB 10 Dev Alpha
My Carrier: Airtel

Re: Appending child nodes to GridList via js.

Hi Nuno,

 

I was looking for a refresh function or something similar for the gridlist but wasnt able to find it yet. Thanks for confirming that it does not exist. I saw that refresh exists and works for the imagelists. But here it throws an exception.

 

Do you happen to know the location of some documentation that tells what functions are available for which components. Such a document would be a HUGE help.

 

Thanks Again

Prashanth

Please use plain text.
Developer
nunodonato
Posts: 313
Registered: ‎03-28-2012
My Device: Curve 9360, Playbook, BB10 Dev Alpha
My Carrier: TMN

Re: Appending child nodes to GridList via js.

Yes, the official github repository has all the documentation for bbUI with all the available interfaces in the different platforms (BB10, PlayBook, BBos): https://github.com/blackberry/bbUI.js

 

Its updated very frequentely, so keep an eye on it, the refresh will likely come soon :smileyhappy:

Nuno
theBBthing.wordpress.com - my BlackBerry development blog: news, tips and tutorials
bitoutsidethebox.com - re-imagining digital solutions


Please use plain text.