KendoUI Listview HeaderTemplate

Question

我有以下代码，我无法使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>

Answer 1

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

所有可用的选项都涵盖here。

然而，您可以在 #listView_row 元素之前添加一个简单的div，它将作为标题。