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>
 
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}]
                           }];  
​
                            grid = $("#grid").kendoGrid({
                              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}]
                           }];  
                        
                           grid = $("#grid").kendoGrid({
                              columns   :gridColumns,
​
                              dataSource:{
                                data:data
                              },
                              height:300,
                              scrollable: true,
                              pageable:false,
                              columnMenu: true,
                              sortable:{
                                mode:"multiple"
                              }
                            });
                        }
                      
​
                    });
                });
  
​
​
​
​
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers