Kendo UI：带有列表视图的自定义窗口

Question

我想做自定义剑道窗口，里面有一些控件，2个剑道列表视图，剑道按钮添加，剑道按钮删除。但现在我只想在 Kendo Window 的列表视图中显示我的数据列表。

我有这样的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;">
            &nbsp;
        </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">&nbsp;</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() 时，我发现有很多对象。如何结合剑道窗口和剑道列表视图？

Answer 1

[已编辑]：这只是一个示例，您必须在 Javascriot 和 html 中添加所有 widjets，例如：

尝试做这样的事情。

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;">
        &nbsp;
    </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">&nbsp;</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>

只是一个例子，希望对你有帮助