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.3.1119/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1119/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="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <script type="text/x-kendo-template" id="territoriesTemplate">
    #for(var i = 0; i < Territories.length; i++){#
        <a class="hasTooltip">#:Territories[i].TerritoryDescription#</a>&nbsp;<button class="info-btn">Info</button>
    #}#
</script>
  
  <script type="text/x-kendo-template" id="storesTemplate">
        #for(var i = 0; i < Territories.length; i++){#
           #for(var y = 0; y < Territories[i].TerritoryStores.length; y++) {#
                    <span>#:Territories[i].TerritoryStores[y].StoreName#</span>
             #}#
        #}#
</script>
  
  <script type="text/x-kendo-template" id="territoryLink">
    <a role="button" tabindex="0" style="cursor: pointer;" class="view">Click to view</a>
</script>
  
  <div id="grid"></div>
  <div id="details"></div>
  
  <script type="text/x-kendo-template" id="view">
            <div id="details-container">
                    <label><strong>Where is #= TerritoryDescription #?</strong></label>
                    <p>#= TerritoryDescription # is in...</p>
                </div>
            </script>
  
  <script type="text/x-kendo-template" id="viewTerritory">
            <div id="details-container">
                  <label>#= TerritoryDescription #</label>
                </div>
            </script>
  
  <script type="text/x-kendo-template" id="template">
                <div class="toolbar">
                  <input type="search" class="k-textbox" placeholder="Search" id="search" style="width: 200px"></input>
                </div>
          </script>  
  
  <script type="text/x-kendo-template" id="storeTerritory">
<div class="tooltipcontent">
    #for(var i = 0; i < Territories.length; i++){#
        #if (Territories != 'null' && Territories != '')  {#
            <p>#=Territories[i].TerritoryDescription#</p>
        #} else{#
            <p>Information not available</p>
      #}#
    #}#
</div>
</script>
  
</body>
</html>
 
var data = [
  { "EmployeeId": 1, "FirstName": "Jim", "LastName": "Jones", "Territories": [{ "Id": 1, "TerritoryDescription": "Wilton","TerritoryStores": [{ "Id": 1, "StoreName": "Navarra" }] }] }
    ];
​
​
                            //serialize as a string
                            function serializeArray(prefix, array, result) {
                                for (var i = 0; i < array.length; i++) {
                                    if ($.isPlainObject(array[i])) {
                                        for (var property in array[i]) {
                                            result[prefix + "[" + i + "]." + property] = array[i][property];
                                        }
                                    }
                                    else {
                                        result[prefix + "[" + i + "]"] = array[i];
                                    }
                                }
                            }
​
                $(document).ready(function () {
                var grid = $("#grid").kendoGrid({
                    dataSource: {
                        transport: {
                            read: function(e) {                                
                              e.success(data);
                            },
                            parameterMap: function (options, operation) {
                                if (operation !== "read") {
                                    for(var field in options) {
                                        if ($.isArray(options[field])){
                                            serializeArray(field, options[field], options);
                                        }                           
                                    }
                                }
                                return options;
                            }
                        },
                        pageSize: 10,
                        schema: {
                            model: {
                                id: "EmployeeId",
                                fields: {
                                    EmployeeId: { type:"number" },
                                    FirstName: { type:"string" },
                                    LastName: { type:"string" },
                                    Territories: { defaultValue:[] },
                                    TerritoryStores: { defaultValue:[] }
                                }
                            }
                        }
                    },
                    editable: false,
                    sortable: true,
                    pageable: {
                        pageSizes: [10, 25, 50, 100]
                    },
                    //height: 500,
                    toolbar: kendo.template( $( "#template" ).html() ),
                    filterable: false,
                    columns: [
                                { field: "FirstName", title: "First Name", filterable: false, sortable: true, width: "220px" },
                                { field: "LastName", title: "Last Name", filterable: false, sortable: true, width: "220px" },
                                {
                                    field: "Territories",
                                    title: "Territory",
                                    template: kendo.template($("#territoriesTemplate").html()),
                                    sortable: true,
                                    width: "120px"
                                },                          
                                {
                                    field: "TerritoryStores",
                                    title: "Stores",
                                    template: kendo.template($("#storesTemplate").html()),
                                    sortable: false,
                                    width: "120px"
                                },
                                {
                                    field: "Territories",
                                    title: "&nbsp",
                                    template: kendo.template($("#territoryLink").html()),
                                    sortable: true,
                                    width: "120px"
                                }]
                        }).data("kendoGrid");
​
                        //autofilter search bar
                        var timeout;
​
                        $("#search").bind("keydown", function() {
                            var input = $(this);
                            clearTimeout(timeout);
    
                            timeout = setTimeout(function() {
                                var text = input.val(),
                                    dataSource = grid.dataSource;        
​
                                if (text !== "") {
                                    dataSource.query({
                                        page: 1,
                                        filter: {
                                            field: "FirstName",
                                            value: text,
                                            operator: "contains"
                                        }
                                    });
                                } else  if (text === "" && dataSource.filter()) {
                                    dataSource.query({ filter: {}, page: 1, pageSize: 10 });
                                }        
                            }, 500);
                        });
                  
                        wnd = $("#details")
                        .kendoWindow({
                            modal: true,
                            visible: false,
                            resizable: false,
                            width: 600,
                            height:250
                        }).data("kendoWindow");
                    });
​
                   $(function () {
                                $("#grid").on("click", ".info-btn", function showDetails(e) {
                                    e.preventDefault();
                                    var grid = $("#grid").data("kendoGrid");
                                    var wnd = $("#details").data("kendoWindow");
                                    var dataItem = grid.dataItem($(e.currentTarget).closest("tr"));
​
                                    var subItem = dataItem.Territories[0];
                                    console.log(subItem);
​
                                    detailsTemplate = kendo.template($("#view").html());
                                    wnd.content(detailsTemplate(subItem));
                                    wnd.center().open();
​
                                    wnd.setOptions({
                                        title: "Territories"
                                    });
                                });
                            });
​
$(function () {
                                $("#grid").on("click", ".view", function showIssues(e) {
                                    e.preventDefault();
                                    var grid = $("#grid").data("kendoGrid");
                                    var wnd = $("#details").data("kendoWindow");
                                    var dataItem = grid.dataItem($(e.currentTarget).closest("tr"));
​
                                    var subItem = dataItem.Territories[0];
                                    console.log(subItem);
​
                                    detailsTemplate = kendo.template($("#viewTerritory").html());
                                    wnd.content(detailsTemplate(subItem));
                                    wnd.center().open();
​
                                    wnd.setOptions({
                                        title: "Territories covered by this Employee"
                                    });
                                });
                            });
​
$("#grid").kendoTooltip({
    autoHide: true,
    showOn: "mouseenter",
    width: 125,
    height: 125,
    position: "right",
    filter: ".k-grid-content a.hasTooltip",
    content: function (e) {
        var row = $(e.target).closest("tr");
        var dataItem = $("#grid").data("kendoGrid").dataItem(row);
​
        var template = kendo.template($("#storeTerritory").html());
        return template(dataItem);
    }
});
Output

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

Dismiss x
public
Bin info
lhoeppnerpro
0viewers