Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <section>
 <div class="tabs">
   </div>
    
   <div id="divCategory" class="panelBlue tenanciesTile" data-template="tileWrapTemplate" 
                                                      data-bind="source: tileDataSource"></div>
 
<script id="tileWrapTemplate" class="panelBlue" type="text/x-kendo-template">   
    <div class="more">  
        <article data-bind="attr:{class:cssArtWrap }">
            <span>
                <h2 data-bind="text: title"></h2>
                #if(get("introTextCheck")){#
                    <p data-bind="text: introText"></p>
                #}#
                    <fieldset data-bind="attr:{class:cssWrap}">
                        #if(get("rangeSlider")){#
                         <div class="balRangeWrap" data-template="tenanciesRangeSlider" data-bind="source: inputFields"></div>
                        #}else if(get("comboBox")){#
                         <span data-template="tenanciesComboBox" data-bind="source: inputFields"></span>
                        #}else{#
                            <ul id="allInputWrap" data-template="tenanciesTemplate" data-bind="source: inputFields"></ul>
                        #}#
                    </fieldset>
            </span>
        </article>
         #if(get("showMore")){#
          <a href="\\#" data-bind="attr: {class: cssLink} click: moreTiles, visible:isVisible"><span></span>Show More</a>
        #}#
        #if(get("showLess")){#
          <a href="\\#" data-bind="attr: {class: cssLink2} click: lessTiles, visible:isVisible2"><span></span>Show Less</a>
        #}#
    </div>
</script>
<script id="tenanciesTemplate" type="text/x-kendo-template">
    <li>
        <input data-bind="attr: { type: type, name: name, id: id,  class: cssInput, checked: #: checked#} value: value"
                    # if (get("required")) {# required #} # 
                    # if (get("disabled")) {# disabled #} # 
                    # if (get("hidden")) {# hidden #} # 
                    # if (get("lookup")) {# lookup #} # />
        <label data-bind="attr: { for: id, class: cssLabel, id: labelId }, text: label"></label>
    </li>
</script>
 <script id="tenanciesRangeSlider" type="text/x-kendo-template">
    <span>
        <div id="tenancySlider" class="rangeSliderM" data-role="rangeslider"  
                        data-min="-1000" 
                        data-max="1000" 
                        data-small-step="20"
                        data-large-step="20"
                        data-bind="value: val, events:{change: onChange, resize: resizeSliders }">
            <input />
            <input />
        </div>
                <div class="sliderInputs">
                    <input data-role="numerictextbox" 
                            data-min="-1000" 
                            data-max="1000" 
                            data-bind="value: start, events:{change: onChange}" />
                    <input data-role="numerictextbox" 
                            data-min="-1000" 
                            data-max="1000" 
                            data-bind="value: end, events:{change: onChange}" />
                </div>
         </span>
</script>
<script id="tenanciesComboBox" type="text/x-kendo-template">
    <input  placeholder="Choose status..." 
                                        data-role="combobox" 
                                        data-bind="source:comboData" 
                                        data-text-field="text" 
                                        data-index="0"
                                        data-value-field="value" />
</script>    
 </section>
  
  
</body>
</html>
 
