Select to view content in your preferred language

JQueryUI and KendoUI don't work in Web AppBuilder ?

3180
4
09-30-2015 11:10 AM
casey--cupp
Deactivated User

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");
                }
            });
        }


    }
  
  });
});
0 Kudos
4 Replies
casey--cupp
Deactivated User

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>

0 Kudos
casey--cupp
Deactivated User

Actually after a few more tests it started working.. not sure why..

0 Kudos
JamilNawaz
Emerging Contributor

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

0 Kudos
BradleyNeish
New Contributor

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

0 Kudos