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

    Hi,

    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,
    Srinivas
  2.
  3. Volodymyr
    Volodymyr avatar
    11 posts
    Member since:
    May 2012

    Posted 29 Sep 2012 Link to this post

    Hello,

    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>
        </div>
    </script>

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

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

    5. Add highlight function:
    var highlightItems = function () {
        var checkboxes = $("#listview").find("input:checkbox");
        $(checkboxes).each(function (i, checkbox) {
            checkbox = $(checkbox);
            if (checkbox.is(":checked")) {
                checkbox.parent().addClass("k-state-selected");
            } else {
                checkbox.parent().removeClass("k-state-selected");
            }
        });
    };

    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");
    });
     
    highlightItems();

    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.

    Vladimir
  5. 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]

    Thanks
    Sarathi

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

    Posted 08 Nov 2012 Link to this post

    Hello,

    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" />
    </div>
    If you are clever enough in javascript you can easy make it working for you. :)

    Vladimir
  8.
Back to Top