I have created a custom header component ( a child component within the component containing ag-grid). The header component will add some buttons along with the header name. While clicking on the buttons, the column field has to change accordingly. The code to change column definition is in parent component. I could achieve this functionality with normal buttons within the parent component. But while using header component, I don't know how to pass which button has been clicked from child (header) to parent (ag-grid). If I use event bus, (Subject and Observer) I couldn't specify the header component in grid options (shows type error). Event emitter is not working.
Related
I have a cell key down event handler, and would like to implement some logic that causes the details grid to collapse when the user presses key up or left when at the edges of the grid.
I access the "master" row via the parent property and then call setExpanded(false) like this:
event.node.parent?.setExpanded(false);
However, there is no effect and the details grid remains open. I'm not aware of another way to gain access to the "api" object for the master grid. Any suggestions?
Thanks!
I'm writing a custom input element called fancy-input, which can participate in a form via the FormInternals API. In particular, the ElementInternals.labels property gives me a list of the label elements associated, via their for attributes, to an instance of fancy-input.
But now let's say I also want to write a custom label element called fancy-label. It renders a native label element in its shadow DOM with fancy styles, formatting, etc. How do make it known that an instance of fancy-label is the "label" associated with an instance of fancy-input. In particular, I'd like my fancy-label node appear in the NodeList returned by calling ElementInternals.labels on the associated fancy-input element.
One possible approach would be for fancy-label to render a native label into a slot, keeping it in the light DOM and, hence, visible to the form and the fancy-input element. But is there a solution with the native label in the shadow DOM of fancy-label?
I want to add a combobox in my grid, which would populate its store(of grid) as user provide the word.
If i am adding a custom abstract cell in to grid, I can able to add combobox as edittor to it. But when i am trying to use combobox cell (need to display text in a input tag/ Editable), Combobox is not adding to Grid.
Mean to say when I click on that column, it's not converting to combobox.
Tried with adding keyuphandler to addHandler method. But It's not coming to that handler.
Hey im using the d3 plugin to work with the Collapse Tree. This is my example: http://bl.ocks.org/mbostock/4339083
Now i created 2 Widgets which are in 2 different classes. One for the tree and one for a control element. Now i want to change the properties of clicked nodes with my control element widget. So I need to get the Data(Object) from the clicked node in my other class. After I need to manipulate that data using my control widget.
"Dojo on" / "Dojo connect" are just for DOM interactions right?.
I want to communicate between the javascript classes.
Here is my onclick function for clicking the nodes:
.on("click", function (d) {
toggle(d);
update(d)
})
You can create a custom event in the tree class and handle it from the other class. First, define an event handler for the onClick event on the tree node.
onClick: function(evt) {
// here comes your code
// when you're finished, fire a custom event
this.onNodeClicked(params);
},
onNodeClicked: function(params) {}
In the other class, listen for the custom event. Here I assume you create the tree widget from there. Otherwise, you can pass a reference to your tree object.
var tree = new MyTree();
dojo.on(tree, "onNodeClicked", this._handleOnNodeClicked);
Hope this helps.
We're using GWT and We're required to create two drag and drop tree grids. Each tree contains parents and children (max two level for now).
Here's what we need to be able to do:
Use cases
Drag a parent from one tree grid to the other.
Drag a parent 1 to parent 2 (1 will become child of 2, and all 1's children will become children of 2) -> please don't ask :D
Drag a child from one parent to another (within the same tree grid)
Drag a child to top level within the same tree grid (child will become a parent)
Drag a child to the other tree grid with two options
1 - Top level - child from tree 1 will become a parent on tree 2.
2 - Parent - Child from tree 1 will become child of a parent on the tree grid 2.
If this doesn't make much sense, we don't have the full context yet, so that's all we know.
Problem
We can drag on the same tree grid. If the row we want to drag the cell to is hidden, we set the scroll to true, so that the grid scrolls when the user is dragging inside it. Something like so:
private void setDraggableOptions(DragAndDropColumn<?, ?> column) {
// retrieve draggableOptions on the column
DraggableOptions draggableOptions = column.getDraggableOptions();
draggableOptions.setScroll(true);
// use template to construct the helper. The content of the div will be set
// after
draggableOptions.setHelper(HelperType.CLONE);
// opacity of the helper
draggableOptions.setOpacity((float) 0.8);
// cursor to use during the drag operation
draggableOptions.setCursor(Cursor.MOVE);
// set the revert option
draggableOptions.setRevert(RevertOption.ON_INVALID_DROP);
// prevents dragging when user click on the category drop-down list
draggableOptions.setCancel("select");
column.setDraggableOptions(draggableOptions);
}
Now the problem is, setting the tree grid to scroll, the user will never be able to drag the object to the second tree as the scroll will try to keep the object always inside the grid.
We're using the gwtquery-plugins
Is there any idea to work around this? Thank you very much in advance.
See my response to your question here