Untitled

<!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>