I am trying to create a customized Kendo Window with two Kendo List Views, an Add button, and a Remove button inside. Right now, my main goal is to display a list of data in the List view within the Kendo Window.
Below is the JavaScript code I have:
//retrieve template window
var detailsTemplate = kendo.template($("#template").html());
//create Kendo Window
$("#contractDetail").kendoWindow({
title: "Edit Contract List",
modal: true,
visible: false,
resizable: false,
actions: ["Close"],
width: 800
});
//get data=[{"id":"1","subPhase":"Sub1"},{"id":"2","subPhase":"Sub2"}]
$.ajax({
dataType : "json", async: false,
url : "/lah/getIntermediaryParameter"}).done(function(data) {
groupContracts = data;
});
//click button to openModal
$("#openModalContract").click(function () {
$("#contractDetail").parent().css("top", "0px"); //adjust position
$("#contractDetail").parent().css("left", "0px"); //adjust position
$("#contractDetail").data("kendoWindow").open();
$("#contractDetail").data("kendoWindow").content(detailsTemplate(groupContracts)); //load template
$("#contractDetail").data("kendoWindow").center(); //center the window
$("#sortable-listC").kendoListView({
dataSource: {
data: groupContracts
}
template: kendo.template($("#myTemplate").html()) //get <li> template
});
$("#sortable-listC").kendoSortable({
connectWith: "#sortable-listD" //for drag and drop functionality
});
$("#sortable-listD").kendoSortable({
connectWith: "#sortable-listC" //for drag and drop functionality
});
});
//attempted to create custom close button, but unsuccessful
$('#contractDetail').data().kendoWindow.bind('refresh',function(e){
var win = this;
$("#closeButtonModal").click(function(){
$("#contractDetail").data("kendoWindow").close();
})
})
This is My Template:
<script type="text/x-kendo-template" id="myTemplate">
<li>#: subPhase #</li>
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container" class="row" data-role="view" data-reload="true">
<div id="contractListLeft" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listC" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//loop through list data here
</ul>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-4">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="addGroup()">Add</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center" style="align:center;">
<button class="btn" onclick="removeGroup()">Remove</button>
</div>
</div>
<div id="contractListRight" class="contractList col-xs-12 col-sm-12 col-md-3 col-lg-4">
<ul id="sortable-listD" style="min-height: 110px; margin: 0; padding: 0;" data-role="sortable">
//list data added when "addGroup" button clicked
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-md-10 col-sm-10 col-lg-10"> </div>
<div class="col-xs-1 col-md-1 col-sm-1 col-lg-1">
<a class="k-window-action k-link" href="\\#"><span class="">Close</span></a>
</div>
</div>
</script>
I am struggling to display the GroupContracts list in the Kendo Window as it does not show any data. Upon checking console.log(), I noticed that there are multiple objects present. How can I effectively combine Kendo Window and Kendo List View?