Test Filtering Kendo Tabstrip

by buggermama

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="listView"></div>
<div id="tabStrip"></div>

JavaScript

var currentState;
     currentState = "California";
     var stateSource = [
         { state: "Minnesota" }, { state: "California" }, { state: "Florida" },
];  

 var citySource = [{
            state: "Minnesota",
            title: "Minneapolis",
            content: "some Minneapolis text"
        },
        {
            state: "Minnesota",
            title: "Duluth",
            content: "some Duluth text"
            
        },
        {
            state: "California",
            title: "San Diego",
         content: "some San Diego {{'a' + 'b'}} text"
        },
        {
            state: "California",
            title: "Los Angeles",
               content: "some LA text"
        },
               {
            state: "Florida",
            title: "Orlando",
               content: "some Orlando text"
        },
          {
            state: "Florida",
            title: "Miami",
               content: "some Miami text"
        }
             ]; 

 var kendoDS = new kendo.data.DataSource({
        data: citySource,
     filter: { field: "state", operator: "eq", value: currentState }
    });

$("#listView").kendoListView({
          template: "<button class='state'>${state}</button>",
          dataSource: stateSource,
          selectable: true,

      });

 var tabs = $("#tabStrip").kendoTabStrip({
            dataTextField: "title",
            dataContentField: "content",
            dataSource: kendoDS,
     }),
     tabStrip = tabs.data("kendoTabStrip");
       

  $("#listView").on("click", ".state", function () {
            selectState = $(this).text();
            console.log(selectState); 
      
      for (var i = 0, len = $("#tabStrip > .k-tabstrip-items li").length; i < len; i++) {
          tabStrip.remove(i);
      }
      
      kendoDS.filter( {
          field: "state",
          value: selectState,
          operator: "eq"
      });          
          
  });