I use Clarity datagrid and I need to disable the checkbox selection under some conditions. I can't find API to do so. Please help and thanks.
Disabling selection for specific rows of a datagrid is not available in Clarity yet, but there is a Contributions welcome issue open for it: https://github.com/vmware/clarity/issues/1018
I had similar requirement and ended up implementing the behavior using a custom directive.
have a look at:
https://plnkr.co/edit/5fQkvG?p=preview
#Directive({
selector: '[clrDisable]'
})
export class DisableDirective implements OnInit, OnChanges {
#Input('clrDisable') disabled:boolean
constructor(private elementRef:ElementRef) {
}
ngOnInit(){
}
ngOnChanges() {
let nativeRef = this.elementRef.nativeElement;
if(this.disabled) {
nativeRef.classList.add("clr_disabled");
} else {
nativeRef.classList.remove("clr_disabled");
}
}
}
.clr_disabled{
pointer-events:none;
background-color:#ccc;
opacity:0.5;
}
Related
Thanks for taking the time to review this matter.
So I've been going through this issue for a couple of days now. I'm trying to set up a navigation menu on my Microsoft Teams Side App. A set of personal tabs is exactly what it is. Following the documentation here: https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/design/personal-apps?view=msteams-client-js-1.12.1#use-a-personal-app-private-workspace
It explicitly shows how we can add a navigation bar at the top-right of our application:
Screenshot from MSTeams documentation
Simple, right?
Well, it doesn't seem to work like that. When I try and follow the SDK instructions to set the navigation bar using the function microsoftTeams.menus.setNavBarMenu() it doesn't display anything nor provide any sort of error message on the console
This is the code I have set up for my Angular component:
import {Component, OnInit} from "#angular/core"
import {app, menus, pages} from "#microsoft/teams-js"
import {Location} from '#angular/common'
#Component({
selector: 'my-app',
templateUrl: './my-app.html',
styleUrls: ['./my-app.scss'],
})
export class MyApp implements OnInit {
public initialized = false
public theme = 'default'
constructor(private location: Location) { }
ngOnInit(): void {
app.initialize().then((response) => {
this.initialized = true
app.getContext().then((context) => {
if (context.app.theme !== 'default') {
this.theme = 'dark'
}
})
app.registerOnThemeChangeHandler((theme: string) => {
if (theme !== 'default') {
this.theme = 'dark'
} else {
this.theme = 'default'
}
})
pages.backStack.registerBackButtonHandler(() => {
this.location.back()
return true
})
menus.initialize()
const item = new menus.MenuItem()
item.id = 'test'
item.icon = 'there is an <svg></svg> tag here but I shortened it for easier reading'
item.title = 'test'
item.displayMode = menus.DisplayMode.ifRoom
console.log(item)
menus.setNavBarMenu([item], (id) => {
console.log(id)
return true
})
})
}
}
Nothing fancy. Just an HTML template with some styling that you can ignore. This is just a mock testing app. The only difference is that I import the namespace directly.
So, everything else is working: Microsoft Teams is being initialized, the theme handler sets a default or dark theme, and the back button works as indicated. The only thing that's missing is the navBarMenu.
I tried with and without an Icon value inside the string, with and without the displayMode property, I tried it directly on the HTML parent using a script tag, tried the previous SDK version (1.16) and this one (2.5)
I'm pretty sure I'm missing something on this setup, but I can't seem to find any information regarding this SDK menus module and the documentaion isn't really helpful there (Or maybe I'm not smart enough to get it, yet)
Again, thank you so much for reading me. Any feedback on anything I'm doing wrong or could potentially improve is completly welcome
Cheers!
When I change the font type in my form, label overlays the outline.
How can i fix this?
in the following image it is shown how it should be:
Seems like after 3 years there's still no fix to this issue in Angular Material.
However, there are two workarounds:
First workaround:
create a directive that links to all mat-form-field components (directives) with appearance attribute set to outline
listen to document.fonts.ready event and run updateOutlineGap on the MatFormField
export the directive in AppModule or SharedModule to make it accessible everywhere
this way Angular will update the outline size as soon as the custom font is loaded
import { AfterViewInit, Directive } from '#angular/core';
import { MatFormField } from '#angular/material/form-field';
#Directive({
selector: 'mat-form-field[appearance=outline]',
})
export class UpdateOutlineGapDirective implements AfterViewInit {
constructor(private formField: MatFormField) {
}
ngAfterViewInit() {
document.fonts.ready.then(() => {
this.formField.updateOutlineGap();
});
}
}
Second workaround:
add #userNameField to your mat-form-field element
add (focus)="userNameField.updateOutlineGap()" to the input element
this way every time the input is focused, Angular will update the outline size
Is it possible to use default dart library html with angular dart?
ie:
class Test1Component implements OnInit{
#override
void ngOnInit() {
ButtonElement button = querySelector('button');
//Broken code, avoid button to be null.
button.onClick.listen(onClick);
}
void onClick(Event e){
print('Button clicked');
}
}
How can I avoid to get a 'null' button without the using any timers?
Basically I'm using only angular just for the Routes and but I'd like to stick with dart:html to control the DOM and events.
Yes, you can do that, but it's usually not a good idea.
Use instead #ViewChild(...) or similar Angular methods to get references to elements in a components view.
<button #myButton>click me</button>
#ViewChildren('myButton')
set myButton(List<Element> value) {
if(value.isNotEmpty) {
print(value.first);
}
}
If you want to just add a click handler using
<button (click)="onClick">click me</button>
would be the better way but it sounds you are somehow adding the button dynamically and adding a click handler declaratively might not work in this case (would need more info)
EDIT:
If someone like me want to use dart:html instead angular ng code, it's possible to use it
import 'package:angular/angular.dart';
import 'dart:html';
// AngularDart info: https://webdev.dartlang.org/angular
// Components info: https://webdev.dartlang.org/components
#Component(
selector: 'container',
template: '<h1>Test 1</h1><button #test1>Bottone test 1</button>',
)
class Test1Component implements OnInit{
#ViewChild('test1')
ButtonElement button;
#override
void ngOnInit() {
//Verified that button is initialized
print(button);
//Initialize click
button.onClick.listen((e) => print("Clicked"));
}
}
I am trying to add a very simple listener to my table header as specified in the book of Vaadin. I am using vaadin 6.4.5 in a liferay portlet. But the listener is never called...
table.addListener(new Table.HeaderClickListener() {
public void headerClick(HeaderClickEvent event) {
System.out.println("Column header clicked");
}
// Disable the default sorting behavior
});
table.setSortDisabled(true);
I am also unable to add footer to my table like this..
table.setFooterVisible(true);
table.setColumnFooter("Name", "Average");
table.setColumnFooter("Died At Age", String.valueOf(avgAge));
Both these code snippets were taken from the book of vaadin but they just don't work in my portlet application. please help
I have working Listener Yeah !
table.addHeaderClickListener(new HeaderClickListener() {
#Override
public void headerClick(HeaderClickEvent event) {
System.out.println("click Header");
Object object= event.getPropertyId();
}
});
I'm looking for a way to block/disable right click in javafx.scene.web.WebView. To be more specific I don't want the context menu to show up on right click. I'm new to the technology and can't find the way to do it.
Just for the record, it is implemented in JavaFX 2.2. See documentation for setContextMenuEnabled (JavaFX 2) and setContextMenuEnabled (JavaFX 8)
I've came up with working, but ugly, inelegant and, I'd say, partisan solution, which I don't really like, but actually I have no (or just can't find) other way out.
It includes modifying EventDispatcher of WebView.
So my implementation of EventDispatcher needs a reference to original WebView EventDispatcher and looks like that:
public class MyEventDispatcher implements EventDispatcher {
private EventDispatcher originalDispatcher;
public MyEventDispatcher(EventDispatcher originalDispatcher) {
this.originalDispatcher = originalDispatcher;
}
#Override
public Event dispatchEvent(Event event, EventDispatchChain tail) {
if (event instanceof MouseEvent) {
MouseEvent mouseEvent = (MouseEvent) event;
if (MouseButton.SECONDARY == mouseEvent.getButton()) {
mouseEvent.consume();
}
}
return originalDispatcher.dispatchEvent(event, tail);
}
}
Everytime event is dispatched it goes through our dispatcher and I check if it's right click. If it is I just consume it and proceed further.
To make it work you have to use WebView like that:
WebView webView = new WebView();
EventDispatcher originalDispatcher = webView.getEventDispatcher();
webView.setEventDispatcher(new MyEventDispatcher(originalDispatcher));
Every comment, clue and so on are appreciated.
With JavaFX 2.2+ it's now possible to set WebView's ContextMenuEnabled to false:
webView.setContextMenuEnabled(false);
WebView API Doc.
You can style context menus away using the following css.
.context-menu { -fx-background-color: transparent; }
.menu-item { -fx-background-color: transparent; }
.menu-item .label { -fx-text-fill: transparent; }
.menu-item:show-mnemonics .mnemonic-underline { -fx-stroke: -transparent; }
This will make all context menus and menu items transparent. I'm not sure of the css selector you could use to make this only apply to WebView context menus. If you don't have other menus in your application, that may not be a big deal.
You can do it with js (jquery used)
$(document).ready( function() { document.oncontextmenu = function() { return false } } );
Unfortunately it's not yet possible. There is a feature request for that, which you may want to track: http://javafx-jira.kenai.com/browse/RT-15684
This will will remove the context menu for the entire stage:
primaryStage.getScene().addEventFilter(MouseEvent.MOUSE_RELEASED,
new EventHandler<MouseEvent>() {
public void handle(MouseEvent event) {
if (event.getButton() == MouseButton.SECONDARY) {
event.consume();
}
}
});