Пользовательский интерфейс Kendo: пользовательское окно со списком
Я хочу сделать Custom Kendo Window, и внутри есть несколько элементов управления, 2 Kendo List View, Kendo Button Add, Kendo Button Remove. Но сейчас я просто хочу показать список моих данных в виде списка в окне кендо.
У меня есть 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>
Поэтому я хочу показать список GroupContracts в окне кендо, но всегда не получаю данных. Когда я попытался проверить в console.log(), я обнаружил, что есть много объектов. Как совместить Kendo Window и Kendo List View?
1 ответ
[РЕДАКТИРОВАНИЕ]: Это был просто пример, вы должны добавить все свои виджеты в Javascriot и HTML вроде:
Попробуйте сделать что-то вроде этого.
var myWindow = $('#contractDetail').kendoWindow({
width: 500,
height: 400,
// here you can do you configuration
open: function() {
//here you can instanciate your widgets inside your window like:
$("#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
});
}
});
//and then show window
myWindow.open();
И ваш шаблон должен выглядеть так
<div id="contractDetail">
<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>
</div>
Просто пример, надеюсь, это поможет