detect event on drag column from tool panel in ag-grid - ag-grid

I need event on dragging column from tool panel ,
is any way to detect drag and move column from tool panel ?
thanks

Regarding ag-grid documentation found here https://www.ag-grid.com/javascript-grid-events/
var gridOptions = {
...
onDragStarted: function() {alert('Start move...')},
onDragStopped: function() {alert('End move...')},
...
};
Please note that both actions will be launched also on drag n drop event from global Columns header - I do not know if this will be an issue for you.

Related

Change dragging state for all markers

I'm using Leaflet.markercluster 1.0.1
I'm trying to add button on my map, so users can enter in 'edit mode'. On click on that button it should toggle dragging state for all markers. I don't really know how to implement that correctly, but I wrote that code
var drag = false;
$('#button').on('click', function () {
drag = !drag;
markers.eachLayer(function (marker) {
marker.options.draggable = drag;
if (marker.dragging) {
drag ? marker.dragging.enable() : marker.dragging.disable();
}
});
});
It works for some time, but then I get Exception on .enable()
Uncaught TypeError: Cannot read property 'classList' of null
Is anyone know any correct way to do that?
Thanks in advance!
It seems that the logic for the forEach method in MarkerClusterGroup iterates through markers not visible on the map after dragging a spiderified marker. Then the logic for enabling dragging fails, as the marker does not have an icon instance, because it has been removed from the map.
I've cleaned up the reproducible example a bit, and left a copy at https://playground-leaflet.rhcloud.com/qate/1/edit?html,output - I strongly suggest that you turn this into a good bug report in the Leaflet.MarkerCluster.
You may also check if each of the markers has a marker._map private property to check if they are on the map, and skip those which are not, but this may lead to other issues down the road.

Ag-Grid expand row

Im using Ag-grid to control my table, but i want in my group that stores a list of rows instead of having to make the row group expand in 2 clicks, i want to be on 1 click.
If i click on the icon arrow it works, but if i click on the title row it only opens on 2 clicks.
I already tried to find in the documentation any information about it, but cant find nothing.
Here is a example from the documentation.
https://ag-grid.com/javascript-grid-tree/index.php
example image:
We are now recommended not to use the onGroupExpandedOrCollapsed, so this should now be...
This will also update the icons and animate the rows, which onGroupExpandedOrCollapsed won't.
onRowClicked(params) {
params.node.setExpanded(!params.node.expanded);
}
This will toggle the expansion, use params.node.setExpanded(true) if you want the rows to just stay open.
You can listen to events on either a row or cell clicked, and expand nodes accordingly.
For example to expand a row based on a click you could do the following:
onRowClicked: (params) => {
// update the node to be expanded
params.node.expanded = true;
// tell the grid to redraw based on state of nodes expanded state
gridOptions.api.onGroupExpandedOrCollapsed(params.rowIndex)
}
This should be in the documentation - I'll update it to reflect this information.
In the column definition, you can use the onCellClicked(params) function to tell it to do something when the cell is clicked. I tried looking for an expand function, but I could only find expandAll() which I don't think you will want. So what I would do is just use jquery or simple DOM selection to click on the expand icon inside of that cell.
this one works
onRowClicked(params) {
params.context.setExpand.onExpandClicked(params.rowIndex, params.node.rowHeight);
}

How to set css class to a row which has focus in Dojo datagrid

I am using DOJO datagrid version 1.10 What I want is on tab indexing the row in the grid should get highlighted so that user will be able to know on which row the focus is. But I am not getting the row focus.
You could listen on the dojox.grid.DataGrid::onCellFocus event. The event arguments are the focused cell-Object itself and the corresponding rowIndex.
function onCellFocus(cell, rowIndex) {
// first clear selection
grid.selection.clear();
// select the focused row
grid.selection.setSelected(rowIndex, true);
// invoke manually the render method
grid.render();
}
I've created a working fiddle for you, which can be found here.

How to add a custom selection Handler to a celltable

