I'm trying to use a uib-popover from ui-bootstrap in the ui-grid, but when I click in the popover, the "click" events goes to my grid. I set a Plunker with this problem: https://next.plnkr.co/plunk/aFbYIYsKAD3puSt6
The first column (Name) is the one with the cellTemplate.
If you click in the icon, a popover will appear, and the grid doesn't allow you to click in the Input that I put there, only if you click in the Label, but even so, it's still pretty buggy.
I fixed it.
It was pretty simple actually, you just need to set the "allowCellFocus" to false in the colDef of the grid
Updated Plunker:
https://next.plnkr.co/plunk/FSZXUViAhu8CMWaT
Related
I have a component with 3 buttons that trigger their respective tooltip when clicked, as below:
I use state to set the tooltip's ID so that at any time, only ONE tooltip can show. const [visibleTooltip, setVisibleTooltip] = useState(null);
The idea is, the tooltip's visible prop will check against state to return TRUE or FALSE to show that particular tooltip: visible={visibleTooltip === tooltipId}
codesandbox link
What I expect is that when I click button 2, tooltip 2 should show up, closing any other tooltips. However, what happens is that all 3 tooltips show as you click through buttons 1-3.
I suspect the tooltip isn't being re-rendered, but I don't know why. Sticking a key prop onto Tooltip fixes it, but this shouldn't be the solution.
Using latest rc-tooltip 4.2.1 and couldn't find any answers here or in the issues of rc-tooltip's github.
Not sure if missing something really obvious. Thanks!
In my angular 1.5 html5 application, I have an accordion group and inside it's body I have Couple of check-boxes. Since direct scope binding will not work inside accordion, I'm using ng-click event as attached.
This works as expected, I'm getting click events with correct value.
I have another reset button on screen, when user clicks this button I have to reset all filters including the checkbox inside the accordion. Even after I reset the model value to false, checkbox still shows as checked. I know this is because the binding is not there.
How can I update the checkbox value from javascript. Is there any angular way. I'm not a big fan of JQuery.
Regards,
Nixon
We faced a similar issue with the data bindings while using accordian.
Instead of using directly model variable, we created an object of it.
For eg, instead of using $scope.includeLocalParties, try using $scope.checkbox.includeLocalParties.
Also initialize it in your controller. Something like this:
$scope.checkbox = { includeLocalParties : false};
Hope it helps!
I've got a rails app using bootstrap with a form page that has the option to add additional form fields. The tutorial from this Railscast episode heavily influenced this form page add fields feature. I have a need to watch the add fields so that I can hide a warning panel in the new well created. Here is the code that will not work(in coffeescript):
$('#classifications_forms').on 'change', (event) ->
container = $('.classifications_form').last()
$('#premium-divide', container).hide()
Here is the code in jquery:
$('#classifications_forms').on('change', function(event) {
var container;
container = $('.classifications_form').last();
return $('#premium-divide', container).hide();
});
I have tried an on click event for the add fields button, but it's late in the event watching as it will not hide the panel. If I hit the button a second time, it will hide the panel on the previously created well, so I know the code was working to hide the panel. My thinking is to hide the panel on the last well created, and I thought that a change on #classifications_forms would give me the event needed to hide the last well, but I guess its missing something on the event. What is missing above?
Here is a jsfiddle demonstrating the problem.
Because I was using bootstrap, I found a class to apply to the panel which took care of my problem:
.hidden
When you use the flag 'showColumnMenu' with true value.
the ng-grid is rendered with button on the right end top panel.
Using this button we can hide/show the column on the grid.
In my Case I don't want to make it possible for some column to be visible on the grid - Meaning I want the the column menu box will be rendered with out some column.
Iv'e created plunker which demonstrated my problem
> http://plnkr.co/edit/VXOzBIRfyY3FoCTct9PI?p=preview
In that plnkr - I set column 'Id' to be invisible using (visible: false)
But if the user click on the column menu on the right end panel
he will be able to set it visible..
EDIT
Another scenario that I need to cover is case where there is some other
column say 'name' that I don't want the let the user configure it (by setting it as invisible) inside the column menu - meaning that column 'name' must always be on the grid!
and the user does not need to see it in the column menu..
So, if only i could hide those columns (id,name) inside the column menu
my problem will be solved..
Thanks!
You can do that editing a bit menuTemplate.html in ng-grid source file
Find line starting from :$templateCache.put('menuTemplate.html',
and line
<label><input ng-disabled=\"col.pinned\" type=\"checkbox\" class=\"ngColListCheckbox\" ng-model=\"col.visible\"/>{{col.displayName}}</label>\r" +
change to
<label ng-hide=\"col.colDef.alwaysVisible\"><input ng-disabled=\"col.pinned\" type=\"checkbox\" class=\"ngColListCheckbox\" ng-model=\"col.visible\"/>{{col.displayName}}</label>\r" +
now you can add
alwaysVisible:true
to columnDefs and it's done
Please see here working demo http://plnkr.co/edit/qmoILJ5LTMSlH7Uv9Rw8?p=preview
Why not just turn off the column menu? It sounds like you basically don't want to use it anyway. Is it important for your users to be able to hide the age column, when they can't control any other?
For hiding ID, I'd recommend not putting in the list of columns in the first place. Even if you don't include it in the grid, it will still be present in the data and accessible by your code. The grid is just a place to display information to the user, so don't put info in there that you don't want to display.
Edit: Check out UI-Grid, the updated version of the Ng-Grid project: http://ui-grid.info/
It has a new ColumnDef property, "EnableHiding" for exactly this case.
Here's their documentation for upgrading from ng-grid: http://ui-grid.info/docs/#/tutorial/099_upgrading_from_2
I am building a table where when cell is clicked high charts is shown in its place(same way as flip cards). And when highchart is clicked a cell is reverted back it is original state.
However, after creating a chart dynamically all my click functions on a parent stop working when clicking on a chart directly.
I have created this small jsFiddle to demonstrate my problem:
http://jsfiddle.net/2j4qQ/2/
Code:$('#contentDiv').on('click', '.homepageChart', function() {});
$('#contentDiv').on('click', '.homepageChart', function() {});
This function does not fire when clicking directly on a chart. Why? and how can it be
Thanks in advance.
Have a look at this: jsfiddle.net/cssimsek/4Wa32/1. Since you were appending the Highcharts <div> with each click I added the .detach() method to the callback function of the .hide()method, in order to remove the <div> on secondary clicks. It seems to be working ok now.
I have added an overlay with z-index:1; to my highcharts which seems to solve the problem. However, this seems incorrect, since i should be able to listen to dynamically created highcharts events. If anyone has some info on this please share.
Here is updated fiddle:
http://jsfiddle.net/2j4qQ/5/