This is a migrated thread and some comments may be shown as answers.

How to select multiple values in the listview using check box

3 Answers 772 Views
ListView
This is a migrated thread and some comments may be shown as answers.
srinivas
Top achievements
Rank 1
srinivas asked on 07 Aug 2012, 11:58 AM
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

3 Answers, 1 is accepted

Sort by
0
Volodymyr
Top achievements
Rank 1
answered on 29 Sep 2012, 11:19 AM
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
0
Parthasarathi
Top achievements
Rank 1
answered on 08 Nov 2012, 10:27 AM
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

0
Volodymyr
Top achievements
Rank 1
answered on 08 Nov 2012, 10:53 AM
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
Tags
ListView
Asked by
srinivas
Top achievements
Rank 1
Answers by
Volodymyr
Top achievements
Rank 1
Parthasarathi
Top achievements
Rank 1
Share this question
or