As I understood correctly VS Code already has support for type annotations in TypeScript and JavaScript, but how do I enable it or use it properly for inline variables where VS Code does not understand the referer correctly?
Here is my code:
export const TooltipModule = {
init() {
this.tooltipElements = document.getElementsByClassName('tooltip')
if (this.tooltipElements.length > 0) {
this.enableTooltips()
}
},
enableTooltips() {
/** #var {Element} tp */
for (const tp of this.tooltipElements) {
new Tooltip(tp /* no type annotation here */, {
placement: 'bottom',
title: 'Top',
})
}
},
}
I have also tried using #type or #param.
Related
I'm working on a custom language extension and I'm having issues with how to show functions for a variable.
I'm importing my language in the form of json, so i've created a typescript-file that i import into my extensions.ts:
export interface CustomIntellisense {
text: string;
help: string;
}
const data = [{
"text": "Void.String",
"help": "<h1>String String()</h1><p>Default constructor.<code>String something;</code></p>"
},
{
"text": "String.toInteger",
"help": "<h1>Integer toInteger()</h1><p>Converts a String to its numeric representation."
},
{
"text": "Void.Integer",
"help": "<h1>Integer Integer()</h1><p>Default constructor.</p>"
}];
export let json: CustomIntellisense[] = data;
My idea here is that the elements containing "Void" in text gets created as a variable, while the other element gets added as a method.
const provider1 = vscode.languages.registerCompletionItemProvider({ language: 'myLanguage', scheme: 'file' }, {
provideCompletionItems(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken, context: vscode.CompletionContext) {
let items: vscode.CompletionItem[] = [];
let re = /\"/gi;
json.forEach(element => {
const item = new vscode.CompletionItem(element.text.split('.')[1]);
item.insertText = new vscode.SnippetString(element.help);
const markdownDocumentation = new vscode.MarkdownString();
markdownDocumentation.supportHtml = true;
markdownDocumentation.appendMarkdown(element.help);
item.documentation = markdownDocumentation;
if (element.text.includes('Void.')) { //If text includes Void this should be a variable
item.kind = vscode.CompletionItemKind.Variable;
}
else {
item.kind = vscode.CompletionItemKind.Method;
}
items.push(item);
});
return items;
}
});
The items gets added to the view, but I can't figure out how to 'filter' what is shown.
The official example on how to achieve this can be found here:
https://github.com/microsoft/vscode-extension-samples/blob/main/completions-sample/src/extension.ts
But this only explains how to filter based on the text/name, and i cant filter this specifically for each variableName i use.. If i somehow could detect what kind of Variable i'm working on I could possibly create a function that fetches if its a String/Int, then parse through my file and add methods in my 2nd CompletionItemProvider. But I havent found any good way of deciding the type of variable..
What i want is this:
If i click ctrl+space i want toInteger() to be the only thing that shows up, but instead it lists up everything all the time:
Anyone have a clue how to achieve this?
After a lot of searches in SO without any particular solution, I am compelled to ask this question.
What I want is to hide a row group icon on a single group row. Like in the below picture I have a group row that has only one record, which is already shown in the top row. I want to hide that collapse icon on that single record. Only collapse/expand icon shown when group rows are more than one.
For reference see AG-Grid Master-Detail Section, here they specify which rows to expand. Same functionality I needed here.
I'm using the below versions of AG-Grid Angular (v9)
"#ag-grid-community/core": "^25.3.0",
"#ag-grid-enterprise/row-grouping": "^26.0.0",
"#ag-grid-enterprise/server-side-row-model": "^25.3.0",
"ag-grid-angular": "^25.3.0",
"ag-grid-community": "^25.3.0",
Here is my code:
this.rowModelType = 'serverSide';
this.serverSideStoreType = 'partial';
this.cacheBlockSize = 20;
this.gridOptions = {
rowData: this.loanlist,
columnDefs: this.generateColumns(),
getNodeChildDetails: function(rowItem) {
if (rowItem.orderCount > 1) {
return {
expanded: true
}
} else {
return null;
}
}
}
The issue is the getNodeChildDetails is not accessible. Browser console showing me the below warning and my above code is not working.
This is simple to achieve using a cellRendererSelector on the autoGroupColumnDef. You can specify whether to show the default agGroupCellRenderer or simply return another renderer (or, just return null):
this.autoGroupColumnDef = {
cellRendererSelector: (params) => {
if (params.value == 'United States') {
return null;
} else {
return {
component: 'agGroupCellRenderer',
};
}
},
};
In the example below, we are disabling the row group expand functionality on the United States row.
See this implemented in the following plunkr.
The solution isn't that hard - but could be tough, agreed (one day faced with the same case)
So - the answer is custom cell renderer.
It would look a little bit different (separate column for collapse\expande action) - but you would get all control of it.
Custom rendeder component for this action would look like :
template: `
<em
[ngClass]="{'icon-arrow-down':params.node.expanded, 'icon-arrow-right': !params.node.expanded}"
*ngIf="yourFunctionHere()"
(click)="toggleClick()">
</em>`,
export class MasterDetailActionComponent implements ICellRendererAngularComp {
private params: any;
agInit(params: any): void {
this.params = params;
}
public toggleClick(): void {
this.params.node.setExpanded(!this.params.node.expanded);
}
public yourFunctionHere(): boolean {
// so here you are able to access grid api via params.api
// but anyway params.node - would give you everything related to row also
}
refresh(): boolean {
return false;
}
}
in [ngClass] - you are able to handle the visual part (icons) - modify\customize
and don't forget to add this component in the gridOptions:
frameworkComponents: {
'masterDetailActionCellRenderer': MasterDetailActionComponent,
}
and include this column in your columnDef:
columnDefs: [
headerName: "",
width: 75,
field: "expand",
cellRenderer: "masterDetailActionCellRenderer",
filter: false,
resizable: true,
suppressMenu: true,
sortable: false,
suppressMovable: false,
lockVisible: true,
getQuickFilterText: (params) => { return '' }
]
Is there a way to bind the class attribute of a ui5-input-template inside a sap.ui.table.Table to a model value?
What I tried so far is:
[
{
label: 'arow',
disabled: true,
class: 'myClass1',
data: [
{
value: 'rowVal1'
}
]
},
// ...
]
and
myTable.bindColumns("/columns", function (index: string, context: any) {
let indParts: string[] = index.split("-");
let ind = +indParts[indParts.length - 1];
var colLabel = context.getProperty().label;
let template = new sap.m.Input({
value: `{data/${ind}/value}`,
class: '{= ${class} }',
enabled: '{= !${disabled} && !${data/' + ind + '/disabled} }',
});
// template.addStyleClass('{class}');
// template.setClass('{class}');
let column = new sap.ui.table.Column({
label: colLabel,
width: `{width}`,
template: template,
});
return column;
});
myTable.bindRows("/rows");
It seems as if I cannot use the model binding here, only add static class values when I create the template. Is this right?
As suggested in the comment, one of the solutions is to enhance the control's set of properties with your own property to allow binding the style class.
Here is a working sample: https://embed.plnkr.co/ik9PIdHKvK8udpQt
And here a snippet from the control extension:
sap.ui.define([
"sap/m/Input",
"sap/m/InputRenderer",
], function(Input, InputRenderer) {
"use strict";
return Input.extend("demo.control.Input", {
metadata: {
properties: {
"styleClass": {
type: "string",
defaultValue: null,
bindable: true,
}
}
},
renderer: { // will be merged with the parent renderer (InputRenderer)
apiVersion: 2, // enabling semantic rendering (aka. DOM-patching)
// Implement the hook method from the parent renderer
addOuterClasses: function (oRenderManager, oInput) {
InputRenderer.addOuterClasses.apply(this, arguments);
oRenderManager
.class("demoControlInput") // Standard CSS class of demo.control.Input
.class(oInput.getStyleClass()); // Custom CSS class defined by application
},
},
});
});
As documented in the topic Extending Input Rendering, some base controls allow overwriting existing methods from the renderer. If you look at the sap.m.InputRenderer, for example, you can see that the renderer provides multiple hooks to be overwritten by subclasses such as the addOuterClasses.
And since styleClass in our customer control is a valid ManagedObject property, binding in JavaScript ("programmatically") also works:
new Input({ // required from "demo/control/Input"
// ...,
styleClass: "{= ${class}}"
});
I have a question about custom controls in UI5. Say I want to use a formatter function in the custom control (see the snippet below). A colleague of mine insists that custom control should be as generic as possible (e.g. to be able to specify texts with commas, spaces and newlines in whichever way you need it to be). Thus my idea was to pass formatter function to the custom control. Is it possible and if yes how to do it?
sap.ui.define([
"pr/formatter/Formatter",
"sap/m/Popover",
"sap/m/Text"
], function(Formatter, Popover, Text) {
"use strict";
return Text.extend("pr.control.TextWithPopover", {
metadata: {
aggregations: {
_popover: {
type: "sap.m.Popover",
multiple: false,
visibility: "hidden"
}
}
},
init: function() {
const popover = new Popover({});
this.setAggregation("_popover", popover);
},
setText: function(text) {
if (this.getProperty("text") !== text) {
// How to make it generic?
const formattedText = Formatter.formatCommaListToNewLine(text);
const contentToAdd = new Text({ text: formattedText });
contentToAdd.addStyleClass("popoverContent");
// ...
}
},
renderer: "sap.m.TextRenderer",
});
});
UI5 introduced the standard type "function" to sap/ui/base/DataType in 1.46(Commit) which allows ManagedObject properties to receive functions as their values.
Control
return ControlToExtend.extend("MyControl", {
metadata: {
properties: {
/**
* This function will contain foo and bar as parameters.
* Applications should return xyz.
*/
doSomethingWith: {
type: "function",
},
},
},
// ...
getXYZ: function(/*...*/) {
const doSomethingWith = this.getDoSomethingWith(); // function from the application
if (typeof doSomethingWith == "function") {
const [foo, bar] = [/*...*/];
return doSomethingWith(foo, bar);
} else {
/*default behavior*/;
}
},
});
Application
<MyControl doSomethingWith=".myControllerMethod" /> <!-- or -->
<MyControl doSomethingWith="some.globally.available.function" /> <!-- or -->
<!-- Since 1.69: -->
<MyControl
xmlns:core="sap.ui.core"
core:require="{
'myRequiredFunction': 'mynamespace/myApplicationFunction'
}"
doSomethingWith="myRequiredFunction"
/>
Note: XMLTemplateProcessor (XML-view / -fragment) supports function properties only as of 1.56. (Commit)
myApplicationFunction: function(foo, bar) {
// create and return xyz however the application wants;
},
This way, the control has no hard dependency to the application while keeping the flexibility to allow changing the default output or behavior.
The above option is one of the many solutions to reduce tight couplings in UI5. Another solution would be to add a control property which can be then manipulated by applications via binding and formatter.
Generally, controls (or control libraries) and control consumers (e.g. applications) should be always developed independently; with an interface in between (e.g. MenagedObjectMetadata) and the controls being still open for extensions without disclosing how they're implemented internally.
Can't find the exact answer.
If i decide to opt-in for vanilla JavaScript (non-Angular & Co) ag-Grid-community edition, can i have easy to add my own custom context menu an other custom extensions?
As i seen their docs, context menu is only enterprise level feature.
I seen some treads that there is some caveats, but i personally did not dig deeper.
In general, how easy is to implement self-built features in ag-Grid-community. Or it is better to write own grid?
We have a custom context menu component in our Angular project with ag-grid community, so it's definitely possible.
How it works:
We define all grid columns in templates. If you want a context menu, you put an empty column into the column set and put a special directive on it. The directive accepts a context menu template, which is passed into a custom cellRendererFramework (a menu trigger button, basically). The directive also configures the column to ensure consistent look across grid instances.
This might be not what you've been looking for if you require for menu to open with right mouse click anywhere in a row, but I suppose it shouldn't be that hard to trigger the menu from a different event (check out ag-grid events, there might something suitable).
The snippets below should be straightforward to adapt for your framework of choice. Given you opted into vanilla JS, you'll have to use regular functions to do the same, something like this:
const grid = withContextMenu(new Grid(element, gridOptions), menuOptions).
Here's an example of how we use it:
<ag-grid-angular>
<ag-grid-column headerName='ID' field='id'></ag-grid-column>
<ag-grid-column [contextMenu]='menu'>
<mat-menu #menu='matMenu'>
<ng-template matMenuContent let-item='data'>
<button mat-menu-item (click)='restoreSnapshot(item.id)'>Restore From Snapshot</button>
<a mat-menu-item [routerLink]='[item.id, "remove"]'>Remove</a>
</ng-template>
</mat-menu>
</ag-grid-column>
</ag-grid-angular>
The directive that applies the menu:
const WIDTH = 42;
export const CONTEXT_MENU_COLID = 'context-menu';
#Directive({
selector: '[agGridContextMenu]'
})
export class AgGridContextMenuDirective implements AfterViewInit {
constructor(private gridComponent: AgGridAngular) {}
#Input()
agGridContextMenu!: ElementRef<MatMenu>;
ngAfterViewInit() {
if (!this.agGridContextMenu) return;
setTimeout(() => {
this.gridComponent.api.setColumnDefs([
...this.gridComponent.columnDefs,
{
colId: CONTEXT_MENU_COLID,
cellRendererFramework: CellRendererContextMenuComponent,
width: WIDTH,
maxWidth: WIDTH,
minWidth: WIDTH,
cellStyle: {padding: 0},
pinned: 'right',
resizable: false,
cellRendererParams: {
suppressHide: true,
contextMenu: {
menu: this.agGridContextMenu
}
}
}
]);
});
}
}
The cell renderer component:
#Component({
selector: 'cell-renderer-context-menu',
template: `
<ng-container *ngIf='params.data && params.colDef.cellRendererParams.contextMenu.menu'>
<button
type='button'
mat-icon-button
[matMenuTriggerFor]='params.colDef.cellRendererParams.contextMenu.menu'
[matMenuTriggerData]='{data: params.data}'
>
<mat-icon svgIcon='fas:ellipsis-v'></mat-icon>
</button>
</ng-container>
`,
styleUrls: ['./cell-renderer-context-menu.component.scss']
})
export class CellRendererContextMenuComponent implements ICellRendererAngularComp {
params!: ICellRendererParams;
agInit(params: ICellRendererParams) {
this.params = params;
}
refresh() {
return false;
}
}
A screenshot:
I followed this blogpost, using community edition ag-grid, and it worked! I was surprised because previously I had the experience that cell renderers didn't allow content outside of the cell boundaries to be shown, but somehow popper/tippy is getting around that (I think it adds itself to the top of the DOM with this section of code appendTo: document.body).
https://blog.ag-grid.com/creating-popups-in-ag-grid/
basically, in my javascript CellRenderer:
class MyCellRenderer{
// https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/
init(e){
this.isOpen = false;
this.container = document.createElement("span");
let menubutton = document.createElement("button");
menubutton.innerHTML="🠋"; //downward arrow
this.tippyInstance = tippy(menubutton);
this.tippyInstance.disable();
this.container.appendChild(menubutton);
menubutton.addEventListener('click', that.togglePopup.bind(this));
}
getGui() {
return this.container;
}
togglePopup() {
this.isOpen = !this.isOpen;
if (this.isOpen) {
this.configureTippyInstance();
this.eMenu = this.createMenuComponent();
this.tippyInstance.setContent(this.eMenu);
} else {
this.tippyInstance.unmount();
}
}
configureTippyInstance() {
this.tippyInstance.enable();
this.tippyInstance.show();
this.tippyInstance.setProps({
trigger: 'manual',
placement: 'bottom-start',
arrow: false,
interactive: true,
appendTo: document.body,
hideOnClick: true,
onShow: (instance) => {
tippy.hideAll({ exclude: instance });
},
onClickOutside: (instance, event) => {
this.isOpen = false;
instance.unmount();
},
});
}
createMenuComponent() {
let menu = document.createElement('div');
menu.classList.add('menu-container');
let options = {};
options['Delete Row'] = this.menuItemClickHandler.bind(this);
options['Popup an Alert!'] = function(){alert("hello!");};
options['Popup an Alert 2!'] = this.menuItemClickHandler.bind(this);
for (const [key, value] of Object.entries(options)) {
let item = document.createElement('div');
item.classList.add('menu-item');
item.setAttribute('data-action', key.toLowerCase());
item.classList.add('hover_changes_color');
item.innerText = `${key}`; // string formatting example
item.addEventListener('click', value);
menu.appendChild(item);
}
return menu;
}
menuItemClickHandler(event) {
this.togglePopup();
const action = event.target.dataset.action;
if (action === 'delete row') {
this.params.api.applyTransaction({ remove: [this.params.data] });
}
if (action === 'popup an alert 2!') {
alert("2");
}
}
}
and in styles.css:
.hover_changes_color:hover {
background-color: dimgrey;
cursor: pointer;
}