I am getting flag ratingStatusKey from back-end if its RA_RT_Edit i want to show add/edit link and if its non-editable status i want to hide it this is implemented on kendo grid but its not working , Any idea what i am doing wrong..
config.js
columns: [{
field: '',
title: 'Action',
width: '8em',
template: '# if (ratingStatusKey === \'RA_RT_EDITABLE\'){# <span>Add/Edit</span> # } #'
},{
field: 'ratingDateHistory',
title: 'History',
width: '8em'
}]
I'm not familiar with kendo, but have you tried changing the 'if' to 'ng-if'?
ngIf is a directive that only displays an element if the expression evaluates to truthy
so you might add an attribute to the element like so:
ng-if="ratingStatusKey==='RA_RT_EDITABLE'"
Related
I've got a ui-grid using the latest version (3.0.0-rc22). In my column definitions, I've setup a cellTemplate to allow linking to a different route. Unfortunately it appears that no matter what I set for cellTooltip, the tooltips don't show up so long as I have a cellTemplate. If I remove the cellTemplate, the tootlips show up perfectly.
Here's what I'm doing:
colDefs: [
{
field: 'site_name',
displayName: 'Site Name',
cellTooltip: function (row, col) {return row.entity.site_name},
filter: { condition: uiGridConstants.filter.CONTAINS },
cellTemplate: siteNameLink,
width: '25%'
},{ ... }
]
I understand that just doing cellTooltip: true wouldn't work because the cellTemplate has HTML in it, but I ought to be able to specify a custom tooltip using the functions on row.entity.site_name, but that doesn't work either.
I've even tried a dumb cellTooltip function like:
function (row, col) { return 'test' }
and no tooltip ever appears. Is there something I'm missing or is this just a missing feature in ui-grid for now?
I'm an idiot. This obviously wouldn't work because the cellTemplate replaces whatever the content is, and cellTooltip is just a title attribute.
Solution is to add the title attribute in the cellTemplate itself like so:
var siteNameLink = '<div class="ui-grid-cell-contents" title="{{COL_FIELD}}"><a
ui-sref="sites.site_card({siteid: row.entity._id})">{{COL_FIELD}}</a></div>';
So I'm trying to create an 'abnormal' combobox using ExtJs 4 and I'm running into a slight issue which I can't figure out how to resolve. I got the basics down with the code that follows. As of right now I am able to get the dropdown to show all the addresses in a proper format and when I click on the proper address it properly shows the 'Street1' value in the input.
Here is what I'm stuck on:
I'm trying to add an initial item to the combobox that basically says something like 'Add New Address' that the user can select. (I'm planning on having this open a modal where the user can input a new address, save it and then have it be displayed back in the combobox, but all of that should be fairly simple) I can't seem to figure out a way of adding just a simple 'Add New Address' and then tracking the value to see if that value is returned to know to make the modal appear or not. I don't want to add it to the store as (I assume) that will add an item in the database and I'd prefer that not happen for the 'Add New Address'.
Any thoughts on how to get that to work? From below you can see that LocationStore is my store and that the general address components apply.
Thank you in advance.
ComboBox Code:
{
xtype: 'combobox',
anchor: '100%',
listConfig: {
emptyText: 'Add New Address - Empty Text',
itemTpl: '<tpl if="Name">{Name}<br /></tpl>'+'<tpl if="Street1">{Street1}<br /></tpl>'+'<tpl if="Street2">{Street2}<br /></tpl>'+'{City}, {StateOrProvince} {PostalCode}'
},
emptyText: 'Add New Location - tester',
fieldLabel: 'Street 1',
name: 'Street1',
allowBlank: false,
blankText: 'Street 1 Required',
displayField: 'Street1',
forceSelection: true,
store: 'LocationStore',
typeAhead: true,
valueField: 'Street1',
valueNotFoundText: 'Add New Location'
},
Thanks to those who pointed me to the right place in the doc, I finally found it!
I managed to achieve what you want by using the tpl, unfortunately I could not find a way to make the keyboard navigation work for the added item. I've looked at the code of Ext.view.BoundListKeyNav, but didn't find any easy solution...
The key was to use tpl instead of itemTpl, and add the markup for the extra item before the for loop:
listConfig: {
tpl: '<div class="my-boundlist-item-menu">Add New Address</div>'
+ '<tpl for=".">'
+ '<div class="x-boundlist-item">' + itemTpl + '</div></tpl>'
,listeners: {
el: {
delegate: '.my-boundlist-item-menu'
,click: function() {
alert('Go go go!');
}
}
}
}
The rest of the code in on jsFiddle.
#rixo see the comments on sencha api:
Config: Ext.form.field.ComboBoxView
ADD VALUE:
Maybe we can use Sencha merge object function...
To put 'add new location' value at the store top:
var newLocation = { 'Street' : 'Add New Location' };
var dataMerged = Ext.Object.merge(newLocation,myStore.getRange());
myStore.loadData(dataMerged);
SORT:
add name config param to your combobox
On controller: (2 ways)
'nameComboView combobox[name=combo]' : {
select : this.function1, // <-- when you select a item
change : this.funciton2 // <-- when the item select are changing
}
Now, on function, compare the value to open modal window or not.
I got grid with columns:
...
columns: [
{
xtype: 'rownumberer'
}, {
xtype: 'checkcolumn',
sortable: false,
header: 'done',
dataIndex: 'status',
flex: 2,
width: 55,
callback: function(success, model) {
this.setRawValue(success); // DOESNT WORK
this.setValue(success); // DOESNT WORK
},
}
...
I would like to change checkbox state to checked or unchecked. Functions setValue() or setRawValue() have no effect for the checkbox - moreover - there are not available for
the widget.
Is there simple function like setChecked(boolean) in extjs for checkcolumn?
It is ridiculous I have instance 'checkcolumn' but I can't find basic function.
I will be glad for any hint. Thank you.
Bogus
for record in grid store with 'fieldName' checkcolumn write
record.set('fieldName',false)
or
record.set('fieldName',true)
it make field selected/deselected
the most simple way is to do it in the store , you can add a new boolean field in the store with default of true to do that , and later just change that boolean in the store and the grid will be reflected with the changes
I am trying to display checkboxes within checkboxgroups. To keep them lined up with the other fields in the form, I want to disable the group's fieldLabel, while keeping each checkbox's individual fieldLabel. However, if I set hideLabel to true for the checkboxgroup, the field labels for the individual checkboxes disappear also, even if I explicitly set hideLabel to false.
Is this going to be possible? Thanks for any help.
Edit: As requested, some code:
config = {
xtype: 'checkboxgroup',
hideLabel: true,
columns: 1,
items: [{
fieldLabel: 'Item 1',
hideLabel: false
}, {
fieldLabel: 'Item 2',
hideLabel: false
}]
};
Are you defining a boxLabel on the checkboxes? You should define the boxLabels on the combos and set hideLabel to true on the checkboxgroup.
I solved this using some custom CSS. Instead of setting display: none to any label elements that are descendants of a container with the x-hide-label class, it is only applied to labels that are direct children of such a container.
.x-hide-label label.x-form-item-label {
display: inline;
}
.x-hide-label > label.x-form-item-label {
display: none;
}
It's not perfect, but it works for me. Checkboxes and their labels remain aligned properly with all other form elements.
Inside my FormPanel , I have a fieldset with a layout of 'column'.
I have tried several different config properties but i cannot get the label for my textfield to work. It just renders the textbox without a label.
(Obviously, if i make the layout type 'form', i have no issues). The text for the checkboxes shows fine, but the textbox label does not. Can someone point out what is wrong ?
thanks!
xtype:'fieldset',
title:'Transaction Status',
layout: 'column',
style:'margin:5px;'
,height:125//or:'-20', allowBlank:false}
,defaultType: 'checkbox'
,defaults: {
columnWidth: '.32',
border: false
},
items: [{
id:'check1-field',
name: 'check1',
boxLabel: 'DOT'
},{
id:'check2-field',
boxLabel: 'Results Matched',
name: 'check2'
},{
xtype:'textfield',
name: 'testname',
fieldLabel:'This doesnt show'
}
]
Ext Docs for TextField
"This config is only used when this Component is rendered by a Container which has been configured to use the FormLayout layout manager."
So, since you have a layout of "column", I don't think it will render.
Best best is probably to place your check boxes in a separate field set below the text entry boxes, or just remove the column layout style and change it to form (the default).
I had the same problem with you..
I solved it using panel xtype.
set your checkboxes becomes the items of a panel.