Angular-kendo with Bootstrap look and feel

Question

I am trying to build a UI with Kendo UI and angular-kendo. But don't want to use Kendo CSS. Want a Bootstrap integration.

This link below gives information on how to do this: docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-twitter-bootstrap

and there is a sample demo page: demos.telerik.com/kendo-ui/bootstrap/

Now what we observed from the demo page and the instructions is that the Bootstrap works with JQuery coding. Though we are OK with jQuery as a dependency to Kendo UI, we don't want to write code in JQuery. We want to use Angular directives only.

We noticed that the demo page shown above draws a dropdown box like this:

 <div id="configurator-wrap" class="col-sm-9 hidden-xs">
      <div id="configurator" class="row">
                  <label class="col-sm-4">
                      <div class="description">Dimensions</div>
                      <select id="dimensions">
                      </select>
                  </label>
     </div>
 </div>

Bootstrap mandates a JQuery like this:

 <script>
      $("#dimensions").kendoDropDownList({
          dataTextField: "text",
          dataValueField: "value",
          value: "common",
          dataSource: [
              { text: "Default", value: "common" },
              { text: "Bootstrap", value: "common-bootstrap" }
          ],
          change: function(e) {
              var commonLink = Application.getCurrentCommonLink();
              Application.updateLink(commonLink, Application.getCommonUrl(this.value()));
          }
      });
  </script>

Instead we want to be able to use the angular-kendo way of writing drop down. We will include the Bootstrap CSS etc, and it should give the Bootstrap look. Like this:

<select kendo-drop-down-list>
  <option value="1">Thing 1</option>
  <option value="2">Thing 2</option>
  <option value="3">Thing 3</option>
</select>

as given in this demo,(but this is using kendo CSS files): http://kendo-labs.github.io/angular-kendo/#/

Answer 1

When it comes to the look and feel of Kendo UI it is all driven by the CSS themes. This means that no matter if you use the jQuery approach, the AngularJS approach, or whatever approach you want to take, the themes drive the appearance of the components.

So, in the Kendo UI Bootstrap demo you see that the following CSS files are referenced:

<link href="[...]/kendo.common-bootstrap.min.css" rel="stylesheet">
<link href="[...]/kendo.bootstrap.min.css" rel="stylesheet">
<link href="[...]/kendo.dataviz.min.css" rel="stylesheet">
<link href="[...]/kendo.dataviz.bootstrap.min.css" rel="stylesheet">

These can all be found in your local installation directory of Kendo UI. There's nothing special to specifically work with AngularJS in this case.

All you would need to do for this particular demo is just to replace the jQuery instantiation of Kendo UI components with angular-kendo versions instead.

Also, side-note: If you use any of the Bootstrap JS plugins you will also require jQuery as they are dependent on jQuery as well.