CODEWITHSUNDEEP
angularjskendo-uikendo-tabstrip
user1076698
user1076698

Reputation: 691

kendo tabstrip click event using angular js

I am using kendo tabstrip in my application using angular js. The tabstrip and the contents appear fine.

Can i get the tab events invoked from angular or set events through k-options?

Help needed

Upvotes: 1

Views: 4271

Answers (2)

Mastro
Mastro

Reputation: 1497

I use scopeless, but along the same lines as Joe mentioned...

HTML: if you're using $scope just remove the "vm."

<div kendo-tab-strip="vm.tabstrip" k-options="vm.tabOptions" k-content-urls="[null, null]">

CONTROLLER: (if your using $scope, just replace "vm" with "$scope"

vm.tabOptions = {
            select: function (e) {
                console.log("Selected: " + e.item.innerText);
            },
            activate: function (e) {
                console.log("Activated: " + e.item.innerText);
            },
            show: function (e) {
                console.log("Shown: " + e.item.innerText);
            },
            contentLoad: function (e) {
                console.log("Content loaded in " + e.item.innerText);
            },
            error: function (e) {
                console.log("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
            }
        };

Upvotes: 8

Joe
Joe

Reputation: 5487

If you have a tabstrip set up you can handle events through k-options

<div kendo-tab-strip k-options="configOptions" k-content-urls="[ null, null]">




<script>
  angular.module("KendoDemos", [ "kendo.directives" ]);
  function MyCtrl($scope) {
      $scope.hello = "Hello from Controller!";
      $scope.configOptions = {
         change: function(e) {
             console.log("changed");
         }
      }
  }
</script>

Is that what you are looking for?

Upvotes: 2

Related Questions