Sunday, 8 September 2013

How do I clear / reset a Kendo DropDownList with only javascript?

How do I clear / reset a Kendo DropDownList with only javascript?

I have a Kendo DropDownList (name=Function) that contains 3 options. When
one option is selected, it triggers an ajax call to get data to populate a
different DropDownList (name=Parents). This works as-expected. However, if
the user then changes the original DropDownList "Function" back to a
different selection, I need to clear/reset (remove all options) and
disable the "Parents" DropDownList.
function LoadKendoDropdownContents(dropdownBoxId, data) {
var dropdownBox = $("#" + dropdownBoxId).data("kendoDropDownList");
if (data === "" || data === null || $.isEmptyObject(data)) {
var dataSource = [];
}
else {
var dataSource = data;
}
dropdownBox.setDataSource(dataSource);
}
It's really the "var dataSource = []" that is giving me problems. It's
like the "Parents" DropDownList isn't refreshing/rebinding when that is
applied. All of the options except the one that was selected get removed,
but how do I remove the one that was previously selected? I want it to be
"empty" again.
Thank you.

1 comment:

  1. I think your problem is about if else statement
    try this:
    var dataSource;
    if (data === "" || data === null || $.isEmptyObject(data)) {
    dataSource = [];
    }
    else {
    dataSource = data;
    }
    dropdownBox.setDataSource(dataSource);
    }

    ReplyDelete