+ Start a Discussion
sumit suwalkasumit suwalka 

After removing records from data table,coming again after reloading the page

Hi All,
i have a lightning component in which i am taking records of a custom object .here when i click on checkbox the record is removed.
but after reloading the page its coming again in data table i want that this records does not show again in data table.i dont want to delete the record.
how to do it?
Any suggestions?
my component and controller is given below:-
<aura:component controller="FBGFamilyController"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" 
                access="global" >
    
    <!--aura:attribute name="PageHeading" type="String" default="Remove  False positive On Click Of Check Box" /-->
    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:handler name="init" value="{!this}" action="{!c.doinit}" />
    
    
    <div class="slds-section slds-is-open">
        <h3 class="slds-section__title slds-theme_shade">
            <span class="slds-truncate slds-p-horizontal_small" title="Section Title">Family Records</span>
            <lightning:layoutItem class="right-align">
                <lightning:button label="New" onclick="{!c.createRecord}" class="buttonStyle"/>
            </lightning:layoutItem> 
        </h3>
        <lightning:datatable data="{! v.mydata }" 
                             columns="{! v.mycolumns }" 
                             keyField="Id" 
                             onrowselection="{! c.removeRow }"
                             hideCheckboxColumn="false"
                             />
        
    </div>
</aura:component>
Controller is given below:-
({
    doinit : function(component, event, helper) {
        component.set('v.mycolumns', [
            
            {label: 'Name', fieldName: 'linkName', type: 'url', 
             typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},
            /*{label: 'Sister Account ', fieldName: 's1', type: 'url', 
             typeAttributes: {label: { fieldName: 'Sister_Company__r.Name' }, target: '_blank'}},
            {label: 'Sister Account ', fieldName: 's2', type: 'url', 
             typeAttributes: {label: { fieldName: ' Sister_Company2__r.Name' }, target: '_blank'}}*/
            {label: 'Division', fieldName: 'd1', type: 'text'},
            {label: 'Sister Account', fieldName: 's1', type: 'text'},
            {label: 'Sister Account', fieldName: 's2', type: 'text'},
            {label: 'State', fieldName: 'State__c', type: 'text'},
            {label: 'Type', fieldName: 'Type__c', type: 'text'},
            {label: 'Owner', fieldName: 'Oid', type: 'text'}
        ]);
        
        var action = component.get('c.fetchRecords');
        var recordId =  component.get("v.recordId");
        action.setParams({rid : recordId});
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var allValues = response.getReturnValue();
                
                for (var i = 0; i < allValues.length; i++) {
                    var row = allValues[i];
                    row.s1 = row.Sister_Company__r.Name;
                }
                for (var i = 0; i < allValues.length; i++) {
                    var row = allValues[i];
                    row.s2 = row.Sister_Company2__r.Name;
                }
                 for (var i = 0; i < allValues.length; i++) {
                    var row = allValues[i];
                    row.d1 = row.Sister_Company__r.RecordType.Name;
                }
                for (var i = 0; i < allValues.length; i++) {
                    var row = allValues[i];
                    row.Oid = row.Owner.Name;
                }
                 
                allValues.forEach(function(record){
                    record.linkName = '/'+record.Id;
                });
                /* allValues.forEach(function(record){
                     record.s1 = '/'+record.Sister_Company__r.Id;
                }); 
                 allValues.forEach(function(record){
                    record.s2 = '/'+record.Sister_Company2__r.Id;
                }); */
                console.log("allValues--->>> " + allValues);
                component.set('v.mydata', allValues);
            }
            else if(state === "ERROR") {
                var errors = response.getError();
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log("Error Message: " + errors[0].message);
                    }
                }
                else{
                    console.log("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
    },
    
    removeRow : function(component, event, helper){
        var selRows = event.getParam('selectedRows');
        
        // Remove the record from the table
        var rows = component.get('v.mydata');
        for (var i = 0; i<selRows.length; i++){    
            var rowIndex = rows.indexOf(selRows[i]);
            console.log('rowIndex---->>> ' + rowIndex);
            var r=rows.splice(rowIndex, 1);   
            
            console.log('rrr---->>> ' + JSON.stringify(r));
            component.set('v.mydata', rows);
        }
    },
    
     createRecord : function (component, event, helper) {
        var createRecordEvent = $A.get("e.force:createRecord");
        createRecordEvent.setParams({
            "entityApiName": "FBG_Family__c"
        });
        createRecordEvent.fire();
    }
    
})
Deepali KulshresthaDeepali Kulshrestha
Hi Sumit,
I went through your code and found that you are calling your apex class in "doInit " which will surely return the record that you have saved again and again. In order to overcome this condition, you can call your apex method in a new method and assign that method to data table because if you will do this in the doInit then on whenever the page will be loaded, the action will be called. Please refer to the following code as it may be helpful in  solving your query:
 
