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();
}
});
Related
I've started working with Dragula and I'm having elements be moved from one box to another. However, I want to be able to click a button and have the Dragula elements be placed back where they were before, basically resetting it. I've looked around for a solution but I can't seem to find any anywhere, so if anyone can help me with this I'd appreciate it.
You are going to want to pull out the HTML data from the two boxes compile the data and reset then second box.
// reset toppings using JQuery each() method
$("#box2").each(function () {
$("#box").append(this);
});
Hope this helps, just remember all you and doing is targeting the box2 and pulling out the information.
Here is another version that is not quite as clean but easier to follow:
var dragged = $("#box2").html();
var notDragged = $("#box1").html();
var original = dragged + notDragged ;
$("#box1").html(original);
$("#box2").html("");
a) I have a complex of nodes and edges. I want to add a title to the complex. Is there any way in Cytoscape.js, where I can display the title of the complex?
b) Additionally, I want to give user an option to download the complex in png file with a right click option, but my right click on the cytoscape div doesn't work. Is there any way or any flag I need to change to enable my right click on the picture?
Looks like no one is going to answer my question, answering them myself:
So, after struggling with these questions; I have got the solution for my first problem i.e. putting the title. We can have a parent node with the label as your complex title and then display it on the node. Don't think that it is a good way to do it. There should be something in cytoscape.js to display the title as well. But I don't think it is there yet.
In cytoscape there is an option to bind the event on right click, "cxttap" I used that to make a right click event. But I don't know how to give options on that click, working on that..!! If you are looking for same solution, stay tuned ;)
You can use right button with cytoscapejs by modifying the code below, adding your code
cy.on('cxttap', function(e){
console.log("right click!"); // just to check that it works, look at the console
// add here your code...
// ....
})
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.
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 have problem in DOJO with DataGrid. I refresh my grid on every 1 sec with this code
window.store_data_log= new dojo.data.ItemFileReadStore({data:{items:temp}});
var grid = dijit.byId("grid_log");
grid.setStore(window.store_data_log);
and it works fine ( put new data ). Problem is that when I have lot off rows and I scroll down, my grid refreshs and my scroll goes on top grid. How to solve this ?
Of course, you are totally clearing the store and resetting it every second from scratch. When you reset the store, you basically reset the grid. I would expect nothing less than the grid resetting the scroll position when you refresh its store.
You may want to learn how to properly use the store rather than just trying to reset it. I answered this here:
How to refresh datagrid
If you use dojo properly, you will get good results, but by just taking a shortcut and trying to refresh the store every second you are going to get an unusable grid.
You need to take a step back and solve your application architecture and not expect the grid refresh to be some kind of magic solution.
After going through (dojo) datagrid.js, I found how to resolve the issue:
//datastore you're using//
var store = new dojox.data.QueryReadStore({
//in the fetch()//
fetch: function (request){
//add the following://
request.isRender = false;
}
});
Important: Only set request.isRender to false when you don't want the grid to scroll back to the top. Just keep in mind that some situations (like sorting on a new column), it's probably best to set it to true. Just add some if/else statements to help with the logic.