Dynamically Update the DataSource

[Tony]

Hi guys,

I was looking for a way to update the dataSource of the DropDownList dynamically, without recreating the control again. Take this code from your DropDownList example:

<input id="dropdownlist" />

 

<script type="text/javascript">

$(document).ready(function() {

    $("#dropdownlist").kendoDropDownList([{text: "Item1", value: "1"}, {text: "Item2", value: "2"}]);

});

</script>

Do i need to recreate the dropdownlist input, or is there an easy way to replace the dataSource of the control and have it rebind?

Also, is there more documentation or complex examples coming before November, or will this be released in November along with the new controls?

Thanks,
Tony

[Georgi Krustev]

Hello Tony,

 
You can change the date like so:

var combobox = $("#input").data("kendoComboBox");

//change data
combobox.dataSource.data([{text: "i1", value: "1"}, {text: "i2", value: "2"}, {text: "i3", value: "3"}])

//reevaluate the data
combobox.dataSource.query()

//clear combobox selection.
combobox.value("")

About November release - we will introduce more components and more examples. I will suggest you check our roadmap.

Regards,
Georgi Krustev
the Telerik team

[Nick]

What if the DataSource you provide is empty? From my experience, when you call `query` on the dataSource, it then returns it to a previous state.

[Georgi Krustev]

Hello Nick,

 
In this case you will need to call read() method. It will re-populate the dataSource and will hit the server if the transport is remote.

Kind regards,
Georgi Krustev
the Telerik team

[Nick]

Can I do this then?

dropDown.dataSource.data([]);

dropDown.dataSource.read();

I need to be able to empty the datasource so I can dynamically add new items.