CODEWITHSUNDEEP
listviewkendo-uicheckboxlist
uiuxhub
uiuxhub

Reputation: 1217

KendoUI Listview HeaderTemplate

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>

Upvotes: 0

Views: 4448

Answers (1)

Petur Subev
Petur Subev

Reputation: 20223

The ListView does not support such headertemplate configuration as the one that you shared (I guess you were watching the Grid which has headetTemplate for the different columns).

All the options that are available are covered here.

Nevertheless you can just add a simple div before that #listView_row element and it will act as a header.

Upvotes: 1

Related Questions