I would like to make my Handsontable completely readonly, I have found some solutions on how to make it readonly via a controller but I would like to do the same in the HTML only. So no javascript changes.
<hot-table id="demoTable"
colHeaders="true"
datarows="gridData"
settings="gridPreferences"
height="300">
<!-- BasicData -->
<hot-column data="row_id" title="'ID'" type="'text'"></hot-column>
Here is an example column in the table, is it possible to make it readonly right here?
You can make individual hot-columns read only by adding the attribute read-only
<hot-column data="row_id" title="'ID'" type="'text'" read-only></hot-column>
---------------------------------------------------------^
The attribute isn't documented well but example usage can be found in the plugin's README.
Related
I am trying to make the mid-section to be read only and just enabling the button "OPEN".
I have the below original code. "router-outlet" renders the combination of several feature components. And I do not want to disable each and every elements or feature components
<div="row mid-section">
<router-outlet></router-outlet>
</div>
<div class="row">
<button class="btn btn-default"> OPEN </button>
</div>
I tried by adding as below:
<div="row mid-section" readonly="readonly">
But it still allows to edit and click on button inside mid-section div.
I would really appreciate your help. Thank you!
The HTML readonly property doesn't work like that. Its only for form fields and must be on that actual DOM element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
Without seeing more of your code, I can't really give a better answer than these 2 options.
Option 1, a shared service that has that read only property. You could have a service, that has a behavior subject that you can update from the parent component. The inner components would all need to have that service injected, and do something appropriate when the value changes.
Option 2, you would need a container component that has a new boolean input, and it would need to pass that value down to all the children components (which would also need an input).
I am new to Angular and have run into a problem that seems to have a javascript work around but they aren't very elegant.
I have a model with an array property. I ngfor the list property to build some html selection options. This is all working nicely. The problem comes when I am trying to set default value...the html elements don't have a load event.
I tried numerous html elements and they don't appear to have a load event either but I certainly could be doing it wrong.
I have seen a solution to put javascript tag right after the html and I could do that but I was really looking for a more elegant way in Angular.
I saw this SO post and thought that was my answer but there is a warning given that I agree with and thus it doesn't appear to be a good solution.
Regardless I tried it just to see if it would work and I got:
Failed to execute 'setAttribute' on 'Element': '{{loadDefaults()}}' is not a valid attribute name
<span {{loadDefaults()}} ></span>
So how can I fire an AS2 function in the component to load the default values?
HTML (btw this is NOT a full page load so there is no body tag):
<tr>
<td *ngFor="let loc of locOptions;">
<span>{{loc.text}}</span>
<input type="radio" name="radiogroup" [value]="loc.value" (change)="onSelectionChange(loc.value)">
</td>
</tr>
Edit
I thought perhaps mistakenly that ngoninit would fire too soon...before the html elements are rendered.
So perhaps what is being suggested is that I add a boolean is default to the model and bind THAT as the element is rendered.
In your ngonit function set this.locOptions to your default values. The value can be changed later on in any function and the change will be reflected in the view. Hope this helps you.
You should use ngOnInit to init you data, and call retrieve your data from your component :
defaults : any;
ngOnInit {
this.defaults = loadDefaults();
}
loadDefaults() {
//get data
}
HTML :
<span>{{defaults}}</span>
I have written my own table module. Calling it in HTML code looks like this:
<my-table [data]="variableWithArr"></my-table>
Now, pretty nice table is being displayed. Cool. But what if I want to have a progress bar in some column of table? I thought that I could put a HTML code with component selector as value, for example bootstrap progressBar, like this:
for(let record of variableWithArr) {
record[0] = '<ngb-progressbar type="danger" [value]="100"></ngb-progressbar>';
}
Unfortunatelly, Angular displays only a HTML code but dooes not interpret it as component selector, so I receive something like that in DOM:
<td><ngb-progressbar type="danger" [value]="100"></ngb-progressbar></td>
How to fix it?
This is not how Angular works - you can't insert arbitrary HTML (innerHTML or otherwise) and expect that directives will be picked up & applied. Making Angular work this way would require shipping entire compiler to a browser and would defeat the whole purpose of all the great optimizations that can be done with the ahead-of-time (AOT) compilation.
tl;dr; nope, you can't do this and this has nothing to do with the ng-bootstrap project, but rather with design decisions behind Angular.
By looking at the docs you need to use the property [innerHTML], but to be clear only use it when you trust the code!!
So should be something like this:
<td [innerHTML]="record"></td>
I am using angucomplete-alt in many places of my web application (in forms), but i cant make the autocomplete fields as a 'required' field, even thought i've used the 'field-required' attribute.
angucomplete-alt#sectorSuggested(field-required= true,placeholder='Search sectors', local-data='sectors', selected-object='onSectorSelected', search-fields='Sector', pause='300', minlength='1', title-field='Sector',input-class="form-control form-control-small", name='sector')
how do i make it required field, please help :)
Going off of the documentation and examples I can see here, it looks like the attribute should be
field-required="true"
In the above example, his element looks like this:
<div angucomplete-alt="" id="ex8" placeholder="Search countries" pause="100" selected-object="countrySelected8" local-data="countries" search-fields="name" title-field="name" minlength="1" input-class="form-control form-control-small" match-class="highlight" field-required="true" class="ng-isolate-scope">
Additionally, if you have many required fields, his documentation states:
Set custom class name for required. Unique class names need to be set
when you have multiple directives to validate
You can do this, using the field-required-class attribute.
Taken from here
you can use field-required = "true"
and it should work fine.
What is it called or where can I find code for placing a 'suggestion' or grayed out text in a form field box that doesn't get pass as a value. I know i can prepopulate it, but want to use it to only provide guidance. Example, box that says " "
The terminology you're referring to is called a watermark.
There are many existing Javascript solutions written for this already, like this one.
JavaScript will do this. I've used the jQuery framework, for example:
Setting the value:
$('#comment_box').val('Optional comment..');
On click, removing the value:
$('#comment_box').val('');
On submit:
if (comment == 'Optional comment..'){
comment = '';
}
And submit your comment. I've left out the functions here but you can get an idea.
HTML5 has a placeholder attribute supported by many modern browsers.
(But alas not MSIE.)
The above-linked article explains how to test for support and implement a javascript fallback.
use
<input type=text disabled value='...'/>
(disabled wont pass the values, whereas readonly will pass the value)
I think what you are referring to is a watermark
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/TextBoxWatermark/TextBoxWatermark.aspx
or
there are jquery defaultvalue plugins