ag-grid cell editor before open event - html

i have a situation where i have a grid with rows. on a cell double click, cell editor is opened.
there are events arround celleditor cellEditingStarted and cellEditingStarted where you can do something if needed.
i need an event which is just before the celleditor opened.
a user double clicked the cell, need to do some thing there and the cell editor pops out after that.
is there something like that? cant find in documentation.
what i want to do is: custom cell editor pops out of the grid, and when the grid is near the bottom of screen, the cell editor is only half visible, and i made a trick, put a div under the grid and on adding a row, that div enlarges its height so it works fine, but cant make it work when you double click that cell, it doesn't scroll properly
thanks

You can use the agInit lifecycle method inside the Custom Cell Editor to handle this use case as it is fired before cellEditingStarted:
export class MoodEditor implements ICellEditorAngularComp {
agInit(params: any): void {
console.log('agInit, handle logic here');
}
// ...
You can verify this in the following plunkr, open the developer console to see the console log statements.

Related

Redirecting to the perticular section when click on the textbox?

I have created few forms and one pdf preview for this, whenever anyone will going to fill that form pdf preview will get updated with respect to it and after filling all the forms we can take pdf of it.
I want to be shown the particular section is getting updating (like changing the background color or underline it) on right side
when you giving the input on particular text box.
Please find the live code at http://ibus.proserindustries.com/
Posting this answer from the comment.
$("#propertytubelight").keyup(function() {
$("#propertytubelight1").text($("#propertytubelight").val());
document.querySelector("#propertytubelight1").scrollIntoView({ behaviour: "smooth", block: "nearest", inline: "start" });
});
This uses scrollIntoView method to scroll the input field with it's linked html element

Flexicious DataGrid button clickable

I've started using flexicious data grid for the last couple of weeks and I have come up with a need to put a clickable button next to the value in my column. I add the button using javascript but the problem is that when I want to click on the button my item-click fires a row selection. I have to use both the row selection for other functionality and button click for popup functionality.
Is there some built in functionality for adding buttons in flexicious? I can't seem to find any in their documentation. Or if there isn't how can I move the button on top of the row so that clicking the button doesn't fire row click functionality?
I figured this out by keeping it simple and ignoring flexicious documentation.
I added
item-click="onGridItemSelectedOfferCombo"
and then in this function I did a small hover over button test
vm.onGridItemSelectedOfferCombo = function (evt){
var isHovered = $('#clickableButton').is(":hover");
if (isHovered == true) {
//do my thing
}
}

JTable: toggle an icon when I double-click a cell

I have a table column that I'm overriding the DefaultCellRenderer to display an icon.
Is there a way I could detect double-clicks on a JTable cell, so I can toggle the corresponding row value's state so that it changes the icon between two values (representing "off" and "on")?
There's two ways:
1) The easier way: Attach a mouse listener to the table, listen for a double click, find the row and column by rowAtPoint/columAtPoint, chenge the value, and call fireCellChanged() in the table model.
2) The harder (but slightly better) way: Have a custom cell editor that upon editing, changes the value, and calls stopCellEditing().
You don't need to do both.
Check this out as well, which does similar but with a button:
http://tips4java.wordpress.com/2009/07/12/table-button-column/
When you perform a single click, the cell rendered is replaced by the cell editor, so provide also a cell editor with same appearance than the rendered, add a mouse listener and capture the double-click and perform any desired action. When you finish invoke stopCellEditing().

Flex 3 custom components positioning - popups

I have created a custom TitleWindow whcih i use as a popup. The contents of the popup are created dynamically depending on a selection a user makes from a datagrid.
My problem is, my datagrid is in another custom component whcih is toward the bottom of my page so when a user clicks one of the items the popup is displayed however with half of it out of sight at the bottom of the page.
Is there a way to position a popup so that it displays at the top of the page?
I know at least two things you can use to position a popup, though there might be more.
When you place a popup you can choose in which parent component to place the popup:
PopUpManager.createPopUp(this.parent, TitleWindowComponent);
In the component itself:
PopUpManager.centerPopUp(this);
I wanted a help tooltip type popup (with help text) to appear next to the icon that opened it. In the end I used move(x,y) to move the window where I wanted it. To get the coordinates to place it, use globalToLocal:
var globalX:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).x;
var globalY:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).y;
toolTip.move(globalX + myIcon.width, globalY);
That puts the window just to the right of the icon, myIcon.

What's the best way to hide a tab in a TabNavigator?

I'd like to conditionally hide a tab in a TabNavigator. It seems that setting visible doesn't work properly (presumably because this is how the TabNavigator hides the tabs that aren't currently selected).
What's the right way to do this?
You can do this by making use of TabNavigator's getTabAt() method which returns the Button that makes up the visual tab. You can then set that Button's visible property. It's a little tricky to get this setup with a bindings, but it's doable.
You could also consider just disabling the tab instead, which you can do by setting enabled on the corresponding TabNavigator child (for which visible didn't work).
What do you mean by hide? If you actually mean remove, then just take your array that's bound to the data in the TabNavigator, and remove the applicable element from it.
If you want to just have them removed temporarily, create a component of your own that encapsulates the TabNavigator and has an array of removed tabs and an array of actual tabs. Then handle this as you see fit.
You might want to check out the flexlib project. They have a component called SuperTabNavigator that adds a lot of functionality to the base Flex TabNavigator, including hiding tabs (I think).
If you do have to create your own component, though, it's a bit more tricky. The thing to know is that "tabs" are actually specially styled buttons, contained within a TabBar component (the TabBar is then contained within the TabNavigator). What you'll have to do then, is subclass TabNavigator and have some property on your views (i.e. the canvases, etc. that are added to the TabNavigator) that is bound to the visible and includeInLayout properties of the TabBar buttons.
In essence, what you'll have is something like:
BindingUtils.bindProperty( tabButton, "visible", view, "someProperty" );
BindingUtils.bindProperty( tabButton, "includeInLayout", view, "someProperty" );
I don't know about TabNavigator, but in other containers, you can set the includeInLayout property to false and it will be ignored. You probably still need to combine it with visible.
var secondTab = tabNavigator.removeChildAt(0);