doinit : function(component, event, helper) {
        component.set('v.mycolumns', [
            
            {label: 'Name', fieldName: 'linkName', type: 'url', 
             typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},
            /*{label: 'Sister Account ', fieldName: 's1', type: 'url', 
             typeAttributes: {label: { fieldName: 'Sister_Company__r.Name' }, target: '_blank'}},
            {label: 'Sister Account ', fieldName: 's2', type: 'url', 
             typeAttributes: {label: { fieldName: ' Sister_Company2__r.Name' }, target: '_blank'}}*/
            {label: 'Division', fieldName: 'd1', type: 'text'},
            {label: 'Sister Account', fieldName: 's1', type: 'text'},
            {label: 'Sister Account', fieldName: 's2', type: 'text'},
            {label: 'State', fieldName: 'State__c', type: 'text'},
            {label: 'Type', fieldName: 'Type__c', type: 'text'},
            {label: 'Owner', fieldName: 'Oid', type: 'text'}
        ]);
        
        var action = component.get('c.fetchRecords');
        var recordId =  component.get("v.recordId");
        action.setParams({rid : recordId});
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var allValues = c.get("v.mydata");
                
                for (var i = 0; i < allValues.length; i++) {
                    var row = allValues[i];
                    row.s1 = row.Sister_Company__r.Name;
                }
                for (var i = 0; i < allValues.length; i++) {
                    var row = allValues[i];
                    row.s2 = row.Sister_Company2__r.Name;
                }
                 for (var i = 0; i < allValues.length; i++) {
                    var row = allValues[i];
                    row.d1 = row.Sister_Company__r.RecordType.Name;
                }
                for (var i = 0; i < allValues.length; i++) {
                    var row = allValues[i];
                    row.Oid = row.Owner.Name;
                }
                 
                allValues.forEach(function(record){
                    record.linkName = '/'+record.Id;
                });
                /* allValues.forEach(function(record){
                     record.s1 = '/'+record.Sister_Company__r.Id;
                }); 
                 allValues.forEach(function(record){
                    record.s2 = '/'+record.Sister_Company2__r.Id;
                }); */
                console.log("allValues--->>> " + allValues);
                component.set('v.mydata', allValues);
            }
            else if(state === "ERROR") {
                var errors = response.getError();
                if(errors){
                    if(errors[0] && errors[0].message){
                        console.log("Error Message: " + errors[0].message);
                    }
                }
                else{
                    console.log("Unknown Error");
                }
            }
        });
        $A.enqueueAction(action);
    },



Because when you are setting the data in remove method then it will set the list as per the deletion but as soon as the page is refreshed it will again bring the data from the apex. So you must get and set  "mydata" list there.
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha.
sumit suwalkasumit suwalka
 Hi,
                       is it possible that when i click on checkbox ,i have a field called false positive(False_Positive__c).its value would be true when i click on checkbox.
                       after that i will query only those records where this field is false .so the records is removed.
                       HOw to do it?
                       Any suggestions?
                       My Class is given below:-
                       public class FBGFamilyController {
        @AuraEnabled
    public static List<FBG_Family__c> fetchRecords(String rid) {
        return [SELECT Id, Name, Owner.Name,Type__c, Sister_Company__r.RecordType.Name, False_Positive__c,
                State__c, Division1__c, Sister_Company__r.Name, Sister_Company2__r.Name 
                FROM FBG_Family__c
                WHERE Sister_Company__c =: rid 
                AND False_Positive__c = FALSE
                ORDER BY Name  ASC ];
    }