How to get class name of a div if we know the id of that div.
I want to toggle the class name of that div.
if i know the current class i can easily change that to second one.
I need the solution in dojo framework.
Thanks in advance,
You should be using .hasClass() to determine if it has the one you are looking for, and .addClass() if it does not:
var div = dojo.byId('divid');
if (div.hasClass('classToRemove')) {
div.removeClass('classToRemove');
div.addClass('classToAdd');
}
else {
// Switch them
div.removeClass('classToAdd');
div.addClass('classToRemove');
}
There is also .toggleClass() if you just need to switch a single class on and off, but I don't believe it supports toggling between two classes.
Related
I have registered an action in the EditorPopupMenu (this is right click menu). I also have a bunch of components inside a ToolWindow (that I designed using the GUI Designer plugin) that I want to update the values of.
There have been some posts on the IntelliJ forums about this, and the typical answer seems to advice using the ToolWindow's ContentManager, and obtain the JPanel containing all your components. E.g. the following:
Project p = e.getProject();
ToolWindow toolWindow;
toolWindow = ToolWindowManager.getInstance(p).getToolWindow("My ToolWindow ID");
ContentManager contentManager = toolWindow.getContentManager();
JPanel jp = (JPanel) contentManager.getContent(0).getComponent();
This feels counterintuitive... Having to navigate inside JPanel's to find a bunch of components. What if I decided to put my components inside a different container? Suddenly the way I navigate to my components would break down.
Is it really the most practical way to constrain myself to the way my GUI is built? Can't I access these components in a different way?
I found a way to access my custom myToolWindow. This should help quite some people.
Make sure that your custom MyToolWindow extends the class SimpleToolWindowPanel.
In your custom myToolWindowFactory class, pass your custom MyToolWindow to ContentFactory.createContent() as the first argument. NOT one of the JPanel's inside MyToolWindow as is done in the ToolWindow examples given in the official IntelliJ documentation...
In your MyToolWindow constructor, call the method setContent(<YourJPanelContainingYourComponents>).
I found the answer by experimenting on example 5 from this link:
public JBTabbedTerminalWidget getTerminalWidget(ToolWindow window) {
window.show(null);
if (myTerminalWidget == null) {
JComponent parentPanel = window.getContentManager().getContents()[0].getComponent();
if (parentPanel instanceof SimpleToolWindowPanel) {
SimpleToolWindowPanel panel = (SimpleToolWindowPanel) parentPanel;
JPanel jPanel = (JPanel) panel.getComponents()[0];
myTerminalWidget = (JBTabbedTerminalWidget) jPanel.getComponents()[0];
} else {
NotificationUtils.infoNotification("Wait for Freeline to initialize");
}
}
return myTerminalWidget;
}
I am trying to add class on the tap of the node in cytoscape.js. Here is the link for the complete code:
https://stackblitz.com/edit/angular-kpnys1?file=src%2Fapp%2Fapp.component.ts
ngViewAfterInit function
cy.on("tap", "node", function(evt) {
var node = evt.target;
console.log("tapped " + node.id());
cy.nodes(node).classes("foo");
});
Tap works fine but it does not add any class to the node. Is that possible?
You'll have to use the correct method for that. Currently, your code calls node.classes(), which deletes all previous classes of the node (you basically overwrite the classes array of a node).
What you want to do: Use node.addClass("foo") and add an entry in your stylesheet:
{
selector: ".foo",
css: {
"background-color": "green"
}
}
The dot indicates a class, but you can specify even further. If you want to add the foo class only to parent nodes, change .foo to :parent.foo.
But aside that, your code acutally worked (kind of), the class was present when clicking on a node. Here is the edited version of your stackblitz, I added the mentioned changes and gave one parent element the class "bar". If you click on a parent, the node will change the background-color to green and log its current classes to the console:
stackblitz
I've been looking into dgrid and I'm trying to figure out if there's a way to attach an event to a grid that uses dojo/on without explicitly calling grid.on but, instead, passes it as a method (or set of methods) in the initial configuration of the grid. The reason for this is because the grid instance itself out of scope upon creation and I can't find any documentation on it.
So, instead of
var grid = new (declare[Grid])({}, element);
grid.on('.dgrid-row:click', function(){console.log('Hello World!')});
having something like
var grid = new (declare[Grid])({
'events' : {
'.dgrid-row:click' : function(){console.log('Hello World!')}
}
}, element);
Ideas? Alternatives?
You can use the the DijitRegistry extension, which will allow you to get a reference to your grid like you would with a normal dijit widget, through registry.byId... then you can use grid.on, as usual.
Example : https://github.com/SitePen/dgrid/wiki/DijitRegistry
I need to develop a control which is similar to the Nested Grid in the Smart GWT.
User will be having a column for expansion images, when user clicking on the image in a particular row, a sub grid has to be opened there itself. Here all remaining rows needs to move down.
How can i achieve that functionality? Can anybody give me some clues so that i can proceed.
I have already a grid which is a celltable with custom header(with search functionality implemented).
Thanks,
Saritha.
Create your nested widget (myNestedWidget) that you want to show. It should have a CSS style "position: absolute", unless your grid is added to the LayoutPanel (or similar), in which case you can position your widget directly. Let's call the parent widget of your grid gridParentWidget.
In your CellTable add the following handler:
myTable.addCellPreviewHandler(new Handler<myObject>() {
#Override
public void onCellPreview(CellPreviewEvent<myObject> event) {
if ("click".equals(event.getNativeEvent().getType())) {
if (event.getColumn() == 0) {
int top = myTable.getRowElement(event.getIndex()).getAbsoluteBottom();
int left = myTable.getRowElement(event.getIndex()).getAbsoluteLeft();
myNestedWidget.getElement().getStyle().setTop(top, Unit.PX);
myNestedWidget.getElement().getStyle().setLeft(left, Unit.PX);
gridParentWidget.add(myNestedWidget);
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
#Override
public void execute() {
int height = myNestedWidget.getOffsetHeight();
myTable.getRowElement(event.getIndex()).getStyle().setHeight(height + "px");
]
});
}
}
});
}
This is obviously an outline of the solution. The details of the implementation may vary slightly depending on which widgets you use for your parent widget and your nested widget. If you change z-indexes somewhere, you have to take it into account too. You also need to make sure that your nested widget fits into the width of your grid, or you'll need to wrap it in a ScrollPanel and set a width to it explicitly.
I have a TabContainer with different tabs (ContentPanes). I am loading each type dynamically when the user selects something from a tree. I would like to be able to run a certain JS function on the newly loaded ContentPane/Tab. So something in this form:
dojo.forEach(
dojo.query("select"),
function(selectTag) {
selectTag.disabled = true;
}
);
However, I only want to process this on the newly loaded ContentPane/Tab... so let's say given a ContentPane/Tab Dojo Object, how do I do a forEach/query on its content only?
Thanks
You can give dojo.query a second argument telling it in which DOM node to start looking. So if you have a ContentPane with id "fooTab", you can do:
dojo.forEach(dojo.query("select", "fooTab"),
function(selectTag) {
....
}
);
Now, technically, "fooTab" is the "dijit ID", but the dijit's/ContentPane's outermost DOM node will also have an id "fooTab". Perhaps not the kosher way, but it works.