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
}
}
Related
Frontend noob here, please be nice.
I have a dropdown menu using ui.bootstrap.dropdown. The users of my website are used to copy-paste stuff from this dropdown. In order to do so, they usually click down inside the dropdown zone, select the text they want to copy a little too fast and release the click outside the dropdown zone. With this behaviour, the dropdown closes before the user could copy-paste their selection.
Instead of closing the dropdown on an mouseup event outside of the dropdown zone, could it be a mousedown event that would close the dropdown ?
It all has to do with the auto-close setting. By default, it is set to always. With this setting, the dropdown collapses on any outside mouseup.
To be able to control it more finely, I had to use the auto-close="disabled" setting coupled with is-open="variable.isOpen".
Then, I created an callback on a mouse down event that is outside of the dropdown
$('html').mousedown(function(e) {
if($scope.variable?.isOpen && !e.target?.closest('.classOfDropdown')) {
$scope.variable.isOpen = false;
$scope.$digest()
}
});
I initialized $scope.variable inside the on-toggle callback.
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.
There is probably an answer for this but I have no idea of the terminology I would search for unfortunately!
Basically, there is a button on my Wordpress website at the top right which when clicked, pulls down a form to fill out. What's the easiest way of creating a button further down the page which would open that pulldown and take the user up there, presumably with an anchor? Simple HTML/CSS would be ideal because A: I can create a text box in the page layout creator and just paste the code in there and B: My coding knowledge is quite limited!
The website is www.harringtonsproperty.co.uk. The button in question is the BOOK A VALUATION at the top right.
Thank you!
This cannot be done with CSS alone. You need to use JavaScript.
Currently, the 'click' event is described at the top of the custom.js file. You'll need to add an additional JS function into this file to achieve what you want. For starters/example:
jQuery('button#contactToggle2').click(function(e){
e.preventDefault();
if( jQuery('#contactSlide').css('display') == 'block' ) {
jQuery('#contactSlide').slideUp(500);
} else {
jQuery('#contactSlide').slideDown(500);
// Handle scroll to top
jQuery('html, body').animate({scrollTop : 0},800);
}
})
You'll then need to give your new button an id="contactToggle2" in order for this to work. Again, this is just an example.
Pressing button will disappear, and the next button appears in HTML-
I want to create 5 buttons When the first button in a specific location. Only after the user clicks on the first button, then the user will see the second button which is in a different location.The same applies to all the buttons.
I RUN IT HERE:
http://bit.ly/1lkoLSK
another problem that the code run only on firefox-why ?
I don't know if i understand your problem correctly, but show first button, than on click just hide current active element and show next one. JSFiddle
$('button').click(function(){
$(this).hide();
$(this).next.show();
});
I'm trying to work around a webview issue on Android devices using Select drop down menus, using instead radio buttons in a popup to make user selections
What I need though is for the button text to change according to the selection the user has made. I've put togetaher a Fiddle of what I thought would work, but it's not playing ball, and I was wondering if any wiser heads out there could offer some advice.
Fiddle here;
http://jsfiddle.net/vinomarky/gEXhD/
Note: I've currently added some alerts in there when the javascripts fire, but they are not firing, and am not sure why not.
Question 1:
How to change the button text to match the user selection
Question 2:
How to make the radio selection minimize as soon as a user has made a selection, without having to click off the radio
Thanks in advance
you can use jquery click event instead of using onclick attribute
because you use jquery mobile ui, to change button text you should change button text container value not pressure_cands itself
and to hide popup screen when an item selected call click event of popupBasic-screen div
$('#updown1').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('THP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});
$('#updown2').click(function(){
// to change button label
$('#pressure_cands .ui-btn-text').html('FBHP');
// call popupBasic-screen click event to hide popup menu
$('#popupBasic-screen').click();
});