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