jube-fork/Jube.App/wwwroot/kendo/examples/grid/rowtemplate.html

<!DOCTYPE html>
<html>
<head>
    <title>Row template</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">
    <table id="grid">
        <colgroup>
            <col class="photo" />
            <col class="details"/>
            <col/>
        </colgroup>
        <thead>
            <tr>
                <th>
                    Picture
                </th>
                <th>
                    Details
                </th>
                <th>
                    Country
                </th>
                <th>
                    ID
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="3"></td>
            </tr>
        </tbody>
    </table>
    <script id="rowTemplate" type="text/x-kendo-tmpl">
	    <tr data-uid="#: uid #">
		    <td class="photo">
                <img src="../content/web/Employees/#:data.EmployeeID#.jpg" alt="#: data.EmployeeID #" />
		    </td>
		    <td class="details">
			    <span class="name">#: FirstName# #: LastName# </span>
			    <span class="title">Title: #: Title #</span>
		    </td>
            <td class="country">
			    #: Country #
		    </td>
		    <td class="employeeID">
		        #: EmployeeID #
		    </td>
	    </tr>
    </script>
    <script id="altRowTemplate" type="text/x-kendo-tmpl">
	    <tr class="k-alt" data-uid="#: uid #">
		    <td class="photo">
                <img src="../content/web/Employees/#:data.EmployeeID#.jpg" alt="#: data.EmployeeID #" />
		    </td>
		    <td class="details">
			    <span class="name">#: FirstName# #: LastName# </span>
			    <span class="title">Title: #: Title #</span>
		    </td>
		    <td class="country">
			    #: Country #
		    </td>
            <td class="employeeID">
		        #: EmployeeID #
		    </td>
	    </tr>
    </script>
    <script>
        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: {
                            url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees",
                        }
                    }
                },
                rowTemplate: kendo.template($("#rowTemplate").html()),
                altRowTemplate: kendo.template($("#altRowTemplate").html()),
                height: 550
            });
        });
    </script>
    <style>
        .photo {
            width: 140px;
        }
        .details {
            width: 400px;
        }
        .name {
            display: block;
            font-size: 1.6em;
        }
        .title {
            display: block;
            padding-top: 1.6em;
        }
        .employeeID,
        .country {
            font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
            font-size: 50px;
            font-weight: bold;
            color: #898989;
        }
        td.photo, .employeeID {
            text-align: center;
        }
        .k-grid-header .k-header {
            padding: 10px 20px;
        }
        .k-grid 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;
        }
        .k-grid .k-alt td {
            background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.1)));
            background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
            background: -o-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
            background: -ms-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
            background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
        }
    </style>
</div>


    
</body>
</html>