How to select multiple values in the listview using check box

[srinivas]

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

[Volodymyr]

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

[Parthasarathi]

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

[Volodymyr]

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