カスタム剣道ウィンドウを作りたいのですが、内部にはいくつかのコントロールがあります.2つの剣道リストビュー、剣道ボタンの追加、剣道ボタンの削除. しかし今は、剣道ウィンドウ内のリストビューに自分のデータのリストを表示したいだけです。
私はこのようなJavaScriptを持っています:
//get template window
var detailsTemplate = kendo.template($("#template").html());
//make 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"); //make it to the top left
$("#contractDetail").parent().css("left", "0px"); //make it to the top left
$("#contractDetail").data("kendoWindow").open();
$("#contractDetail").data("kendoWindow").content(detailsTemplate(groupContracts)); //load template
$("#contractDetail").data("kendoWindow").center(); //make it center
$("#sortable-listC").kendoListView({
dataSource: {
data: groupContracts
}
template: kendo.template($("#myTemplate").html()) //get template <li>
});
$("#sortable-listC").kendoSortable({
connectWith: "#sortable-listD" //for dragdrop
});
$("#sortable-listD").kendoSortable({
connectWith: "#sortable-listC" //for dragdrop
});
});
//make custom button close, but its not work
$('#contractDetail').data().kendoWindow.bind('refresh',function(e){
var win = this;
$("#closeButtonModal").click(function(){
$("#contractDetail").data("kendoWindow").close();
})
})
そして、これは私のテンプレートです:
<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">
//looping list data in 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">
//looping list data added when button "addGroup" 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>
そこで、Kendo Window に GroupContracts のリストを表示したいのですが、常にデータがありません。console.log() をチェックインしようとすると、多くのオブジェクトがあることがわかりました。剣道ウィンドウと剣道リストビューを組み合わせるには？