How to check if Kendo UI ComboBox is Dirty (i.e. value has been changed from default value)?

Question

I have a simple Kendo ComboBox :

HTML:

<div>
    <h5>Brand</h5>
    <div id="combo1"></div>
</div>

JavaScript:

j$("#combo1").kendoComboBox({
    dataTextField: "name",
    dataValueField: "id",
    value: "Original_Brand_Value",
    dataSource: {
        transport: {
            read: {
                url: "..."
            }
        }
    }
});

Note that the ComboBox has a default initial value of "Original_Brand_Value" . How do I check if the Kendo ComboBox is "dirty" ie currently has a value other than "Original_Brand_Value" ? Seems like I should be able to do something like:

j$("#combo1").data("kendoComboBox").isChanged() 
**OR**
j$("#combo1").data("kendoComboBox").dataSource.isChanged() 

But I have searched far and wide and there seems to be no such method. There has to be some way to do this, this must be a common use case.

Answer 1

You can use the value() method to check the current widget value and compare it to the initial value, but probably this approach is not appropriate, as it is too obvious.

http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#methods-value

Another possible option is to subscribe to the change event of the widget and raise a custom dirty flag in a JavaScript variable. You could even set an expando on the ComboBox widget object.

http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#events-change

On a side note, the ComboBox is an input widget that should hold and submit a form value. That's why it should be created from an input or select element, not from a div .

Answer 2

As you have concluded, the kendoComboBox widget itself does not track whether it has been changed state. The datasource does have a hasChanges() method but making a selection does not change the datasource, it just gets a different value from it. However the kendoComboBox does raise events that you can use, for example 'select' that is fired when the user makes a selection: http://docs.telerik.com/kendo-ui/api/javascript/ui/combobox#events-select

For example you could add this to your comboBox configuration:

select: function(e) {
    var item = e.item; //jQuery object representing the selection
    isDirty = true; //Set a flag or call a function as required. Perhaps check the item as well to make sure it isn't the default value.
}

Alternatively there is also a method called 'select' that can be used to get or set the selected item. You can use this to get the selected index (if it is not zero, then the comboBox has a non-default selection):

var selectedIndex = j$("#combo1").data("kendoComboBox").select();

This isn't the only way. If you were to use MVVM declarative syntax with the comboBox bound to a property on a kendo.Data.Model (which is observable), any changes will automatically set the dirty flag on that model: http://docs.telerik.com/kendo-ui/api/javascript/data/model#fields-dirty

MVVM is a very powerful design pattern to use with kendo but I think going into more detail is outside the scope of what you're asking.