I need to create a list of buttons inside a ContentPane (one under the other) as a "single column vertical grid". I did not found such a layout widget in dijit ref. guide.
What can I use? How can I get a new line when adding (addChild) elements to a content pane?
There's dojox grid container but looks overkill to me.
i know that this is the least elegant way to do it but it is one-of-a-kind: you could create a custom div-domNode containing your buttons just like this:
var btn1=new dijit.form.Button({...});
var btn2=new dijit.form.Button({...});
// custom div-domNode
var buttons = dojo.create('div');
// filling it with the domNodes of your buttons separated by a <br> node
dojo.create(btn1.domNode,null,listOfButtons);
dojo.create('br',null,listOfButtons);
dojo.create(btn2.domNode,null,listOfButtons);
and display it in you ContentPane
myContentPane.set('content', buttons);
A ul or a table would work as well.
Finally let me say that im very ashamed of myself for not knowing any better answer.
Hope its what you asked for.
Related
Is what I am trying to do in this gist possible?
https://gist.run/?id=bea803b05ad8d5b5e3e0afd59bb8dbb1
In app.html, I'm trying to use a repeat.for to create a custom element called button-row
In app.js, I'm creating two button row instances which I then place into a button row array so that I can use the repeat.for to iterate over it and create the button rows on the app.html view.
In button-row.html, I have a repeat.for to create the buttons using the btns array and setting the name of the button.
In button-row.js, I have two properties. label is the label for the button row and btns is the array of all the button names I want to create.
Sorry if this is a noob question, I have only been working with web development and aurelia for about a month.
Instantiating the ButtonRow objects yourself won't work. Aurelia instantiates the instances. you'll need to use the binding system to pass in the information to the custom element. I updated your gist here: https://gist.run/?id=6ec71143f566571960b7a182d4d98ed4
Also, you should refrain from abbreviating words like "Button" let your tooling save you the keystrokes, while making your code more readable :-)
I am new in Dojo and trying to find some features availability in Dojo. Please let me know if we can have multiple labels in Dojo tooltip widget.
I'm not sure exactly what you mean by multiple labels. The Tooltip label is used as an innerHTML, so it can contain HTML. I've used a inside of a label. Maybe you can use a list or other tags.
Also, you can change the Tooltip's label programmatically with:
myToolTip.set("label", "My New Label");
I have a StackContaner which contains multiple ContentPanes. When I try to add content to a nested ContentPane (after it has been created and rendered), it doesn't resize, it always keeps it's initially size. Is there an easy way to get around this? Here is how it is laid out:
StackContainer
-ContentPane
--ContentPane (nested)
-ContentPane
Here is working example example:
http://jsfiddle.net/zzdyM/1/
Click the add button in the sample, I want to make it so the divs automatically resize the height to show the new content, instead of keeping the same height with scrollbars. Clicking the button should add another span element to the innerPane, not replace what is currently there.
Any ideas what I'm doing wrong?
Are you trying to achieve a specific layout or just replace the existing content "Blah Blah Blah" with new content?
If you just wish to replace existing content with new content, the following is the best option:
dijit.byId('innerPane').attr('content','<span>Added Content</span>');
See updated fiddle: http://jsfiddle.net/YdZyZ/1/
I have a container element in which I create on the fly/place() a form, then another one..etc.
My goal is to switch between them i.e. hide all and show only the active form.
It hides alright, but I can't show the active back.
I tried using:
.style.display(none<->block) and visibility(visibility<->hidden)
dojo.style(...)
resize() and startup() after the changes
Several other variants i found on Internet from old dojo's
Nothing works.
/I need it to work with display, so that it does not occupy space./
Can you tell me what is the correct way to show and hide with dojo()
Also looked at this one :
How do I dynamically show and hide an entire TabContainer using DOJO?
Does not work.
The pseudo code I use is something like this :
....
//find or create the FORM element
form = dijit.byId(...);
if(typeof form != 'object') {
form = dojo.create('form', ....);
dojo.place(form,'containerx','last');
}
//hide all
dojo.query('#containerx > *').forEach(function(item){
dojo.style(item, 'visibility','hidden');// and all other variants i mentioned
})
//show only the current form
dojo.style(form, 'visibility','visible');
//if the dojo form obj was already created, then skip it
if (this.form_obj) return;
....build the form and the elements....
this.form_obj.startup()
thanx
I just answered the question in that thread you referenced in your question a few minutes ago. Basically it involved getting jQuery involved. Works great for me. I have all the tabs created statically (as opposed to programatically) and I'm able to manipulate whether they are shown or hidden with the help on jQuery. All the code any everything is in my post here:
How do I dynamically show and hide an entire TabContainer using DOJO?
Sounds like you might be looking for StackContainer functionality.
Just set things up so that the StackContainer has the dijit.form.Forms as children and you can use the selectChild method to choose what form to display.
I am using a Widget that contains a DataGrid object. The Widget works fine when included in the first tab (this is the visible tab), but not when I use the same code on a second tab.
The code is the same I have done several checks to make sure there are no other problems - and non Grid code is rendering fine - only the grid that has a problem. I have tried setting the height and width manually and this just results in a large grey rectangle on the second tab.
Do I need to tell the Grid to refresh in some way - or is it a property for the TabContainer?
Help - this is driving me mad!
Yeah, that's a big problem with the grid. If you use it declaritively in a tab container, it won't render properly on the non-visible tabs. It needs to calculate height/width (even though you specify them)...as you have seen.
The way I got around it was to create the grids programatically on tab select. I posted about my solution on the dojo forums. My code sample is over on github. It's a bit too large to post here methinks. Let me know if you want it, and i'll edit my answer.
There's also a discussion on nabble with a different solution.
"resize" works like a charm! Been looking for this for a long time (didn't know what I had to search for), thanks.
I use this routine to dynamically determine if the tab has more than one datagrid, as I may not know the ID of one single grid, maybe someone else might use that, too:
dojo.query('div#container div[id^="gridNode_"]').forEach(function(node, index, arr) {
dijit.byId(node.id).resize();
});
This will check the div with id="container" (skip that part if you want to search the whole DOM) for divs with an id starting with "gridNode_" and apply "resize" to those widgets.
An alternate approach is to resize the grid upon tab element selection. Sample code
dojo.connect(dijit.byId('my_tab_container'), "selectChild", function(child){
// if second tab (could be any...) selected
if(child.id == 'mySecondTabId'){
var myGrid = dijit.byId('myGridInsideTabId');
if(myGrid != null) myGrid.resize();
}
});