We Keep Coding

ag-Grid RowClassRule not updating after using updateRowData

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

Get Selected Record from ListView

I'm using the Kendo UI ListView, using MVVM bindings. The definition of the listview looks like:
<tbody id="listview" data-role="listview"
data-template="ListItemTemplate" data-selectable= "true"
data-bind="source:categoriesDataSource, events:{change:onListChange}">
The rows of the listview are <tr> rows bound to the following view model:
var viewModel = kendo.observable({
categoriesDataSource: new kendo.data.DataSource({
data: #(Html.Raw(JsonConvert.SerializeObject(Model.ItemCategories)))
})
});
I'm converting the array of JSON objects directly; this works out great. However, I also have a change event defined and that gets executed correctly, but I don't know how to grab the values of the currently selected record. Is there a way to get that from the underlying data source? I was trying the following event handler in the view model, which the code runs but the values are not of the selected record:
onListChange: function(e) {
this.set("ID", e.data.ID);
this.set("ParentItemCategoryTypeID", e.data.ParentItemCategoryTypeID);
this.set("Code", e.data.Code);
this.set("Name", e.data.Name);
this.set("IsActive", e.data.IsActive);
this.set("Sequence", e.data.Sequence);
}
How do I get the values of the currently selected record?

Take a look at this I made for u
onListChange: function(e) {
var index = e.sender.select().index();
var item = e.sender.dataSource.view()[index];
console.log(item); // item here is the currently selected list item (ObservableObject))
}

There is dataItem method to get the data item specified for kendo widgets.
http://docs.telerik.com/kendo-ui/api/javascript/ui/listview#methods-dataItem
onListChange: function(e) {
console.log(e.sender.dataItem(e.sender.select()));
}

Meteor.js event on client data redrawn/update

Is there a way to know on the client side when the data has been re-rendered?
I am using aldeed:tabular package and the problem I'm having is that when the data changes, I loose my selected highlighted row because the table is completely redrawn.
So, I need to catch this re-rendering event in order to re-highlight my selected row.

When you create your data table options, add a callback function for the drawCallback property, documented here
Like so:
TabularTables.MyTable = new Tabular.Table({
// other DT properties...
drawCallback: function( settings ) {
// do your magic here
}
});

Nested Datasources in Kendo UI

Does kendo ui support nested Datasources?
I have a table within which I need one of the columns to have a nested table. I am not using json to populate either.
In whatever little documentation I've been able to find it says that nested datasources arnt supported but those use json.
If someone could provide an example of how to implement this, it would be very helpful.

short answer: yes, the HierarchicalDataSource is just am immplementation of the normal datasource that nests. in other words each "node" is a instance of a datasource.
Kendo API Doc
there isn't a ton of documentation of how the HierarchicalDataSource works; I personally had to mess around a lot in the source code to get a handle on it. Kendo only uses it for the treeview and it seems to be built specifically for it. However, You can more or less get it behave how you want by altering the Node model passed into it.
You cannot just use this dataSource with any widget, the widget needs to support it internally. I personally had to create my own listview implemenation to work with it because i wanted nested CRUD .

This is a simple listview implementation that covers a nested template. While is not perfect it seems to be the simplest way to manage this challenge. I would also suggest that the question lacks clarity. I am reaching to answer what I believe to be the obstacle.
// Parent ListView
<div id="parent-listview"></div>
// Parent template
<script id="parent-template" type="text/x-kendo-template">
<a>#=ParentDescription#</a>
// Child ListView
<div id="child-listview-#=Id#"></div>
</script>
// Child template
<script id="child-template" type="text/x-kendo-template">
<a>#=ChildDescription#</a>
</script>
// Bind Parent
$("#parent-listview").kendoListView(
{
template: $("#parent-template").html(),
data : parentData
dataBound: function(e) {
// Bind children
$.each(this.dataItems(), function(idx, item) {
bindChildListView(item);
})
}
});
// Bind each child item
function bindChildListView(data) {
$("#child-listview-" + Id).kendoListView({
template: $("#child-template").html(),
dataSource: data.ChildItems
})
}
NOTE I have a simple int property called Id on my data objects but you can use the uid of the row if you need to or something else.

Dojo 1.9: Dijit: Disabling option items in a dijit/Form/FilteringSelect that was populated using a store

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);