jube-fork/Jube.App/wwwroot/kendo/examples/integration/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Kendo UI + Handlebars</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
            <div id="example">
            <div class="demo-section k-content">
                <select id="emplooyeesDropDown" class="employeesDropDownWrap" style="width: 100%;"></select>
            </div>
            <div>
                <table id="employeesTable">
                    <colgroup>
                        <col class="photo" />
                        <col class="details"/>
                        <col/>
                    </colgroup>
                    <thead>
                         <tr>
                            <th>
                                Picture
                            </th>
                            <th>
                                Details
                            </th>
                            <th>
                                ID
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td colspan="3"></td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <script src="../content/shared/js/handlebars.min.js"></script>
            <script id="dropdown-item-template" type="text/x-handlebars-template">
                <img src="../content/web/Employees/{{EmployeeID}}.jpg" alt="{{EmployeeID}}" />
                <h3>{{FirstName}} {{LastName}}</h3>
                <p>{{Title}}</p>
            </script>
            <script id="grid-row-template" type="text/x-handlebars-template">
                <tr data-uid="{{uid}}">
                    <td class="photo">
                        <img src="../content/web/Employees/{{EmployeeID}}.jpg" alt="{{EmployeeID}}" />
                    </td>
                    <td class="details">
                        <span class="title">{{Title}}</span>
                        <span class="description">Name: {{ FirstName }} {{ LastName }}</span>
                        <span class="description">Country: {{ Country }} </span>
                    </td>
                    <td class="employeeID">
                        {{ EmployeeID }}
                    </td>
               </tr>
            </script>
            <script>
                $(document).ready(function() {
                    var dataSource = new kendo.data.DataSource({
                          type: "odata",
                          transport: {
                              read: {
                                  url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees",
                              }
                          }
                        });

                    $("#employeesTable").kendoGrid({
                        dataSource: dataSource,
                        rowTemplate: Handlebars.compile($("#grid-row-template").html()),
                        height: 370
                    });

                    $("#emplooyeesDropDown").kendoDropDownList({
                        dataTextField: "FirstName",
                        dataValueField: "EmployeeID",
                        template: Handlebars.compile($("#dropdown-item-template").html()),
                        dataSource: dataSource,
                        height: 320
                    });
                });
            </script>

            <style>
                .photo {
                    width: 140px;
                }
                .details {
                    width: 400px;
                }
                .title {
                    display: block;
                    font-size: 1.6em;
                }
                .description {
                    display: block;
                    padding-top: 1.6em;
                }
                .employeeID {
                    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
                    font-size: 50px;
                    font-weight: bold;
                    color: #898989;
                }
                td.photo, .employeeID {
                    text-align: center;
                }

                #employeesTable td {
                    background: -moz-linear-gradient(top,  rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));
                    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                    background: -o-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                    background: -ms-linear-gradient(top,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                    background: linear-gradient(to bottom,  rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
                    padding: 20px;
                }

                .employeesDropDownWrap
                {
                    display:block;
                    margin:0 auto;
                }

                #emplooyeesDropDown-list .k-item {
                    overflow: hidden;
                }

                #emplooyeesDropDown-list img {
                    -moz-box-shadow: 0 0 2px rgba(0,0,0,.4);
                    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.4);
                    box-shadow: 0 0 2px rgba(0,0,0,.4);
                    float: left;
                    margin: 5px 20px 5px 0;
                }

                #emplooyeesDropDown-list h3 {
                    margin: 30px 0 10px 0;
                    font-size: 2em;
                }

                #emplooyeesDropDown-list p {
                    margin: 0;
                }
            </style>
        </div>


    
</body>
</html>