You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We pass the type in so we know what type of users we need to fetch
We use the type for the this.cache key
We implement our command myext.loadMoreUsers later on
Fetching the data
/** * @param {"admins"|"regular"} type The type of users we want to fetch * @param {boolean} [addRows] Passing false/null will returning the existing cache, but if it is empty will fetch the first page */asyncfetchUsers(type,addRows){constkey=type;letoffset;// Only fetch the rows if we have none or are looking for the next pageif(addRows||this.cache[key]===undefined){// The offset is basically the lenfth of the cacheoffset=(this.cache[key] ? this.cache[key].length : 0);// Fetch the data from our sourceconstdata=awaitUsers.get(type,{limit: PAGE_SIZE,
offset
});if(data.length>0){// Here, I am mapping to UserItem, which is type of `TreeView`constitems=data.map(item=>newUserItem(item));if(this.cache[key]){this.cache[key].push(...items);}else{this.cache[key]=items;}}else{vscode.window.showInformationMessage(`No more items to load.`);}}// Return a copyreturnthis.cache[key].slice(0);}
fetchUsers can do two things:
Return just the existing cache if there is one, otherwise fetch the first page, add it to the cache and return that.
Return the next page, add it to the cache and then return it
Fetching the next page
Our 'More' button calls the following command, which is defined in the constructor to make use of the extension context.
vscode.commands.registerCommand(`myext.loadMoreUsers`,async(type)=>{if(type){// Fetch the next page of data from the sourceawaitthis.fetchUsers(type,true);// Refresh the TreeView, which collects data from the cachethis.refresh();}})
What is important to note here is that because refresh invokes getChildren, which in return calls fetchUsers again. Luckily, the second time getChildren calls fetchUsers it won't reach out to the database. This is thanks to the addRows parameter on fetchUsers.
The text was updated successfully, but these errors were encountered:
worksofliam
changed the title
VS Code Extension: Implementing paging in a tree view
VS Code Extension API: Implementing paging in a tree view
Oct 14, 2021
worksofliam
changed the title
VS Code Extension API: Implementing paging in a tree view
VS Code Extension API: Implementing paging in a Tree View
Oct 14, 2021
I found myself needing paging in a TreeView. Here's how I did it.
Video: https://user-images.githubusercontent.com/3708366/137364458-bc9ad98e-b65d-46c9-9b01-7c32e90c44c6.mov
Base
Here's the base for the TreeView class (extending
TreeDataProvider
).PAGE_SIZE
is how much to load in each fetch.cache
field is used to store TreeView data.refresh
to reload the table from thecache
Fetching the data
getChildren
is a method on our classfetchUsers
returnsTreeItem[]
. We will define this soonmoreButton
returnsTreeItem
More button
this.cache
keymyext.loadMoreUsers
later onFetching the data
fetchUsers
can do two things:Fetching the next page
Our 'More' button calls the following command, which is defined in the
constructor
to make use of the extension context.What is important to note here is that because
refresh
invokesgetChildren
, which in return callsfetchUsers
again. Luckily, the second timegetChildren
callsfetchUsers
it won't reach out to the database. This is thanks to theaddRows
parameter onfetchUsers
.The text was updated successfully, but these errors were encountered: