Super Simple sample of autocomplete using Jquery and KendoUI (free core)
works fine in sample... http://plnkr.co/edit/BBYXwehUX9cGIbmev2Tf?p=preview
but doesn't work in Web AppBuilder. (I've tried setting it up in postCreate and startup also)
Widget.html
<div> <p>Kendo UI Animal: try A or B <input id="animal" /></p> <br /> <p> jquery UI colors: try R or B <input id="autocomplete1" type="text" name="code" /> </p> </div>
Widget.js
define(['dojo/_base/declare', 'jimu/BaseWidget'],
function(declare, BaseWidget) {
return declare([BaseWidget], {
baseClass: 'jimu-widget-demo',
postCreate: function() {
this.inherited(arguments);
console.log('postCreate');
},
startup: function() {
this.inherited(arguments);
console.log('startup');
},
onOpen: function(){
console.log('onOpen');
if ($("#autocomplete1").autocomplete !== undefined) {
$("#autocomplete1").autocomplete({
source: ["red", "blue", "green"]
});
}
if ($("#animal").autocomplete !== undefined) {
$("#animal").kendoAutoComplete({
dataSource: ["Ant", "Antelope", "Badger", "Beaver", "Bird"],
change: function () {
alert("aA");
}
});
}
}
});
});
The html above is showing html, i wanted to include the actual html.. so here it is..
<div>
<p>Kendo UI Animal: try A or B <input id="animal" /></p>
<br />
<p> jquery UI colors: try R or B
<input id="autocomplete1" type="text" name="code" />
</p>
</div>
Actually after a few more tests it started working.. not sure why..
Hi,
Can you please explain me how did you integrate kendo ui? I mean where you put its JS and css files and how loaded into your widget?
Regards,
Jamil
Hello,
Has anyone been able to integrate Kendo UI into a Web Appbuilder widget yet? I have tried to both run a script in the HTML template which doesn't seem to fire and I have tried to run the code in the widget JS file but I always get a 'is not a function at Object' error. I have tried to add references in the index.html as scripts references and in the init.js in the resources array.
Thanks,
Brad