var tabsDataSource = [
    {
      "name": "Report Filters",
      "id": "#tab1",
      "title": "Report Filters",
      "cssClass": "active",
      "content": "Content1"
    },
    {
      "name": "Tenant Selection",
      "id": "#tab2",
      "title": "Tenant Selection",
      "cssClass": "tabLabel2",
      "content": "tileWrapTemplate?"
    },
     {
      "name": "Transaction Selection",
      "id": "#tab3",
      "title": "Transaction Selection",
      "cssClass": "",
       "content": "Content3"
    },
     {
      "name": "Display",
      "id": "#tab4",
      "title": "Display",
      "cssClass": "",
       "content": "Content4"
    }
];
var tileDataSource = [
    {
            "id"          : "1",
            "cssArtWrap"  : "panelBlue",
            "title"       : "Tenancies to Include",
            "introText"   : "",
      "inputFields" : [
            {
                "id": "tenanciesInclude1",
                "labelId": "all",
                "name": "tenanciesInclude",
                "label": "All",
                "type": "radio",
                "value": "word",
                "required": false,
                "validationMessage": "",
                "disabled": false,
                "hidden": false,
                "lookup": false,
                "description": " ",
                "cssLabel": "radioLabel",
                "cssInput": "radioInput",
                "placeholder": "",
                "checked": "checked",
                "click": " "
                },
                {
                "id": "tenanciesInclude2",
                "labelId": "active",
                "name": "tenanciesInclude",
                "label": "Active",
                "type": "radio",
                "value": " active",
                "required": false,
                "validationMessage": "",
                "disabled": false,
                "hidden": false,
                "lookup": false,
                "description": " ",
                "cssLabel": "radioLabel",
                "cssInput": "radioInput",
                "placeholder": "",
                "checked": " ",
                "click": " "
                },
                {
                "id": "tenanciesInclude3",
                "labelId": "inactive",
                "name": "tenanciesInclude",
                "label": "Inactive",
                "type": "radio",
                "value": " inactive",
                "required": false,
                "validationMessage": "",
                "disabled": false,
                "hidden": false,
                "lookup": false,
                "description": " ",
                "cssLabel": "radioLabel",
                "cssInput": "radioInput",
                "placeholder": "",
                "checked": " ",
                "click": " "
                }             
      ],
      "cssWrap": "radioGrp2"
    },
    {
      "id": "2",
      "cssArtWrap"  : "panelBlue balRangeWrap",
      "title"     : "Filters",
      "introTextCheck" : true,
      "introText" : "Drag to increase or decrease range",
      "rangeSlider": true,
      "inputFields": [
                    {
                        "id": "",
                        "labelId": "",
                        "name": "",
                        "label": "",
                        "type": "text",
                        "value": "",
                        "required": false,
                        "validationMessage": "",
                        "disabled": false,
                        "hidden": false,
                        "lookup": false,
                        "description": " ",
                        "cssLabel": "",
                        "cssInput": "numericInput k-input",
                        "placeholder": "Enter a number...",
                        "checked": "",
                        "click": " "
                    }
      ],
      "cssWrap": "radioGrp2"
​
    },
    {
      "id": "3",
      "cssArtWrap"  : "panelBlue",
      "title": "More filters for Tenancies",
      "comboBox": true,
      "inputFields": [
                    {
                    "id": "thirdTileGroup1",
                    "labelId": "Combobox1",
                    "name": "",
                    "label": "Combobox",
                    "type": "Combobox",
                    "value": "one",
                    "required": false,
                    "validationMessage": "",
                    "disabled": false,
                    "hidden": false,
                    "lookup": false,
                    "description": " ",
                    "cssLabel": "",
                    "cssInput": "comboInput",
                    "placeholder": "",
                    "checked": "",
                    "dataRole": "combobox",
                    "click": " "
                    }       
      ],
      "comboData":[
                {
                    "text" : "Ready", 
                    "value" : "1" 
                },
                {
                    "text" : "Start", 
                    "value" : "2" 
                },
                {
                    "text" : "Sweet", 
                    "value" : "3" 
                },
                {
                    "text" : "Restart", 
                    "value" : "4" 
                },
                {
                    "text" : "Already", 
                    "value" : "5" 
                },
                {
                    "text" : "Water", 
                    "value" : "6" 
                },
                {
                    "text" : "Bubbles",
                     "value" : "7"
                }
            ],
      "cssWrap": "radioGrp2",
      "showMore": true,
      "showLess" : true,
      "showBtn1": true,
      "showBtn2": false,
      "cssLink": "moreTiles",
      "cssLink2": "lessTiles"
    }
];
​
var tabsVM = kendo.observable({
     tabsDataSource: tabsDataSource
});
kendo.bind($('#tabsWrap'), tabsVM);
$(".tabs").kendoTabStrip({
                select: function(e){
                  var data = this.dataSource.at($(e.item).index());
                  var template = kendo.template($("#tileWrapTemplate").html()); 
                  $(e.contentElement).html(template(data));
                  kendo.bind(e.contentElement, data);
                },
                dataTextField: "name",
                dataContentField: "content",
                dataSource: tabsVM.tabsDataSource,
                animation: {
                    open: {
                        effects: "fadeIn"
                    }
                }
            });
