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 rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css"/>
    
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
<div id="example">
  <div class="demo-section k-content">
    <ul id="fieldlist">
      <li>
        <label for="clientType">System Type</label>
        <input id="clientType" style="width: 100%;" />
      </li>
      <li>
        <label for="dataType">Filter Type</label>
        <input id="dataType" disabled="disabled" style="width: 100%;" />
      </li>
      <li>
        <button class="k-button k-primary" id="get">Filter</button>
      </li>
    </ul>
  </div>
<br>  
  
  
<div id="grid"></div>
</body>
</html>
 
#fieldlist {
                   margin: 0;
                   padding: 0;
               }
       
               #fieldlist li {
                   list-style: none;
                   padding-bottom: 1.5em;
                   text-align: left;
               }
       
               #fieldlist label {
                   display: block;
                   padding-bottom: .3em;
                   font-weight: bold;
                   text-transform: uppercase;
                   font-size: 12px;
               }
 
var data;
var gridColumns;
var grid;
var clientType = [{"typeID":1,"typename":"System Automatic"},
                  {"typeID":2,"typename":"System Testing"},
                  {"typeID":3,"typename":"System Pocket"}]
​
var dataType = [{"typeID":1,"datatypeID":1,"datatypename":"Client Information"},
                {"typeID":1,"datatypeID":2,"datatypename":"Client Setting"},
                {"typeID":1,"datatypeID":3,"datatypename":"Client General details"}]
​
​
$(document).ready(function() {
  var cType = $("#clientType").kendoComboBox({
    filter: "contains",
    placeholder: "Select system type...",
    dataTextField: "typename",
    dataValueField: "typeID",
    dataSource: {
      data:clientType
    }
  }).data("kendoComboBox");
​
  var dType = $("#dataType").kendoComboBox({
    autoBind: false,
    cascadeFrom: "clientType",
    filter: "contains",
    placeholder: "Select filter type...",
    dataTextField: "datatypename",
    dataValueField: "datatypeID",
    dataSource: {
      data:dataType
    }
  }).data("kendoComboBox");
​
​
​
  $("#get").click(function() {
    var clientInfo = cType.value();
    if(clientInfo==1)
    { 
      data = [
        {"_type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":11,"UnitPrice":14.0000,"quanity":12},
        {"_type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":42,"UnitPrice":9.8000,"quanity":10},
        {"_type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":72,"UnitPrice":34.8000,"quanity":5},
        {"_type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10249,"ProductId":14,"UnitPrice":18.6000,"quanity":9}];
​
      gridColumns = [
        {field:"_type", title:"Type",width:200,locked:true},
        {title:"test",
         columns:[
           {field:"Discount", title:"Discount",width:200},
           {field:"OrderId", title:"Order Id",width:200},
           {field:"ProductId", title:"Product Id",width:200},
           {field:"UnitPrice", title:"Unit Price",width:200},
           {field:"quanity", title:"Quanity",width:200}]
        }];  
      if(!grid){
        grid = $("#grid").kendoGrid({
          columns   :gridColumns,
​
          dataSource:{
            data:data
          },
          height:300,
          scrollable: true,
          pageable:false,
          columnMenu: true,
          sortable:{
            mode:"multiple"
          }
        }).data('kendoGrid');
      } else {
        grid.setOptions({
          columns   :gridColumns,
​
          dataSource:{
            data:data
          },
          height:300,
          scrollable: true,
          pageable:false,
          columnMenu: true,
          sortable:{
            mode:"multiple"
          }
        })
      }
​
    }
​
​
    else if(clientInfo==2)
    {
​
      data = [
        {"_type":"ProductDetails:A","Discount":0,"OrderId":10248},
        {"_type":"ProductDetails:B","Discount":0,"OrderId":10248},
        {"_type":"ProductDetails:C","Discount":0,"OrderId":10248},
        {"_type":"ProductDetails:D","Discount":0,"OrderId":10249}];
​
      gridColumns = [
        {field:"_type", title:"what",width:200,locked:true},
        {title:"test",
         columns:[
           {field:"Discount", title:"Discount",width:200},
           {field:"OrderId", title:"Order Id",width:200}]
        }];  
​
      if(!grid){
        grid = $("#grid").kendoGrid({
          columns   :gridColumns,
​
          dataSource:{
            data:data
          },
          height:300,
          scrollable: true,
          pageable:false,
          columnMenu: true,
          sortable:{
            mode:"multiple"
          }
        }).data('kendoGrid');
      } else {
        grid.setOptions({
          columns   :gridColumns,
​
          dataSource:{
            data:data
          },
          height:300,
          scrollable: true,
          pageable:false,
          columnMenu: true,
          sortable:{
            mode:"multiple"
          }
        })
      }
    }
​
​
  });
});
​
​
​
​
​
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers