To see how to work with Kendo UI widgets, let us see how to work with widget AutoComplete
Very first you write HTML as below,
Then you initialize HTML to provide Kendo UI functionality as below,
Now if you want to add event to AutoComplete then you can do in either ways,
Or you can add event in other way also. First get the AutoComplete widget
And then using bind method attach event as below,
You will get below codes on putting all the codes together for AutoComplete widget
<html >
<!--In the header of your page, paste the following for Kendo UI Web styles-->
<!--Then paste the following for Kendo UI Web scripts-->
<script type="text/javascript" src="Scripts/jquery.min.js"></script><script type="text/javascript" src="Scripts/kendo.all.min.js"></script>
<script type="text/javascript" src="Scripts/Test.js"></script>My Kendo UI Demo</pre>
<h1>Kendo UI Demo</h1>
<pre>
<input id="FruitsAutoComplete" type="text" /><script type="text/javascript">// <![CDATA[
var data = ["Mango",
"Banana",
"Apple",
"Grapes",
"Guava",
"Orange"];
$("#FruitsAutoComplete").kendoAutoComplete({
dataSource: data
});
var autoComplete = $("#FruitsAutoComplete").data("kendoAutoComplete");
autoComplete.bind("change", onChangeEvent);
function onChangeEvent() {
alert('Change event occurs');
}
// ]]></script>
On running you will get AutoComplete widget as below and on the change event an alert message.
In above sample, I have bound local data source to AutoCompleteBox. You can very much get data from external data source as well. You can create data source from ODATA service as below,
Above we are fetching Title of the movies from ODATA feed of NetFlix. In type we are specifying that service is retuning ODATA and at one time we are asking service to return 10 records.
Next you can set it as data source of AutoComplete as below,
For AutoComplete widget we are setting minimum length to get a suggestion is 3 and Name filed of data source will be used.
Putting all the codes together
<html >
<!--In the header of your page, paste the following for Kendo UI Web styles-->
<!--Then paste the following for Kendo UI Web scripts-->
<script type="text/javascript" src="Scripts/jquery.min.js"></script><script type="text/javascript" src="Scripts/kendo.all.min.js"></script>
<script type="text/javascript" src="Scripts/Test.js"></script>My Kendo UI Demo</pre>
<h1>Kendo UI Demo</h1>
<pre>
<input id="FruitsAutoComplete" type="text" /><script type="text/javascript">// <![CDATA[
var data = new kendo.data.DataSource({
type: "odata", // specifies data protocol
pageSize: 10, // limits result set
transport: {
read: "http://odata.netflix.com/Catalog/Titles"
}
});
$("#FruitsAutoComplete").kendoAutoComplete({
minLength: 3,
dataTextField: "Name",
dataSource: data
});
// ]]></script>
On running you should be getting AutoComplete widget as below,
In this way you can work with AutoComplete widget. I hope this post is useful. Thanks for reading.
Follow @debug_mode
Helping Ninja Technologists 