I am using Angular 1.5 and am using the UI Grid. I was wondering is there a way to put a drop-down (i.e. a select) in a header column ? I know you can do it within the "data" cells/rows of the table but unsure if it can be done in the header title ?
See the below image link to see a visual of what I mean. I want to put the dropdown into the column header called "Value"
enter image description here
Thanks - Ronan.
You can specify a filter with selectOptions for displaying a dropdown in the header.
Example:
columnDefs: [{
name: 'id', field: 'id'
},
{
name: 'value', field: 'value',
filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: [{ value: '1', label: 'One' },
{ value: '2', label: 'Two' }]
}
}]
For more details check filter section in this link UI Grid ColumnDef - Filters
Related
I have an Ext grid and store. The store fields are
fields: ['id', {
name: 'name',
type: 'string'
}, {
name: 'dob',
type: 'date'
}]
The relevant grid column for date is set as
{
xtype: 'datecolumn',
dataIndex: 'dob',
text: 'Date of Birth',
format: 'd-m-Y',
filter: 'date'
}
Here, the filter attribute is for the gridfilters plugin.
I would also like to have the filters applied programmatically on the dob field like so -
store.filter([{
property: 'dob',
value: new '01/17/1990',
operators: 'gt'
},{
property: 'dob',
value: '01/17/2022',
operators: 'lt'
}])
However, although the gridfilter plugin works with multiple filters on the same field, programmatically this doesn't. It only applies the last filter from the array.
With the gridfilter plugin, I get multiple filters like -
[
{
"property": "dob",
"operator": "lt",
"value": "18/01/1990"
},
{
"property": "dob",
"operator": "gt",
"value": "18/01/2022"
}
]
However, when I try it programmatically, I only get -
[
{
"property": "dob",
"operator": "gt",
"value": "18/01/2022"
}
]
Any suggestions toward this will be very helpful.
I've created a Sencha Fiddle to demonstrate the issue.
Sencha Fiddle
You can add multiple filters for the same property by setting a different id property for the filters. Change this in your code:
if (from && to){
var filters = [{
id: 1,
property: 'dob',
operator: 'gt',
value: from
},{
id: 2,
property: 'dob',
operator: 'lt',
value: to
}]
store.filter(filters);
}
If you change it in your fiddle, under Filters Applied you will see that both filters are set this way. Anyway, I think you need to adjust this a bit to actually work, because your dates are stored currently as text.
I have an ExtJS 6.2.0.981 Modern application. I am trying to add a "textfield" into a grid cell but I get the following error:
column.getCell is not a function
Here is the fiddle
I checked the DOCS for the "widgetcell" component and it states:
This class is used for Ext.grid.Grid cells that contain a child Ext.Component or Ext.Widget. This cell type is typically used by specifying Ext.grid.column.Widget column type.
But Ext.grid.column.Widget seems to have been removed.
Place your widgetcell config into cell
columns: [{
text: "Column 1",
dataIndex: "COL1",
flex: 1,
cell: {
xtype: "widgetcell",
widget: {
xtype: "textfield",
label: "Col 1 Widget"
}
}
}]
I ma newbie to lightning component and I am using the lightning tree grid view in that I like to add some button on one column in child rows. I searched for that option but I couldn't find it.
Please help me out how we can achieve this.
Lightning Component
<div class="slds-m-around_xx-large">
<lightning:treeGrid aura:id="accTree"
columns="{!v.gridColumns}"
data="{!v.gridData}"
keyField="name"
expandedRows="{!v.gridExpandedRows}"/>
</div>
Lightning Controller
var columns = [
{
type: 'text',
fieldName: 'Order',
label: 'Order'
},
{
type: 'currency',
fieldName: 'Total',
label: 'Total'
},
**{
type: 'Button',
fieldName: 'EstimatedDeliveryDate',
label: 'Estimated Delivery Date'
},**
]
I tried adding the button as type "button: but it doesn't work.
Only first column can't be made as button . Otherwise we have an type called button and we can pass the typeattributes to align the button other than the first column
type: 'button',
fieldName: 'Sample',
label: 'Test',
typeAttributes: {
iconName: '',
name: 'sample',
title: 'testtet',
label:'testtet',
alternativeText:'Example',
variant: 'brand',
disabled: false
}
I want to have a checkbox (true/false) for my extjs grid.
When I try to add item of xtype : 'checkbox' I get an error :
Uncaught TypeError: column.isColumnHidden is not a function
I've seen on a a post that there is a plugin of checkbox column that needs to be downloaded and included in ExtJS , Isn't there a built in option in ExtJS 5 for checkbox in a grid ?
When I use checkbox, I download extjs library from official site and build develompent version of if via extjs console.
My extjs grid with checkbox was look like this:
{
xtype:'checkcolumn',
fieldLabel: 'checkbox_label',
name: 'checkbox_name',
text: 'text'
}
So full grid code will look like this:
{
xtype: 'grid',
frame: true,
title: 'Users',
collapsible: true,
height: 250,
bind: '{depGrid.selection.users}',
columns: [
{
text: 'Id',
dataIndex: 'id'
},
{
text: 'Name',
dataIndex: 'name'
},
{
xtype:'checkcolumn',
fieldLabel: 'checkbox_label',
name: 'checkbox_name',
text: 'text'
}
]
}
Also you cat try to add to checkbox dataIndex field and set to it some boolean variable from your model. Good luck!
I have a problem with OpenLayers + GeoExt2: I created a FeatureStore which features (downloaded via an API) contain an id attribute. When I try to represent the features in a grid panel, all the other attributes are properly represented (name, description, etc.) but the id is somehow overridden by the OpenLayers object's id, for instance "OpenLayers_Feature_Vector_363", instead of the "original" int id.
My store is defined as follows:
areaStore = Ext.create('GeoExt.data.FeatureStore', {
layer: areaLayer,
fields: [
{type:'string', name: 'note'},
{type:'int', name: 'node' },
{type:'string', name: 'description'},
{type:'bool', name: 'enabled'},
{type:'int', name: 'id'}
],
autoLoad: false,
});
The columns that I put into my grid panel are defined as follows:
var areaColumns = [
{ dataIndex: 'id', header: 'ID', flex:1 },
{ dataIndex: 'description', flex: 1, header: 'Description' },
{ dataIndex: 'node', flex: 1, header: 'Node' },
{ dataIndex: 'enabled', flex: 1, header: 'Enabled'},
{ dataIndex: 'note', flex: 1, header: 'Note' }
]
Has anyone got the same problem when downloading features from a database via API?
Thank you!
Have you tried using
{type:'int', name: 'recordId', mapping:'id'}
and
{ dataIndex: 'recordId', header: 'ID', flex:1 },
to check whether the id is read correctly from the data?
Have you played around with idProperty config option of the store, i.e. set it to someNonExistentIdProp?
#Alexander: thank you for your answer, I tried right now with no luck, it actually seems like the id is undefined. That's odd, because all the other fields are read correctly and I'm sure the type of that field is integer.
[EDIT] Since I didn't get to find out why OpenLayers overwrites the properties' id and it happened before I could make any mapping to the original id attribute, I tried and managed to edit my GeoJSON format in order to add a recordId attribute to the features' properties and set it equal to the original id.
In other words I edited the downloaded JSON before it was parsed and added as a OpenLayers feature vector, I added the recordId attribute, then used this one instead of 'id'.
I hope my solution will help someone who is having the same problem!