You need to sign in to do that
Don't have an account?
Prasan De Alwis
Pre selected Rows with Pagination not working in Datatable in Salesforce LWC
I am loading the user table data to datatable using LWC, the users who has not logging past two months. When the page loads first time I load all the list to front end and using pagination Im going through the records instead going to the server again. Based on the list we can deactivate the users or exclude the user using a checkbox.
Initially all checkbox should come as true but only first page will checked as true. The other pages checkboxes are not checked. Pre selected Row Ids are send to the UI via controller to checked or unchecked. Another issue I faced is the selected checkboxes are not selected when move to another page and coming back to the same page. The selected Ids will be send to the system by clicking the Deactivate Users button.
The Page 1 Checkboxes are pre selected as below when page loads first time,
Page 2 other any other pages checkboxes are not selected. (selected-rows= {preSelectedRows})
Wrapper Class
Controller
JS
Summarizing the Issues are,
Initially all checkbox should come as true but only first page will checked as true. The other pages checkboxes are not checked. Pre selected Row Ids are send to the UI via controller to checked or unchecked. Another issue I faced is the selected checkboxes are not selected when move to another page and coming back to the same page. The selected Ids will be send to the system by clicking the Deactivate Users button.
The Page 1 Checkboxes are pre selected as below when page loads first time,
Page 2 other any other pages checkboxes are not selected. (selected-rows= {preSelectedRows})
Wrapper Class
public class UserMngtWrapper { //User Id public String UserId {get; set;} public String FullName {get; set;} public String Email {get; set;} //User ProfileName public String ProfileName {get; set;} //User RoleName public String RoleName {get; set;} //User is Frozen public String isFrozen {get; set;} //User Last Login Date public Datetime LastLoginDate {get; set;} //User Last Modified Date by user public String LastModifiedDate {get; set;} //User Created Date public String CreatedDate {get; set;} //User is Active public String isActive {get; set;} //User is Deactivated public String isDeactivate {get; set;} }
Controller
public class UserManagementController { @AuraEnabled(cacheable=true) public static string getUserList() { List<UserMngtWrapper> userMngtWrapperList = new List<UserMngtWrapper>(); UserListMngtWrapper userListMngtWrapper = new UserListMngtWrapper(); Set<Id> selectedIdSet = new Set<Id>(); //Get last two months inactive users Set<ID> inactiveUserIds = new Map<Id,User>([SELECT id From User WHERE LastLoginDate < LAST_N_DAYS: 60 AND IsActive = TRUE AND CreatedDate < LAST_N_DAYS: 60 ]).keySet(); //Get last two months inactive users Data List<User> userList = [Select id,Profile.Name,Name,Email,UserRole.Name,LastLoginDate,LastModifiedDate,CreatedDate,IsActive,IsDeactivate__c FROM User where id= : inactiveUserIds order by Profile.Name asc,Name asc]; for (User u : userList) { UserMngtWrapper userMngtWrapper = new UserMngtWrapper(); userMngtWrapper.UserId = u.id; userMngtWrapper.FullName = (u.Name != null ) ? u.Name: ''; userMngtWrapper.Email = (u.Email != null ) ? u.Email: ''; userMngtWrapper.LastLoginDate = u.LastLoginDate; userMngtWrapper.ProfileName = (u.Profile.Name != null ) ? u.Profile.Name: ''; userMngtWrapper.RoleName = (u.UserRole.Name != null ) ? u.UserRole.Name: ''; userMngtWrapper.isDeactivate = (u.IsDeactivate__c == false ) ? 'FALSE': 'TRUE' ; userMngtWrapperList.add(userMngtWrapper); selectedIdSet.add(u.Id); } userListMngtWrapper.userMngtWrapperList = userMngtWrapperList; userListMngtWrapper.selectedUserIdSet = selectedIdSet; return JSON.serialize(userListMngtWrapper); } @AuraEnabled(cacheable=true) public static Boolean userRecordsUpdate() { // inprogress Return true; } //Wrapper List Class public class UserListMngtWrapper{ @AuraEnabled public List<UserMngtWrapper> userMngtWrapperList {get; set;} @AuraEnabled public set<Id> selectedUserIdSet {get; set;} }
JS
import { LightningElement , track, wire,api } from 'lwc'; import getUserList from '@salesforce/apex/UserManagementController.getUserList'; import userRecordsUpdate from '@salesforce/apex/UserManagementController.userRecordsUpdate'; import {refreshApex} from '@salesforce/apex'; export default class Usermanagement extends LightningElement { @track columns = [ { label: 'User Id',fieldName: 'UserId',type: 'text',sortable: false,cellAttributes: { alignment: 'left' },initialWidth: 200,}, { label: 'Name',fieldName: 'FullName',type: 'text',sortable: false,cellAttributes: { alignment: 'left' },initialWidth: 200,}, { label: 'Email',fieldName: 'Email',type: 'text',sortable: false,cellAttributes: { alignment: 'left' },initialWidth: 200,}, { label: 'Profile Name',fieldName: 'ProfileName',type: 'text',sortable: false,cellAttributes: { alignment: 'left' },initialWidth: 200,}, { label: 'Role Name',fieldName: 'RoleName',type: 'text',sortable: false,cellAttributes: { alignment: 'left' },initialWidth: 200,}, { label: "Last Login Date", fieldName: "LastLoginDate", type: "date", typeAttributes:{ year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", second: "2-digit" }, sortable: false,cellAttributes: { alignment: 'left' }, initialWidth: 200, }, { label: 'Deactivate',fieldName: 'isDeactivate',type: 'text',sortable: false,cellAttributes: { alignment: 'left' },initialWidth: 200,} ]; @track showLoadingSpinner = false; @track error; @track page = 1; @track perpage = 5; @track pages = []; @track disabledConditionNext =false; @track disabledConditionPrev =false; @track disabledCondition = true; @track preSelectedRows=[]; @track totalRecordCount=0; data=[]; @track numberOfPages =1; numOfPreviousPages; set_size = 5; connectedCallback() { this.init(); } async init() { try { this.disabledCondition = true; this.showLoadingSpinner = true; await getUserList() .then((result,error) => { var userList = JSON.parse(result); if (userList) { this.data=userList.userMngtWrapperList; this.preSelectedRows = userList.selectedUserIdSet; this.data = this.data; this.totalRecordCount = this.data.length; } else if (error) { console.error(error); } }); this.disabledConditionPrev =false; this.disabledConditionNext =false; this.disabledCondition = false; this.setPages(this.data); this.showLoadingSpinner = false; } catch (error) { this.error = error; } finally { this.showLoadingSpinner = false; } } get currentPageData(){ return this.pageData(); } get pagesList(){ let mid = Math.floor(this.set_size/2) + 1 ; if(this.page > mid){ return this.pages.slice(this.page-mid, this.page+mid-1); } return this.pages.slice(0,this.set_size); } pageData = ()=>{ let numberOfPages = Math.ceil(this.data.length / this.perpage); this.numberOfPages = numberOfPages; let page = this.page; let perpage = this.perpage; let startIndex = (page*perpage) - perpage; let endIndex = (page*perpage); if(this.numberOfPages < 1) { this.disabledConditionPrev =true; this.disabledConditionNext =true; } return this.data.slice(startIndex,endIndex); } setPages = (data)=>{ let numberOfPages = Math.ceil(data.length / this.perpage); this.numOfPreviousPages = numberOfPages; } onNext = ()=>{ if(this.page < this.numberOfPages){ ++this.page; this.disabledConditionNext =false; this.disabledConditionPrev =false; this.hasPageChanged =true; } else { this.disabledConditionNext =true; this.disabledConditionPrev =false; } } onPrev = ()=>{ if(this.page > 1){ --this.page; this.disabledConditionPrev =false; this.disabledConditionNext =false; } else { this.disabledConditionPrev =true; this.disabledConditionNext =false; } } onFirst = ()=>{ this.page = 1; } onLast = ()=>{ this.page = this.numberOfPages; } onPageClick = (e)=>{ this.page = parseInt(e.target.dataset.id,10); if(this.numberOfPages < 1) { this.disabledConditionPrev =true; this.disabledConditionNext =true; } else { this.disabledConditionPrev =false; this.disabledConditionNext =false; } } // Method didnt develop and test updateRecords(){ var selectedRecords = this.template.querySelector("lightning-datatable").getSelectedRows(); let arrset = []; selectedRecords.forEach(row => { arrset.push(row.userId); }); userRecordsUpdate() .then(result=>{ return refreshApex(this.refreshTable); }) .catch(error=>{ alert('Could not update(error)); }) }
<template> <lightning-card title="User Management" icon-name="standard:user" class="slds-col slds-size_12-of-12 slds-p-top_small"> <lightning-button slot="actions" label="Deactivate Users" onclick={updateRecords}></lightning-button> <div class="slds-p-left_medium"> <div class="slds-col slds-size_12-of-12 slds-p-top_medium"> <div class="slds-p-around_medium lgc-bg"> <lightning-datatable key-field="UserId" columns={columns} data={currentPageData} selected-rows= {preSelectedRows} onrowaction={getRowActions} > </lightning-datatable> </div> <div class="slds-col slds-size_10-of-12 slds-p-top_medium"> <lightning-layout multiple-rows="true"> <lightning-layout-item size = "12" margin= "around-small"> <div class="slds-align_absolute-center"> <ul class="slds-button-group-row"> <li class="slds-button-group-item" > <button class="slds-button slds-button_neutral" disabled={disabledCondition} onclick ={onFirst}> First </button> </li> <li class="slds-button-group-item" > <button class="slds-button slds-button_neutral" disabled={disabledConditionPrev} onclick ={onPrev}> Prev </button> </li> <li class="slds-button-group-item" > <button class="slds-button slds-button_neutral" disabled={disabledConditionNext} onclick={onNext} >Next</button> </li> <li class="slds-button-group-item" > <button class="slds-button slds-button_neutral" disabled={disabledCondition} onclick ={onLast}> Last </button> </li> </ul> </div> </br> <div class="slds-align_absolute-center" > <span>Total Records: {totalRecordCount} </span> </div> <div class="slds-align_absolute-center" > <span>Page ({page} of {numberOfPages}) </span> </div> </lightning-layout-item> </lightning-layout> </div> </div> </div> <div if:true={showLoadingSpinner}> <lightning-spinner alternative-text="Loading" size="large"></lightning-spinner> </div> </lightning-card> </template>
Summarizing the Issues are,
- Pre selected Row Ids are only selected or checked in page 1. Not checked in other pages.(selected-rows= {preSelectedRows})
- The selected checkboxes are not selected(checked box unchecked) after move to another page and coming back to the same page. Selected items should remain even going though any paginations and come back to the same page.
Venkata Shiva Koushik Rachapudi
Running into similar issues, was this ever resolved?