How to select multiple values in the listview using check box

4 posts, 0 answers
  1. srinivas
    srinivas avatar
    21 posts
    Member since:
    May 2012

    Posted 07 Aug 2012 Link to this post


    I am having a list view with multiple details.Each detail contains a check box in the display view and in the header there will
    be another check box  when ever i am selecting the header check box i have to select all the list views and then we have to do 
    particular action like save or delete, that means i have to delete or save multiple values in the list view.simply whenever i am selecting the top select box i have to select the all the list views which will have check boxes and we have to do particular action regarding all the values.
    I hope you understand my question.
    Please provide me an example or sample

    Thanks and Regards,
  2. Volodymyr
    Volodymyr avatar
    11 posts
    Member since:
    May 2012

    Posted 29 Sep 2012 Link to this post


    I just finished the similar task (list view with custom checkboxes).
    Therefore to make this I did:

    1. Block native selection on the listview (so now my list view doesn't allow selection).
    2. Add item template with checkboxes:
    <script type="text/x-kendo-tmpl" id="myTemplate">
        <div class="item click" data="${ID}">
            <input type="checkbox" class="click" />
            <span class="checkbox">#:Name#</span>

    3. Created list view and bind onclick event:
    listView = $("#listview").kendoListView({
            dataSource: options.datasource,
            autoBind: false,
            editable: false,
            template: kendo.template($("#myTemplate").html())
    $("#listview").bind("click", selectItem);

    4. Declate selectItem handler:
    var selectItem = function (e) {
        if ( == "DIV" &&, 4) == "item" || == "SPAN") {
            var target = ( == "DIV" ? $( : $(;
            var checkbox = target.find("input:checkbox");
            if (":checked")) {
            } else {
                checkbox.attr("checked", "checked");
        } else if ( == "INPUT") {

    5. Add highlight function:
    var highlightItems = function () {
        var checkboxes = $("#listview").find("input:checkbox");
        $(checkboxes).each(function (i, checkbox) {
            checkbox = $(checkbox);
            if (":checked")) {
            } else {

    In the result you can select & get selected items by this:
    To select:
    $([3,5,6]).each(function (i, val) {
        var item = me.find("[data='" + val + "']").find("input:checkbox");
        item.attr("checked", "checked");

    To get selected:
    var data = listView.dataSource.view();
    var checkboxes = $("#listview").find("input:checkbox:checked");
    var selectedTags = $.map(checkboxes, function (item) { return data[$(item).parent().index()].ID; });

    It works fine for me!
    You will need to extend & modify it for your example but I hope it helps.

  3. Parthasarathi
    Parthasarathi avatar
    1 posts
    Member since:
    Sep 2012

    Posted 08 Nov 2012 Link to this post

    HI Volodymyr, I have tried this ,but I could not work out this.  Please send me the sample application for this....[as soon as possible]


  4. Volodymyr
    Volodymyr avatar
    11 posts
    Member since:
    May 2012

    Posted 08 Nov 2012 Link to this post


    I use this control (see attachment) for selectable list view in my test project.
    Unfortunately for you this control is a module (like everything else in my system) so you need to make some changes to make it working standalone.

    I use this code to initialize this module:
    var options = {
        dataSource: $hf.dataSources.tagsDataSource,
        btnSave: "#seltags_btnSave",
        listview: "#seltags_listview",
        fields: {
            id: "ID",
            name: "Name"
    var obj = $("#selectTagsContainer").selectableListView($hf, options);
    Html is this:

    <div id="selectTagsContainer" class="selectableList">
        <div id="seltags_listview" class="listView"></div>
        <input id="seltags_btnSave" type="button" data-bind="click: save" value="Save" class="k-button accountButton normalButton" />
    If you are clever enough in javascript you can easy make it working for you. :)

Back to Top