0

I have the following code and I cannot get the HeaderTemplate to work. I need the option to select all checkbox at once or deselect them "options" in the header. Here is my code:

Jsfiddle Example would be great.

    <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>
4

1 に答える 1

1

ListView は、共有したような headertemplate 構成をサポートしていません (さまざまな列の headetTemplate を持つグリッドを見ていたと思います)。

利用可能なすべてのオプションは、ここでカバーされています。

それでも、その#listView_row要素の前に単純な div を追加するだけで、ヘッダーとして機能します。

于 2013-11-13T18:23:48.933 に答える