Pre selected row's check box toggles off automatically when we edit a cell

[manik005]

Hi @andrewcourtice , I tried to pre populate selected property of datatable in your codepen, the rows got pre-selected as expected but the checkbox toggle's off when we edit any cell in that row. Have recreated it by forking your codepen and mentioned the link below. Please do correct me if `missing anything here, just getting started with vuejs so apologise if its a noob question.

http://codepen.io/manik005/pen/EWveKm

[andrewcourtice]

Hi @manik005

This is because the items you have defined in the selected array are not the same as the corresponding items in the rows (same data, but different object). To solve this problem you just need to ensure that items that are added or removed from the selected array are items originally defined in the rows array.

To make a long story short, here's the code:

Change this:

selected: [
    {
        id: "0584e8d2-984c-4ce0-a20f-8b9e21cd2c00",
        purchasor_name: "Nancy Fuller",
        purchasor_email: "nfuller0@about.me",
        purchase_date: "2002-01-02T04:45:48Z",
        purchase_amount: 1166.14
    },
    {
        id: "f4769183-38af-4c22-8383-6dea302466fd",
        purchasor_name: "Melissa Meyer",
        purchasor_email: "mmeyer1@angelfire.com",
        purchase_date: "2010-05-15T08:13:59Z",
        purchase_amount: 6123.50
    }, {
        id: "c48e5e68-cae5-4a2e-96b2-8509fca19ddb",
        purchasor_name: "Sharon Gardner",
        purchasor_email: "sgardner9@seesaa.net",
        purchase_date: "2004-10-14T14:59:00Z",
        purchase_amount: 1166.14
    }
]

Back to this:

selected: []

And change the data method of your viewmodel to do something like this:

data: function () {

    [0, 1, 9].forEach(function(index) {
        customers.selected.push(customers.rows[index]);
    });

    return {
        customers: customers
    };
},

Where 0, 1 and 9 are the indexes of the items you want initially selected.

Hopefully that helps :)

[manik005]

Thanks for the quick response @andrewcourtice . Yeah that really helped me out. 'm just wondering what if I need to re populate selected from db. Should I have to re calculated their indexes of each selected object or is there any other better way as storing index won't be work out I guess?

[andrewcourtice]

No worries @manik005.

How you re-populate selected items is completely up to you and may vary widely between different use-cases.

Personally, if I were retrieving a set of data from a database and needed to define some of the rows as pre-selected I would set a selected boolean property on the object (server-side) and use a computed property in my viewmodel to handle the select all scenario.

I hope that helps/makes sense.

[manik005]

Thanks a lot @andrewcourtice . That really sounds better way. Thanks again