Kendo Window Value passing

HTML

<script src="https://kendo.cdn.telerik.com/2020.3.915/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.default.min.css">

<div class="col-6">
  <label class="ez-label-bold">Project Name</label>

  <input id="Job_Splitprojectname" />
  
  <h4>Products</h4>
  <input id="products" style="width: 100%;" />
</div>

JavaScript

$(document).ready(function() {

	var projectDS =  [
            { ProjectID: 1, ProjectName: "test 1" },
            { ProjectID: 2, ProjectName: "test 2" },
            { ProjectID: 3, ProjectName: "test 3" }
    ];

  $("#Job_Splitprojectname").kendoDropDownList({
  
    filter: "startswith",
    optionLabel: "Select Project",
    dataTextField: "ProjectName",
    dataValueField: "ProjectID",

  }).data("kendoDropDownList");

  $("#products").kendoDropDownList({
    filter: "startswith",
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    dataSource: {
      type: "odata",
      serverFiltering: true,
      transport: {
        read: {
          url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
        }
      }
    }
  });


});