​
    var tilesVM = kendo.observable({
         start:-1000,
         end:1000,
         val:function(){
          return [this.get("start"),this.get("end")];
​
        },
        onChange:function(e){
            if(e.values==="undefined"){
              sliderVM.set("val",[this.get("start"),this.get("end")]);
              slider.refresh();
          }
            else{
          var values = e.values;
              this.set("start",values[0]);
              this.set("end",values[1]);
            }
         },  
        dataSource: tileDataSource,
        tileDataSource: tileDataSource,
         wrapArticle: function(){
           var article = $( "#divCategory article" );
           var items       = $( 'div.more' );
           var currentItem = items.filter( '.active' );
           var nextItem    = currentItem.next( 'div' );
           for( var i = 0; i < article.length; i += 3 ) {
              article.slice(i, i + 3).wrapAll( "<div />" );
              console.log( "wrapAll called!" );
            }
          //$("#divCategory .more").not(".more:first").hide();
          $('#divCategory .more:first, #divCategory .more:has(a.moreTiles):first').addClass('active');
          $("#divCategory .more a.moreTiles:first").show();
          $("#divCategory .more a.lessTiles").hide();
​
          currentItem = nextItem.not(':first').removeClass('active'); 
​
          $('.more').filter(function() {
            return $.trim($(this).text()) === '';
          }).remove();
        },
        moreTiles: function(e){
          var items        = $( 'div.more' );
          var currentItem  = items.filter( '.active:last' );
          var nextItem     = currentItem.nextAll( 'div.more' ).slice( 0, 2 );
          var firstShowBtn = $( 'a.moreTiles:visible:first' );  
              if( nextItem ){
                currentItem = nextItem.toggleClass( 'active' );
              }
    
            e.preventDefault();
            console.log("Show more active!");
        },
        isVisible: true,
        isVisible2: false,
        show: function() {
            this.set("isVisible2", true);
            this.set("isVisible", false);            
        },
        hide: function() {
            this.set("isVisible2", false);
            this.set("isVisible", true);
        },
        comboboxLoad: function(){
          $(".comboInput").kendoComboBox({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: tileDataSource,
            filter: "startswith", /* endswith, contains */
            index: 0
        });
        }
        
  });
   //tileDataSource.read();
    kendo.bind($("#divCategory"), tilesVM);
    
var sliderVM = kendo.observable({
          start:-1000,
          end:1000,
          val:function(){
            return [this.get("start"),this.get("end")];
            
          },
          onChange:function(e){
            if(e.values==="undefined"){
              sliderVM.set("val",[sliderVM.get("start"),sliderVM.get("end")]);
              slider.refresh();
            }
            else{
              var values = e.values;
              this.set("start",values[0]);
              this.set("end",values[1]);
            }
         }
            
     
          });
kendo.bind($(".balRangeWrap"), sliderVM);
​
$(".comboInput2").kendoComboBox({
            dataSource: [
                {
                  "text" : "Ready", 
                  "value" : "1" 
                },
                {
                  "text" : "Start", 
                  "value" : "2" 
                },
                {
                  "text" : "Sweet", 
                  "value" : "3" 
                },
                {
                  "text" : "Restart", 
                  "value" : "4" 
                },
                {
                  "text" : "Already", 
                  "value" : "5" 
                },
                {
                  "text" : "Water", 
                  "value" : "6" 
                },
                {
                  "text" : "Bubbles",
                   "value" : "7"
                }
            ],
            dataTextField: "text",
            dataValueField: "value",
            filter: "startswith", // endswith, contains
            index: 0
        });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
savask2011pro
0viewers