I'm trying to update an ag-Grid row data the following way:
this.table.api.updateRowData({
update: [response.data]
})
The updating works fine, the cells get the updated values. However, Ag Grid is not re-evaluating the class of the row. Additionally, I get an error message:
ag-Grid: could not find data item as object was not found
Here is my rowClassRule:
rowClassRules: {
"row-disabled": function(params) {
if (params.data.status != 1) {
return true
}
}
}
What am I doing wrong here and how can I get ag Grid to update the class as well? I have tried using: rowNode.setData() which was working perfectly (updating the cell value + class) - but I can't use it because it's not refreshing the filters, unfortunately.
After setting the new row data, since you are using rowClass feature you have to use api.redrawRows()
rowNode.setData() being an api method is closely tied with ag-grid change detection mechanism and would automatically trigger api.refreshCells() for you. But if you are manually updating the data set, you need to invoke api.redrawRows() for styles to change.
As per docs -
Use redraw row if you want to create the row again from scratch. This
is useful when you have changed a property that only gets used when
the row is created for the first time such as:
Whether the row is fullWidth or not.
The cellRenderer used for any cell (as this is specified once when the cell is created).
You want to specify different styles for the row via the callbacks getRowStyle() or getRowClass().
Example here - redraw nodes
Related
I'm using a server side's vue-tables-2 component for representing information from the DB. This table contains numeric columns, textual columns and date columns.
My problem is with the numeric columns filtering. I want to add option for range filtering (>,>=,<,<=,=,between, etc).
The only documentation i could find is this:
https://www.npmjs.com/package/vue-tables-2#server-side-filters
Server Side Filters
A. use the customFilters option to declare your filters, following this syntax:
customFilters: ['alphabet','age-range']
B. the same as in the client component.
But i don't understand few things:
Where is 'age-range' implemented?
Where do I specify the filter of each column?
Do i have to use the vuex\ bus?
Can someone please help me with the implementation?
Thanks
Custom Filters are external filters implemented by the consumer of the package. However, they can be embedded in the table instead of the text filter using slots (See Slots documentation).
Since the filter is external to the package, it is your responsibilty to let the package know when it has changed, using either the event bus or Vuex.
In other words, the only interface between the package and the custom filter is the event. The package has no knowledge or control of when or under which circumstances the event is emitted. It is passively listenning for a change and merges the query it receives with the native one.
For example, say you wrote an age-range-filter component that emits a changed event, and you want it to replace the age column native text filter:
<v-server-table ... :columns="['name','age']" :options="tableOptions">
<div slot="filter__age">
<age-range-filter #changed="filter"></age-range-filter>
</div>
</v-server-table>
On your vue instance:
data:{
tableOptions:{
filterable:['name'] // omit 'age' as it will be replaced by your component
customFilters:['age-range']
}
},
methods:{
filter(query) {
VueEvent.$emit('age-range', query);
}
}
I need to make dropdown value in Ag-Grid dynamically changed based on value/condition of another column.
Already tried to toggle it with a function, extend it with Vue framework to make it reactive, and also with gridOptions.api.setColumnDefs but still no luck. (value changed on console but not rendered).
here's a snippet and screenshot.
colDef = [
{'headerName': 'Steps',
cellEditor: 'select',
cellEditorParams: {
values: store.globalData.stepsValues } // global var, change works on console
}]
Steps column dropdown values here needs to dynamically changed based on a condition.
Finally I made them reactive by injecting colDef parameter to Vue component, so it's now a reactive data.
After each cell change, I am sending the cell's content to the backend, getting updated meta object and am applying it to the cell. The new meta object holds a different colour for the renderer. I need to retrigger cell rendering after I've set the meta data. I found the event afterSetCellMeta() but I can't find a way to rerender a single cell only. Just for reference, this is the function I am using:
function updateCell(data) {
var i = 0;
var to = data.length;
for (i; i<to; i++) { // Go trough all changed cells, update their meta object.
var row = data[i].row;
var col = data[i].col;
var metaObject = data[i];
console.log('About to set: ', metaObject);
vm.hot.setCellMetaObject(row, col, metaObject);
// I need to update the renderer here.
}
}
Anyone had done that? Any ideas are appreciated, since I'm out of any.
Handsontable doesn't just re-render a single cell. Any event that triggers a change will re-render the entire table. This is done on purpose to make sure the table is "state-less" and always reflecting what the data represents. With that said, what's the problem with re-rendering the whole table? It should be pretty quick since HOT uses virtual rendering but are you seeing issues there?
If what you mean is that you want to update your renderer, then where you have that comment on updating the renderer you can insert:
hot.updateSettings({
cells: newCellsDefinition // here you would define a new renderer for whatever cells you want to change the renderer for
});
I am trying to disable option items in a dijit/Form/FilteringSelect control that is populated using a store.
Following this guide: http://dojotoolkit.org/documentation/tutorials/1.9/selects_using_stores/
It seems to be only possible if the Select control was created without using a store. I have deduced this from debugging the FilteringSelect example. I have tried two methods to disable an item:
Following the advice in this thread: How to disable a single option in a dijit.form.Select?. However, the "stateStore" store object in the FilteringSelect example does not have an 'options' property.
Attempting to access the appropriate element in the store object. For example, in the FilteringSelect example, I do the following:
var optionItem = stateStore.get("AZ");
optionItem.disabled = true;
stateStore.put(optionItem);
select.startup();
Neither method seems to work, so it seems that the only way to have disabled items in Dijit Select controls is to use the options property instead.
Thanks in advance for a solution!
There is a difference between the data in your store (which is in fact the business data) and your rendered data (containing view logic). If you use a store, you're actually feeding your rendered data with your store.
To alter the rendered data (= the options in your select), you need to use the getOptions(idx) method of the dijit/form/Select as you can read in the API documentation. To alter the disabled state of the option you can use:
registry.byId("mySelect").getOptions(myId).disabled = true;
That's all you need. Changing the store data won't help, since it represents business data, not view data. I also made an example JSFiddle where the second option is disabled.
for dojo 1.10 and upto 1.x latest version, you need to add a line of code to update the selection UI:
registry.byId("mySelect").getOptions(myId).disabled = true;
registry.byId("mySelect").updateOption(myId);
I have the following html that is bound to an object containing id and status. I want to translate status values into a specific color (hence the converter function convertStatus). I can see the converter work on the first binding, but if I change status in the binding list I do not see any UI update nor do I see convertStatus being subsequently called. My other issue is trying to bind the id property of the first span does not seem to work as expected (perhaps it is not possible to set this value via binding...)
HTML:
<span data-win-bind="id: id">person</span>
<span data-win-bind="textContent: status converter.convertStatus"></span>
Javascript (I have tried using to modify the status value):
// persons === WinJS.Binding.List
// updateStatus is a function that is called as a result of status changing in the system
function updateStatus(data) {
persons.forEach(function(value, index, array) {
if(value.id === data.id) {
value.status = data.status;
persons.notifyMutated(index);
}
}, this);
}
I have seen notifyMutated(index) work for values that are not using a converter.
Updating with github project
Public repo for sample (not-working) - this is a really basic app that has a listview with a set of default data and a function that is executed when the item is clicked. The function attempts to randomize one of the bound fields of the item and call notifyMutated(...) on the list to trigger a visual updated. Even with defining the WinJS.Binding.List({ binding: true }); I do not see updates unless I force it via notifyReload(), which produces a reload-flicker on the listview element.
To answer your two questions:
1) Why can't I set id through binding?
This is deliberately prevented. The WinJS binding system uses the ID to track the element that it's binding to (to avoid leaking DOM elements through dangling bindings). As such, it has to be able to control the id for bound templates.
2) Why isn't the converter firing more than once?
The Binding.List will tell the listview about changes in the contents of the list (items added, removed, or moved around) but it's the responsibility of the individual items to notify the listview about changes in their contents.
You need to have a data object that's bindable. There are a couple of options:
Call WinJS.Binding.as on the elements as you add them to the collection
Turn on binding mode on the Binding.List
The latter is probably easier. Basically, when you create your Binding.List, do this:
var list = new WinJS.Binding.List({binding: true});
That way the List will call binding.as on everything in the list, and things should start updating.
I've found that if I doing the following, I will see updates to the UI post-binding:
var list = new WinJS.Binding.List({binding: true});
var item = WinJS.Binding.as({
firstName: "Billy",
lastName: "Bob"
});
list.push(item);
Later in the application, you can change some values like so:
item.firstName = "Bobby";
item.lastName = "Joe";
...and you will see the changes in the UI
Here's a link on MSDN for more information:
MSDN - WinJS.Binding.as
Regarding setting the value of id.
I found that I was able to set the value of the name attribute, for a <button>.
I had been trying to set id, but that wouldn't work.
HTH
optimizeBindingReferences property
Determines whether or not binding should automatically set the ID of an element. This property should be set to true in apps that use Windows Library for JavaScript (WinJS) binding.
WinJS.Binding.optimizeBindingReferences = true;
source: http://msdn.microsoft.com/en-us/library/windows/apps/jj215606.aspx