KendoUI Listview HeaderTemplate答案

【问题标题】：KendoUI Listview HeaderTemplateKendoUI Listview HeaderTemplate
【发布时间】：2013-11-13 15:01:25
【问题描述】：

我有以下代码，但无法让 HeaderTemplate 工作。我需要一次选择所有复选框的选项，或者在标题中取消选择它们的“选项”。这是我的代码：

Jsfiddle 示例会很棒。

    <div class="row container-fluid">
        <div class="span3" style="background-color: #F2F2F2;">
            Select Row Profile:<br>

            <div class="space5"></div><select style="width: 100%">
                <option value="1">
                    one
                </option>

                <option value="2">
                    two
                </option>

                <option value="3">
                    three
                </option>

                <option value="4">
                    four
                </option>
            </select>

            <div class="k-listview" id="listView_row" style="width:100%; height: 124px; overflow-y:scroll;"></div><script id="myTemplate_row" type="text/x-kendo-tmpl">

            <div class="item click" data="${age}">
                <input type="checkbox" class="click" />
                <span class="checkbox">#:age#</span>
            </div>
            </script>
        </div>

        <div class="span3" style="background-color: #F2F2F2;">
            Select Column Profile:<br>

            <div class="space5"></div><select style="width: 100%">
                <option value="1">
                    one
                </option>

                <option value="2">
                    two
                </option>

                <option value="3">
                    three
                </option>

                <option value="4">
                    four
                </option>
            </select>

            <div class="k-listview" id="listView_col" style="width:100%; height: 124px; overflow-y:scroll;"></div><script id="myTemplate_col" type="text/x-kendo-tmpl">

            <div class="item click" data="${age}">
                <input type="checkbox" class="click" />
                <span class="checkbox">#:age#</span>
            </div>
            </script>
        </div>
    </div>

    <div style="float: right;">
        <button>Apply</button>
    </div><script>
       $(document).ready(function () {


         var dataSource = new kendo.data.DataSource({
                      transport: {
                          read: {
                             url: "json/_crosstab_sub_data.json", dataType: "json"

                          }
                     }
                    });
              $("#listView_row").kendoListView({
                    dataSource: dataSource,
                    template: kendo.template($("#myTemplate_row").html()),
                    headertemplate:"<div class='item click' id='headerTemp' data='*'><input type='checkbox' class='click' /><span class='checkbox'>All<\/span><\/div>"

                });

              $("#listView_col").kendoListView({
                    dataSource: dataSource,
                    template: kendo.template($("#myTemplate_col").html()),
                    headertemplate:"<div class='item click' id='headerTemp' data='*'><input type='checkbox' class='click' /><span class='checkbox'>All<\/span><\/div>"
                });


            });

    </script>

【问题讨论】：

我认为它将是“headerTemplate”而不是“headertemplate”。我已经以这种方式使用它并且它有效。

标签： listview kendo-ui checkboxlist

【解决方案1】：

ListView 不支持您共享的那种 headertemplate 配置（我猜您正在观看具有不同列的 headetTemplate 的 Grid）。

here 涵盖了所有可用选项。

不过，您可以在 #listView_row 元素之前添加一个简单的 div，它将充当标题。

【讨论】：