Handle change event for all DevExtreme input widgets

Question

I am looking for a way to track if form fields have been modified using DevExtreme components. I thought I could bind all of them with a single event listener:

$('input').change(function () {
    console.log("Change detected.");
});

While this fires for ordinary <input> elements, the DevExtreme components (which all use an underlying hidden <input> element) do not. The components have an onValueChanged field that can have a function assigned, but the idea is to not have to do that to each and every control. I have forms with several dozen dxTextBox, dxSelectBox, dxDateBox, etc.

Answer 1

DevExtreme widgets provide the defaultOptions(rule) method, which allows setting default configuration options for a specific component.

For example:

DevExpress.ui.dxTextBox.defaultOptions({ 
    device: { deviceType: "desktop" },
    options: {
        onValueChanged: function(e) {
           console.log("Change detected.");
        }
    }
});