selectAll in KTDataTable async
Hello!
I'm using Metronic Vue version 8.1.8, and I'm loading a datatable with data loaded via HTTP Get using ApiService.
When I click on the checkbox to select all items, nothing happens. But if items are selected, they are deselected.
I noticed that everything works normally when I load the page, change any line of code and save. After that I go back to the browser, without reloading the page and I click to select all and it works.
I had a similar problem with the menus, I solved it with a solution found here on the forum: calling reinitializeComponents();
Is there any similar function that I can call after the ApiService request completes or any other solution?
Thank you for your attention. 
Replies (10)
Hi Fernando,
Thank you for reaching out to us.
Unfortunately, after checking this further we were not able to reproduce this issue.
Do you have this problem on our preview page?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hello Lauris,
Thanks for the answer.
The problem is here: <a>https://preview.keenthemes.com/metronic8/vue/demo7/#/apps/customers/customers-listing</a>
I recorded the whole process here: <a>https://youtu.be/M-LLh4XG0HY</a>
I mentioned earlier that just change any line of code and everything worked normally, but actually, you need to update the specific file: /src/components/kt-datatable/table-partials/table-content/TableContent.vue
I just adapted the structure of the demo7 example code, below is the part of the code that makes the async request:
onMounted(async () => {
auth.authorization(router, "read-customer");
await getTableData();
});
const getTableData = async () => {
loading.value = true;
let skip = (currentPage.value - 1) * itemsPerPage.value;
let limit = itemsPerPage.value;
ApiService.setHeader();
await ApiService.query("/api/categories", {
skip: skip,
limit: limit,
search: search.value
})
.then(({ data }) => {
setTableData(data.data);
})
};
const setTableData = (data) => {
tableData.value.splice(0);
tableData.value.splice(0, data.items.length, ...data.items);
total.value = data.total;
initCustomers.value.splice(0, tableData.value.length, ...tableData.value);
loading.value = false;
reinitializeComponents();
};Thank you for your attention.
Hi Fernando,
Sorry for the late reply.
We checked your video and by doing the same steps in our latest Metronic Vue Demo7 we are not getting the same result.
Could you please specify which Metronic version are you using?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris,
I'm using Metronic Vue version 8.1.8.
Hi Fernado,
Metronic v8.1.8 is the latest version and select functionality should work correctly.
Have you modified anything inside a KTDatatable component?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hello Lauris!
I haven't made any changes.
In fact, I'm using GIT to ensure that only CustomersListing and AddCustomerModal are modified.
The only thing I did was a rebuild of the project. I'm also using an incognito tab to avoid cache conflicts.
Could you please provide the code you used for your asynchronous test? That way, I can analyze it and try to adapt my code.
Thank you.
I conducted new tests and discovered that if there are more than 10 items (in my case, there are 12), when changing the number of items per page to 25 and then returning to 10, the selectall functionality starts working again. However, it only works for the first 10 records.
I recorded a video to demonstrate this: https://youtu.be/hbsZpkg3gjY
In further tests, I also diagnosed that the onMounted method of the component /src/components/kt-datatable/table-partials/table-content/TableContent.vue is rendering with an empty props.data.
Lines 124 to 134.
onMounted(() => {
selectedItems.value = [];
allSelectedItems.value = [];
check.value = false;
// eslint-disable-next-line
props.data.forEach((item: any) => {
if (item[props.checkboxLabel]) {
allSelectedItems.value.push(item[props.checkboxLabel]);
}
});
});I also noticed that the watch for props.data in the same component is only triggered when I perform the action I mentioned in the previous response: changing the number of items per page from 10 to 25 and then back to 10 (when there are more than 10 items). However, it is only executed at the end, meaning when it goes back from 25 to 10.
Lines 75 to 88.
watch(
() => props.data,
() => {
selectedItems.value = [];
allSelectedItems.value = [];
check.value = false;
// eslint-disable-next-line
props.data.forEach((item: any) => {
if (item[props.checkboxLabel]) {
allSelectedItems.value.push(item[props.checkboxLabel]);
}
});
}
);I have found the issue.
I was populating the tableData as it came in the original code of demo7:
tableData.value.splice(0);
tableData.value.splice(0, data.items.length, ...data.items);I changed it to the following form, and it worked:
tableData.value = data.items;Thank you very much for your time.
Hi,
Glad to hear that you fixed this.
The first approach is for datatables with static data for server-side data you need to reassign your data variable.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