I want to add a special selection model to the celltable. Basically the function i want to have is to select a row on the table which is located on left side, a corresponding form will pop up on the right side.
I know so many people will use the singleSelectionModel with SelectionChangeHandler.
But there is problem with this method.
For example, if I select row 1 on the table. the form pop up. I close the form by clicking the close-button. Later then, I select the row 1 again, the event is not fired, because it is SelectionChangeHandler. I have to select other row before doing this. This is no good.
So I think there are a few ways to do this:
Make the row deselected right after I select the row.
Use click handler to fire the event ( to pop up the form)
Use other selection model with other selection handler to do this. (I have no ideas about this though)
So my questions are,
Does anyone know what kind of other selection handler I can use for this.
If I use the click handler on celltable, will there be any problem?
I just want to learn more about this. So any ideas will be welcome.
Thanks a lot.
Best Regards.
Use NoSelectionModel. It won't update the table view after the row is selected. That is, even if the same row is selected, the change event is fired.
//Here 'Contact' is the datatype of the record
final NoSelectionModel<Contact> selModel = new NoSelectionModel<Contact>();
selModel.addSelectionChangeHandler(new Handler() {
#Override
public void onSelectionChange(SelectionChangeEvent event) {
Contact clickedObject = selModel.getLastSelectedObject();
GWT.log("Selected " + clickedObject.name);
}
});
table.setSelectionModel(selModel);
I have using cell table in my each project. The better way to just deselect row manually as u mention. and make change css such as selected cell table's row look not changed after selection.

Dojo: dijit.form.select won't fire "onClick" event the first time clicked

I've been through the Dojo docs as well as the API and tried Google but can't find a solution to my problem, I hope anybody here can help me out.
I'm trying to create a dijit.form.select programmatically (using Dojo 1.4) and connect to the "onClick"-event of the widget.
Here's a part of my code:
var dataSelect = new dijit.form.Select({
id : "myselect",
name : "myselect",
labelAttr: "label",
labelType: "html"
},
"selectid");
dataSelect.addOption({value: "value", label: "first item label"});
dojo.connect(dataSelect, "onClick", function() {
alert("clicked!");
});
What it does: A select-box is created replacing an input-field with the ID "selectid", an option "first item label" is created. Everythings all right until here.
Then I connect to the "onClick"-event of the select, which is supposed to load more options via AJAX (but will just display an alert for testing purposes in this example).
The problem: When I click on the little arrow next to the dropdown, the event is fired (OK). But when I click on the select box itself (the area containing the option), the event is NOT fired the first time I click it (unless I clicked on the arrow before).
When I click the select box a second time (and every time after that), the event will fire!
I've tried to use "onFocus" instead of "onClick" which does work, but then the dropdown will not open when first clicked, even if I use the "openDropDown"-function (which does work when connecting to "onClick"!).
Is it me, did I run into a Dojo bug or is it a strange feature I just don't get?
Any help is appreciated.
Greetings,
Select0r
Here is a cross-browser solution:
var sizeSelect = new dijit.form.Select({
id: "sizeSelect",
name: "state",
options: size,
onChange: function(val) {
dojo.style(dojo.byId("textInput"), {"fontSize":val});
}
}, "sizeSelect");
Try to connect not to the widget itself but to it's dom node:
dojo.connect(dataSelect.domNode, "onclick", function() {
alert("clicked!");
});
Select (which extends _HasDropDown) has fancy code to handle:
mouse down on select widget
mouse move to one of the options
mouse up
Maybe that's canceling the click event.
Maybe you can connect to _loadChildren() instead.
The root cause for this issue is that the _onDropDownMouseDown method of dijit._HasDropDown will manipulate the dom node, which cause the e.target of onmousedown and onmouseup changes for the first initialization.
As we know, the onclick event will be triggered only when the target of onmousedown and onmouseup are the same target.
So in this case, the onclick event is not triggered.
It seems that in Dojo 1.5, the problem still remains.