I have a grid with some columns with filters.
columns defination:
columns:[{
text: "Number",
dataIndex: 'clientreference',
width: 200,
filter: true,
sortable: true
},
here is filter feature defination
features: [{
ftype: 'filters',
encode: true,
local: false
}],
The problem is: When i'm trying to save state of grid, filters are not working: When I adding this code to a grid:
stateful: true,
stateId: 'documentsGrid',
I refresh the page and all works fine, because i dont have state in my cookies.
But when I refresh the page second time - state loads from cookies and filters are not working.
If i remove stateful: true and refresh page, filters are working fine.
Any suggestions?
Also I noticed, that all examples in extjs site are only with filters or with stateful grid, but there is no one example with both.
UPDATED:
The most useful way was making my own method for saving state of elements I need and to restore it.
I think you are specifying features in grid.But you can specify filters in store directly.So try to define filters in store and stateful in grid config options.Hope you may get the solution to come out from this.
Related
I've got a dx-select-box in AngularJS that loads an array with around 3k rows, which makes performance very slow. I would like to enable paging, but I haven't found the way to do it. I've followed the documentation:
Array data binding doc: https://js.devexpress.com/Documentation/Guide/Widgets/SelectBox/Data_Binding/Simple_Array/Array_Only/
Enable paging on select box:
https://js.devexpress.com/Documentation/Guide/Widgets/SelectBox/Enable_Paging/
But no matter what I haven't been able to put the two of them together and get them working. I have also tried this solution with no luck.
Here's the HTML code:
<div id="stockShelfs" dx-select-box="vm.stockShelfsOptions"></div>
And here's the JS:
this.stockShelfsOptions = {
valueExpr: 'stockShelfId',
displayExpr: 'name',
searchExpr: 'name',
searchEnabled: true,
acceptCustomValue: true,
value: this.product.stockShelfId,
placeholder: translate('POr_VelgStockShelf'),
bindingOptions: {
dataSource: 'vm.stockShelfs',
},
Does anyone know how this could be achieved, if possible?
I got it working by getting rid of the bindingOptions config:
dataSource: new DevExpress.data.DataSource({
store: new DevExpress.data.ArrayStore({
data: vm.stockShelfs,
key: "stockShelfId",
paginate: true,
pageSize: 1
})
}),
And then doing the two way binding inside the onCustomItemCreating function
I have a grid with two checkcolumns (apart from the rest columns) and I want to make conditional change of cell (adding specific CSS: making thicker borders of this cell if checkcolumn is enabled and default look if it is disabled) in accordance to disable / enable state.
Unfortunately with using Renderer function I end up with strange outcome (displayed object text or true/false values) because of override native Renderer of checkcolumn I presume. Overwriting checkcolumn renderer is also bad practice which I'm not allowed to do.
I've also tried to use listeners like beforeactivate, beforeDisable etc but they seems not being called whenever state of cell change (disabled <> enabled). I thing that it is possible that its because of using specific bind property as seen bellow.
Is there any method to do it clear (without to much of code repetition and without overriding and adding new method to checkcolumn renderer)??
here is code for one of two checkcolumns in my grid:
{
localized: {
text:
'details.tabview.coordination.icccoordination.changepositions.main.view.ebv'
},
dataIndex: 'ebv',
width: 50,
bind: {
disabled: '{!changeContextEditMode.active}'
},
sortable: true,
filter: true,
xtype: 'checkcolumn',
listeners: {
beforecheckchange: 'checkIfCheckChangePossible'
}
}
I will appreciate any help
I am using ag-grid with angularJS. I need to enable the edit options in the table by doing a single click. Now its happening with double click. Can any one please tell me how to do that?
No worries. I added
singleClickEdit: true
in the place where i define the coldefs and rowdata stuffs.
If adding singleClickEdit: true doesn't allow you to edit,
then in addition make sure the column which you are trying to edit has
editable: true
or use defaultColDef and set to your grid:
defaultColDef contains the properties that is inherited by all columns.
defaultColDef: {
flex: 1,
minWidth: 100,
editable: true,
},
Is there a way to re-render components upon tab switch? I have this data that loads all its store, which contains specific permissions. Each tab must only contain what was provided for their view. See my screenshot below:
Basically, this loads upon initComponent. The dilemma I'm currently having is that the Backoffice tab has a different permission with the Wombat tab. The idea is when either of them contains a permission say an Edit permission (sCreate), only that role is allowed to show the edit buttons as seen. So Backoffice has sEcommCreate while Wombat has sCreate. When either of them satisfies to true, it simply adds/pushes it to the column to be displayed during initComponent.
if (EcommBackoffice.plugin.Security.getAccess(oMe.sCreatePermission)) {
aColumns.push({
header: 'Action',
xtype: 'actioncolumn',
itemId: 'edit-role-btn',
width: 100,
sortable: false,
resizable: false,
draggable: false,
menuDisabled: true,
items: [{
icon: 'resources/img/editpermissions.png',
tooltip: 'Edit Permissions',
scope: oMe
}],
editor: {
xtype: 'text',
name: 'editRow',
cls: 'banks-delete-row'
}
});
}
How do I filter out the display upon switching on the other tab, and also on load? Currently, once sCreate or sEcommCreate passes its condition, it just adds the buttons on both roles since this is one single store.
Already tried reloading the data store from the controller, but it
only loads the data, and not rerender the components to either
add/remove/show/hide them.
To be more clear, I need to hide/remove the Action column if it has no create permissions assigned to it.
The actioncolumn and all actioncolumn items have a function isDisabled. I would recommend to use that function to enable/disabled the item, e.g.
items: [{
icon: 'resources/img/editpermissions.png',
tooltip: 'Edit Permissions',
isDisabled:function() {
var isWombatTab = (this.up('tabpanel').getActiveTab().text == 'Wombat');
if(isWombatTab) return EcommBackoffice.plugin.Security.getAccess(oMe.sCreatePermission)
else return EcommBackoffice.plugin.Security.getAccess(oMe.sEcommCreatePermission)
},
scope: oMe
}],
isDisabled() will be processed during grid refresh, so whenever you reload the store, the changes should come into effect. To force a refresh without changes to the store, you could of course call grid.refresh() from the activate event of the tabs.
It should then possible to hide the disabled item via CSS. I don't know exactly what it will take (may also depend e.g. on the theme you use), but a first guess is
.x-grid-cell-edit-role-btn .x-item-disabled {
visibility:hidden;
}
Is there a working example available of an ext js ListFilter where the list options are loaded by a remote store. The documentation gives examples of harcoded options like 'Small', 'Medium' and 'large'.
I wish to load these options from a remote store. I found one example here but this modifes the core class ListFilter.js I am looking to avoid that.
http://www.sencha.com/forum/showthread.php?64234-Ext.ux.grid.filter.ListFilter-gt-loaded-store
Thanks,
Kaushik
Here is an example for a filter. The following code snippet would be used in the instantiation block for your filter plugin.
filters: [{
type: 'list',
dataIndex: 'dataInTheStoreName', // use this as the value
single: false, // true for radio buttons
labelField: 'dataInTheStoreLabel', // use this as the label
store: new yourExampleStore()
}.{...your other filters...}]
So just make an ExtJs store object to access your data, and attach it to the list filter.
There are many example of this such as here.
I've created a working fiddle that could be useful for you:
https://fiddle.sencha.com/#view/editor&fiddle/2gp6
Basically you declare the filter with a store (list filter needs boths: lavel and id)
text: 'Eye Color',
dataIndex: 'eyeColor',
filter: {
type: 'list',
store: filterStore,
idField: 'id',
labelField: 'value'
}