I am using angular Kendo combo box. I want to make that combo box as read only. I am trying to use the attribute readonly="true". But it is not working. Could anyone suggest what is the attribute for it. Code for the following:
<kendo-combobox
[data]="data"
[textField]="'desc'"
[valueField]="'name'"
[(ngModel)]="selectedValue"
[valuePrimitive]="true"
(readonly)="true">
</kendo-combobox>
I think you just need square brackets instead of parentheses:
[readonly]="true"
According to the Angular documentation:
An element property between enclosing square brackets identifies the target property ... Event binding syntax consists of a target event name within parentheses
The combobox documentation includes a readonly property, so it should work (apologies, I can't currently check it, not having a working angular project).
Related
That's my grid
<div
ui-grid="myAPI.myGrid"
ui-grid-pinning
ui-grid-pagination
ui-grid-resize-columns
class="gridMid">
</div>
How can I detect "myAPI.myGrid" within the grid?
(Click on row/column/cell/button/whatever/.. should e.g. alert "myAPI.myGrid")
The value of the ui-grid directive attribute is called gridOptions, you can retrieve the options property straight from the grid object: grid.options.
You can use the grid object in your custom templates flawlessly, just refer to it, as explained in the tutorial:
In the cellTemplate you have access to grid, row and column, which
allows you to write any of a range of functions.
So just calling grid.options inside your template should do it, and if you need to get the data array just go with grid.options.data
If you need to get a reference to the grid object elsewhere you can get it from your gridApi objects (look here for more info about gridApi) simply with gridApi.grid
EDIT: Added plunker and clarification.
I've built a plunker where I pass the object to a clickFn inside of the controller's scope, just need to click on any cell in the last column.
Beware that when I talked about the grid's name in my comment to your question, I was quite inaccurate: there is no concept like a grid name, but, as I said before in this answer, what you called myApi.myGrid is just a reference to an object, so you can only pass/retrieve that object, not the name you gave to that reference.
I guess this is not a problem, since what you will eventually need is the object. If you want to inspect it, just place a breakpoint inside clickFn in my plunkr.
EDIT: Added new plunker
I created a new plunkr where clickFn function behaves like a "Delete" button.
I am trying to set up a reusable custom control with a combobox to be used with Bootstrap. The custom control has already all the divs, styles etc. that are needed for Bootstrap.
Now, I added a Property Definition (type: string, Allow multiple instances), so that when you use the custom control on any form, you can add selectable values to the combobox:
As a values property for the combobox, I added a computed item with the following JavaScript:
compositeData.listValues
When I use the custom control I can add values individually, one instance for one selectable value and it does work great:
However, when I compute the value to, lets say, get a list of values from a keyword document or view column:
the combobox value list looks like this:
How can I pass on a list of values thru property definition to the combobox? Is it possible at all?
UPDATE: Is there a way to loop thru the instances of a property definition? That way I could check if the current instance is a single text value or an array, put a list of all the values together and return it as a value list.
Thank you very much for your help!
In the Custom Control properties, next to Type, leave it as String and then click on the folder icon. In there you can choose complex types.
In there you can choose view column, among a vast array of choices.
UPDATE: David Leedy pointed out a caveat in regards to using comma as a separator for #Implode/#Explode. This could cause issues, if any of your values contains a comma. So, I amended my answer to account for that:
First of all, I'd like to thank everyone who took a look at this question and / or responded to it.
I had an epiphany this morning and found a solution. Might not be very elegant but it works.
As we are going to use #Implode/#Explode to build the value list for the combobox, we need to add another property definition to the reusable custom control. This property will be used to pass on the information, how the computed value list will be separated:
When I add values to the custom properties, the computed value for getting the list of values from a keyword document should look like this:
var oView:NotesView = database.getView('$vwSYSLookupKeywords');
var oDocument:NotesDocument = oView.getDocumentByKey('.DBProfile', true);
#Implode(oDocument.getItemValue('iTxtTest'),';')
As you can see, in this example I use ";" to implode the list.
This is now my list of Custom Properties:
And this is the markup for the whole custom control where I use the reusable custom control:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view
xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xe="http://www.ibm.com/xsp/coreex">
<xc:ccLegend
listSeparator=";">
<xc:this.listValues>
<xp:value>Test 1</xp:value>
<xp:value>Test 2</xp:value>
<xp:value>#{javascript:var oView:NotesView =
database.getView('$vwSYSLookupKeywords'); var
oDocument:NotesDocument = oView.getDocumentByKey('.DBProfile',
true); #Implode(oDocument.getItemValue('iTxtTest'),';')}</xp:value>
</xc:this.listValues>
</xc:ccLegend>
</xp:view>
If I now use the following in my computed value list for the combo box:
var sSeparator = compositeData.listSeparator;
#Explode(#Implode(compositeData.listValues, sSeparator), sSeparator);
the values are properly displayed in the combobox:
This does also work with #DBColumn and #DBLookup!
If you have a better solution, please do not hesitate to post it here.
Did you try to set the property to object instead of string. That should allow you pass an array to the custom control with imploding and exploding it.
To check the validity of a form in my page, I test this property in my controller's scope:
$scope.formName.$valid
The problem is that when I add forms dynamically to the page (based on a model property), the $scope.newFormName property is not added to the scope.
This plnkr illustrate the problem
Click the 'Add form' button to add forms to the page
Click the 'Search forms' to update the list with the forms found in the $scope
Note that the added forms are not found in the scope
Is there any way to make this work? How can I check the validity of this dynamically added forms?
So your code adds a list of identical forms. And you want to see whether this list is valid or not.
The solution is to use ngForms within a parent form. See this Plunkr (my modified version of yours).
Form input values are bound to objects in the $scope.dynamicData array, which also is used by ngRepeat to create the list of forms.
Invalid fields are shown with a solid red border, and invalid forms have a dashed red border.
When forms are nested like this, the parent form is invalid when any of its child forms are invalid.
I'd use angular.element(). I would also personally get it via ID rather than name, but that is just me. View this plunker to see what I did: http://plnkr.co/edit/b87HJt
I'm using angular.element() to get the element by the name, getElementsByName and then using the $attr directive to get at the name.
Does the fuelux datagrid support adding additional filter options? I would like - for instance - to add (next to the filter dropdown you already have in place), a checkbox which should also be added as a parameter to my function that retrieves the data remotely from the server.
It would be nice if the grid would automatically take any parameters from input elements that we can mark by adding a specific class or data- attribute.
Thanks very much! :)
David.
You can absolutely do this.
Add filtering logic to the datasource you provide, keyed off any custom property you add to the datasource.
Add the checkbox within the datagrid markup (or anywhere).
When your checkbox is clicked, update the custom property on your datasource and then call $('#MyGrid').datagrid('reload') to tell the datagrid to reread your datasource
I'm actually not sure if this is possible, but I will ask it anyway. I have a group of accordion controls, and within the content body of each I need to display a grid panel. The grid panel needs to have a click event attached to it. I have tried simply creating the grid panel and setting the html property of the accordion to it, but this produces no content.
Is there somehow I can achieve the above?
You cannot have html content (inserted by the property) along with any other content. If you add any item the html property value will not set/overriden. But for sure you can place anything you want into one accordion panel. Even a grid. But for that case, and based on the last question, I would recommend you to reference the view into the grid. You may do this simply by using a ComponentQuery
The click events can be applied by using the control function of the controller.
For your basic understanding:
In ExtJS you seldom use plain html code. In most scenarios you use any sort of component. All is nested within the items-array or dockedItem-array. Items within these arrays get also processed by the layout system.
Some Query examples applicable to the control function
In the following this refers to the controller itself.
You know the Id of the grid (normally you didn't do this). Id's are marke by a starting #
control({'#yourId': {itemclick: this.onItemclick }});
You know the xtype and that there is only one instance of this type. You can also describe a path by using spaces between the xtypes.
control({'grid': {itemclick: this.onItemclick }});
You have set a custom property to grid (you can refer any property this way). This one is fully compatible the the one above. I recommend this one in your case
control({'grid[customIdent=accordionGrid]': {itemclick: this.onItemclick }});
This are just some ways to use ComponentQueries, there are more. For a more detailed explanation you should refer the sencha API for ComponentQuery
Also note that every component implements the up() and down() methods which also support ComponentQueries.
I forgot to mention: For a control the query strictly need to return just one result (only the first one will be taken) a ComponentQuery on the other hand can return multiple results.
This is perfectly possible but the accordion's body is not the place to put that in. You'll need to add it to the items: [] array of the accodion. The body (or html) only accepts html.
Example:
http://docs.sencha.com/ext-js/4-1/#!/example/layout/accordion.html
this one has a grid within it.