We Keep Coding

Update a third component on focus/click based on the selected values of two other components

My form.io panel looks like this JSON. I have a panel wherein there are components such as dropdowns & textfields.
I am trying to get a calculated value to a textfield component based on the selected values on two other components. The value should be populated either at the time of getting focus or click event on the textfileld component.
I have tried to use calculateValue on the textfield but nothing seems to happen. No errors as well. The component with key dental in the link provided above is where you will find the javascript i have tried.

In form.io's calculateValue, you need to be setting value in order to update the field.
value=data.param1+data.param2;
I've got an example for a text field here that worked for me immediately:
{
"label": "Select + Select1",
"tableView": true,
"calculateValue": "value=data.select+data.select1",
"key": "textText2",
"type": "textfield",
"input": true
},
You may also be running into issues because of how you're getting your data values. data. is the recommended way to get other data values in calculateValue.

Vue.js - Unable to trigger DOM update

so I have a complex nested structure that is like so in my Vue app's data:
{
x: {
y: [{
z: {
a: 1
}
}]
}
}
Although I used v-model in a v-for with the child property, setting .z.a = 2 doesn't seem to trigger this in the UI. I figured ok, must be that I'm mutating a property without alerting Vue, no biggie I just need to use Vue.set.
So I tried the following:
Vue.set(app.x.y[0].z, "a", 2)
Vue.set(app.x.y[0], "z", {a:2})
Vue.set(app.x.y, 0, app.x.y[0]) // app.x.y[0] is definitely {z:{a: 2}}
Vue.set(app.x, "y", app.y)
app.x.y = app.x.y.map(_ => _)
While these all usually do the trick for me, in this case it doesn't seem to work. If it changes things, I'm using v-model instead of a traditional prop, so it would be synced back to the app. I wonder if perhaps this disassociates the app.x and the actual data property for x.
I'm looking for a way to trigger a DOM update or properly set the value in Vue. I've also tried an app.$forceUpdate() to no avail :/
EDIT:
While I wasn't able to make Vue observe the change by itself, I found that I had a function that was populating z after it had been initialized to {}. I assume Vue set watchers on z the moment it was initialized, and so did not observe any further changed (i.e. adding a in the next line). Changing this to populate every possible property on initialization, combined with any of the .set's above and a $forceUpdate, I was able to trigger a DOM update. It's a temporary workaround though and I'd really like to be able to have Vue automatically observe this update.

You can try the vue computed property or watcher. This will automatically detect the changed in your data and update the v-model data you have.
In this example a change in the returned value of message will automatically be applied to the input.
<input v-model="message">
computed: {
message(){
return {x:{y:[1,2,3]}}
}
}

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

Sitecore SPEAK UI programmatically set selected item of ComboBox

How should I set the selected item of a ComboBox component in Sitecore SPEAK UI?
My ComboBox is populated by a QueryDataSource component which is looking at a folder of items in my core DB.
I can retrieve the currently selected value (which is text, not an ID) using the following code:
var value = this.MyComboBoxId.viewModel.selectedItemId();
and I would have expected to be able to set the selected value using:
var value = "SomeValueWhichExistsInTheList";
this.MyComboBoxId.viewModel.selectedItemId(value);
but this doesn't seem to work. The documentation here mentions using
rebind(items, selectedItem, selectedValue, displayFieldName, valueFieldName)
but I don't want to have to re-populate it, just change the selected item. My code is within the initialize method of my model.
Edit
I found that if the ComboBox does not have DisplayFieldName or ValueFieldName values set in the rendering properties you have to set the value to the appropriate itemId. DisplayFieldName and/or ValueFieldName should be set to the name of a field you have created - you cannot bind to the item name.

In the initialize method, use the following code to set the value:
app.yourQueryDataSource.on("change:hasItems", function () {
app.yourComboBox.set("selectedValue", yourValue);
});

Above approach did not work for me and hence i used the
app.<yourcontrolid>.viewModel.rebind()
function as documented in Sitecore SPEAK combobox documentation and that worked.

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