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...
// ....
})
Related
I am trying to build an admin dashboard using material design framework. As a part of it, I am trying to add modal-trigger element inside a <td></td> tag of a table that uses datatable.js library. But when I click on the trigger no modal is appearing. Did anyone face similar issue before?
I think that what's happening is that your trigger isn't in the DOM when you draw the table, but without seeing your code I can't be sure. Generally, it will trigger a modal when it is clicked or something? You might want to change the actual triggering to clicking on a td with a given class contained within the table so something like this:
$(".modal-trigger").click(function(){//Open Modal});
This would work on the first page but not after the first draw of the table as the event had been registered before the elements were within the DOM. Rather, you'd need to listen to the click within the table like this:
$("#table-id").on("click", ".modal-trigger", function(){//Open Modal});
I hope that makes sense and that it helps, if not perhaps work up a JSFiddle illustrating your issue?
video-js has the default toggle-pause-play button, which works fine. for a specific use, i want to a button next to it that pauses, rewinds, show the poster image and the big play button. in other words, a stop button :-)
it should be a simple plugin, but i cant find the right examples .. it would probably start with
videojs.plugin('stopbutton', function(options) {
var StopButton = videojs.Button.extend({ ....
Can anyone point me to the simplest example of adding a button ?
Have a look here for a partial answer to your question.
If you decide to build your own "stop" button on top of the videojs interface then the sequence would be something like (API ref here):
myPlayer.pause();
myPlayer.currentTime(0);
myPlayer.posterImage.show(); // as per OP plans
myPlayer.bigPlayButton.show(); // as per OP plans
I have two TextEdit boxes and one custom button widget, I wish to change focus in the following order using the tab key on my keyboard:
TextEdit1 <-> TextEdit2 <-> Button
I have specified something similar to the following for each widget in order to obtain the chain above:
KeyNavigation.tab: TextEdit2
KeyNavigation.backtab: TextEdit1
My problem is however that the tab keystroke is caught in the TextEdit, and cannot be used to navigate. How can I disable tabs in the TextEdit and instead use it for changing focus?
I found the problem.
By default the key events are first sent to the item which is receiving the event - not to KeyNavigation. This behavior can be changed by setting
KeyNavigation.priority: KeyNavigation.BeforeItem
The complete code thus becomes
KeyNavigation.tab: TextEdit2
KeyNavigation.backtab: TextEdit1
KeyNavigation.priority: KeyNavigation.BeforeItem
Read about the Qml Keys element.
You can do something like this :
TextEdit
{
width : 40
height: 40
text : "junk"
Keys.onTabPressed:
{
// Write logic to transfer focus to whomsoever you want
}
}
While searching for a solution to a similar problem, I came across this option in Qt Creator and seems to solve the thing. Now I can move out of the QTextEdit object with tab key, instead of inserting a tab character into the field.
I see that the topic is old and already solved but maybe this convenient simple option was made available with a more recent update to Qt, I don't know. I just came across it and I hope it helps someone searching for the same solution as me.
Question:
Given a DOJO TreeGrid, how can I capture the event when a user clicks the expando ("+") button to expand a row, and store the specific row number or associated item's identifier? I'd like to do this for the express purpose of completely deleting the TreeGrid from the DOM, rebuilding it, and restoring it's state once rebuilt (i.e. programmatically expanding the rows that the user has previously expanded).
Background:
So I've got a custom DOJO TreeGrid, hooked up to a custom QueryReadStore, in my app. It was constructed using the following tutorial:
http://www.ibm.com/developerworks/web/library/wa-dojotreegrid/index.html?ca=drs-
Pretty interesting tutorial, but it might be irrelevant to my question because it doesn't really squash any functionality, it only seems to augment it.
Anyway, googling around for a moment, I found a nice function in the DOJO forums that I can use to programmatically expand a row, given the specific row index. Works perfectly.
The problem is that I haven't been able to find a good way to capture the expando click event, and relate it to a specific "parent item row" index in the grid.
Details aside, I'd like to get the row index of every row that the user has expanded, into an array (and delete the index of a row that the user collapses, obviously), so I can destroy this TreeGrid, and faithfully rebuild it, with the user's selections expanded properly.
I'm not really a novice to DOJO, but I'm certainly no expert by any means. I've done a fair bit of googling, and FireBugging, and haven't really been able to find anything that I can use to do this.
Suggestions? Anybody done something similar before? Stupid question with obvious answer that I've missed? I'm totally misguided and am going about it all wrong? Thanks everybody!
Something similar to this would probably work, this is how the dijit.Tree implementation wouldve looked;
var expandedNodes = {}
dijit.tree._onExpandoClick = function (args /* object wrap for args.node */) {
var treeNode = args.node,
path = treeNode.getTreePath(),
id = treeNode.getIdentity();
expandedNodes[id] = path;
}
I am not 100% sure im being strictly correct but for the TreeGrid you will have to look through code of dojox/grid/_TreeView.js (link). The _setOpen would be an entrypoint from which you can 'hook' the onclick action. from there, find the expandoCell.openStates hash, this is a true/false variable set, indexed by itemId. This hash is most likely what you need as your state
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();
}
});