Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Students</title>
- <link href="Styles/kendo.common.min.css" rel="stylesheet" />
- <link href="Styles/kendo.default.min.css" rel="stylesheet" />
- <script src="Scripts/jquery.min.js"></script>
- <script src="Scripts/kendo.all.min.js"></script>
- </head>
- <body>
- <script id="template" type="text/x-kendo-template">
- <div class="person-item" id="#= id #">
- <strong class="person-name">#= name #</strong><p class="person-grade">Grade: #= grade #</p>
- </div>
- </script>
- <div id="combobox"></div>
- <div id="marks-box"></div>
- <script>
- $("#combobox").kendoDropDownList({
- dataSource: {
- transport: {
- read: {
- dataType: "json",
- url: "http://localhost:53368/api/students"
- }
- }
- },
- dataTextField: "name",
- dataValueField: "id",
- change: function (e) {
- e.preventDefault();
- $(".k-list-container").on("click", 'li.k-item', function() {
- var childOfLi = $(this).find('div:first').attr('id');
- var id = parseInt(childOfLi);
- if (id > 0) {
- $("#marks-box").kendoGrid({
- dataSource: {
- transport: {
- read: {
- dataType: "json",
- url: "http://localhost:53368/api/students/" + id + "/marks"
- }
- }
- },
- dataTextField: "subject",
- dataValueField: "score"
- });
- }
- });
- },
- template: kendo.template($("#template").html())
- });
- </script>
- <style>
- #marks-box {
- margin-top: 10px;
- width: 200px;
- min-height: 200px;
- }
- </style>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement