I am writing my own plugin for Grafana and I want to display multiple lines (i.e. rows) for addTextInput so that I can write paragraphs of text in the textbox (i.e. like grafana's own Text Plugin's Content Input). By default, addTextInput only has a single row. This is something that should be pretty simple but somehow I can't find the feature in the documentation. Does anyone knows how to do it?
In module.ts:
return builder
.addTextInput({
path: 'myText',
name: 'This is supposed to be a multiple line input',
defaultValue: '',
})
});
I finally found the answer after hours of googling and looking at the source code of others. This is the way to enable multiple rows on the textinput:
return builder
.addTextInput({
path: 'myText',
name: 'This is supposed to be a multiple line input',
defaultValue: '',
settings: {
useTextarea:true,
rows: 5,
}
})
});
I'm not sure why isn't this documented in the documentation.
Related
Having this select control:
new Select("id", {
items: {
path: "/cards",
template: new ListItem({
key: "{Kunnr}",
text: "{Descrip}"
}),
},
});
I need it be able to get the selected key of it, but not in the change event. I need it from outside (another function).
I have tried using the ID but I just get undefined as result.
There is a some information missing from your question, mostly around how oSelectMarca is added to your view. This makes a difference in how it's made available in your app. There are two places to get something by Id:
this.getView().byId('id');
sap.ui.getCore().byId('id');
You'll have to check which one it is... Another option is to add that model to your view instead of oSelectMarca in which case your view and your select can share data. But once again that depends on how you add the select to the screen.
Depending on where You need to use it You can do:
this.oSelectMarca = new sap.m.Select('id',{});
this.oSelectMarca.setModel(myModel);
or If You'll be using it in say another controller try:
sap.ui.getCore().oSelectMarca = new sap.m.Select('id',{});
sap.ui.getCore().oSelectMarca.setModel(myModel);
Try with two-way data binding in selectedKey which helps to keep the MV* pattern.
new Select({
selectedKey: "{/selectedCard}" // <-- It's TwoWay
items: {
path: "/cards",
template: new ListItem({
key: "{Kunnr}",
text: "{Descrip}"
}),
},
});
I'm assuming that the default model is accessible across the application. Hence, as long as you can access that model, you can get the selected key by myModel.getProperty("/selectedCard");
I solved it by accesing to the properties from outside using the sap core:
var myvar = sap.ui.getCore().getModel("marcas");
var selectedKey= myvar.getProperty('/cards/Kunnr');
I'm new to AG-Grid, so forgive me if this is a dumb question. We're using the OSS version of Ag-Grid in an Angular 5 application. I have a column where I am combining two sets of summary data and showing them. I would like to have a line-break between the two pieces of text.
Right now it's doing this:
"Summary One Summary Two"
I want it to do this:
"Summary One
Summary Two"
So far I've tried and HTML break tag, \r\n and just \n and nothing has worked. Is this possible to do?
Thanks,
James
You can use cellRenderer to achieve this.
Have a look at below colDef.
{
headerName: "Custom column",
cellRenderer: function(param){
return param.data.col1 + '<br/>' + param.data.col2;
}
}
You might need to set rowHeight in gridOptions as well.
Live example: Plunk
I have an even simpler solution without cell renderer. By the way I am using the ag-theme-balham theme. Simply set the cellStyle to white-space pre and you are able to use \n to insert a new line.
columnDefs()
...
valueGetter: ({ data }) => 'first value\nsecond value',
cellStyle: { 'white-space': 'pre' }
I'm building a angular 2 (2.0.0-rc.4) application with the new form API (2.0.2) and i've got a problem when i'm trying to update checkbox form controls with updateValue().
This is what i've done:
I've built a dynamic form with the new form API (based on the section in the cookbook: https://angular.io/docs/ts/latest/cookbook/dynamic-form.html). I've extended the form class to also handle checkboxes:
export class FormControlCheckbox extends FormBase <string> {
controlType: string;
options: { key: string, value: string, checked: boolean } [] = [];
checked: boolean = false;
constructor(options: {} = {}) {
super( options );
this.controlType = "checkbox";
this.options = options['options'] || [];
this.checked = this.options[0].checked;
}
}
This is what it looks like when it's created:
new FormControlCheckbox({
type: "checkbox",
label: 'A label',
name: "a-name",
value: "",
description: "a description",
options: [
{
label: 'A label',
name: "a-name",
checked: false
}
],
})
When the application are loaded the form controls are created and grouped together, everything works fine and the form get submitted as intended. I only had to do a workaround to make the checkbox update on change and the markup are as followed:
<input [formControlName]="control.key" [(ngModel)]="control.checked" [id]="control.key" [type]="control.controlType" [attr.checked]="control.checked ? true : null" [value] = "control.checked" (change)="control.checked = $event.target.checked">
I've also tried this markup (it also works fine):
<input [formControlName]="control.key" [(ngModel)]="control.checked" [id]="control.key" [type]="control.controlType" [attr.checked]="control.checked ? true : null" [value] = "control.checked" (change)="control.checked = check.checked" #check>
This is where my problem occurs
I'm adding a feature that updates the control values when the form just have been loaded (the user should be able to revisit the page and update previous values). The code below update all the control values.
for (var key in new_values) {
//the form control keys are the same as the key in the list of new_values
this.form.controls[key].updateValue(new_values[key]); //works for text, select and option
this.form.controls[key].updateValueAndValidity(); //not sure if needed?
this.form.controls[key].markAsDirty();
}
Text, option and select inputs gets updated but the checkboxes are unchanged. No errors or warnings. I've searched a lot for similar problems but have not found a similar problem or a solution.
Am I missing something obvious? Or have somebody had the same problem and want to share their solution?
Thanks!
Solved the problem by changing the values before creating the control-groups (before this it's possible to change the values (ex. x.value). It solved my problem but do not solve the fact that dynamically changes to checkbox form controls are not reflected in the DOM element.
I am using aloglia autocomplete.js and followed the tutorial.
I want to use autocomplete text box with others select2 selectbox.
var client = algoliasearch('YourApplicationID','YourSearchOnlyAPIKey')
var index = client.initIndex('YourIndex');
autocomplete('#search-input', { hint: false }, [
{
source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
displayKey: 'my_attribute',
templates: {
suggestion: function(suggestion) {
return suggestion._highlightResult.my_attribute.value;
}
}
}
]).on('autocomplete:selected', function(event, suggestion, dataset) {
console.log(suggestion, dataset);
$("#search-input").val(suggestion.full_name.name)
});
Problem is when I clicked anywhere beside that autocomplete box autocomplete disappear and it showed only what I typed before.
I don't want it to disappear. How can I implement it? Thanks for helping.
Please see the example below for detail problem.
Assume you have a simple form with one auto complete input field,two select2 boxes and one submit button. After you choose auto complete filed, when you click anywhere, it changed to default text. I mean, you put "piz" and it shows "pizza". Therefore you select pizza and it display "pizza".Then, you try to choose one select2 box or click anywhere. The autocomplete input field changed back to "piz".
I tried autocomplete:closed , $("#search-input").focusout to set the input field but it just changed back to my query.
To prevent it from disappearing, you can use autocomplete.js's debug option:
autocomplete('#search-input', { hint: false, debug: true }, [ /* ... */ ]);
The complete options list is available on GitHub.
Now I have it. When you need to only select and not to do any action, you can safety remove autocomplete:selected. And make sure your display key is value not object.
It saves me for trouble.
I am trying to understand Code Mirror which I am using with FirePad - I get it all working, but now I want to do something a bit more 'exciting'.
I am looking to markText to make it readOnly but I cannot find out anywhere how to actually do it. My need is to load the editor, and preset with a template (best way to describe it) so that the template has some preset readOnly text and users then update the textarea after the read only text i.e. it can't be deleted/over written
Example (template being inserted into the FirePad):
<div><strong>Note</strong></div><br/>
<div>Type text in here</div><br/>
<div><strong>What has been achieved since last session</strong></div><br/>
<div>Type text in here</div><br/>
in this example people should be able to type in the area/s marked 'type text here'.
To call the text editor I use this:
var firepadRef = new Firebase('https://XXXXXXXXX.firebaseio.com/test');
var codeMirror = CodeMirror(document.getElementById('someID'), { lineWrapping: true });
var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror, { richTextToolbar: true, richTextShortcuts: true });
any ideas?