0

I am using two different data tables in lightning.

  1. On page load i am showing one data table.
  2. In search bar on search of particular keyword,i am displaying another datatable to display the search results.

when search results is displayed the page load datatable wont appear.

Now the issue is i will select one particular record from on page datatable.

I will search some results and will select one record from second datatable also.

on selection of results from second datatable the first datatable selected records were clearing out.How to handle this scenerio?

Component attributes:

<aura:attribute name="selectedRowsDetails" type="Object" />
    <aura:attribute name="selectedRowsList" type="List" />
    <aura:attribute name="maxRowSelection" type="Integer" default="25"/>
    <aura:attribute name="selectedRows" type="List" />

First data table i am using as below:

<aura:if isTrue="{!empty(v.searchResult)}">
<lightning:datatable columns="{!v.columns}"
                     data="{!v.data}"
                     keyField="Id"
                     onrowaction="{!c.handleRowAction}"
                     selectedRows="{!v.selectedRows}"                                                    
                     maxRowSelection="{!v.maxRowSelection}"
                     onrowselection="{!c.handleSelectedRow}"                                                                 
                     enableInfiniteLoading="true"
                     loadMoreOffset="{!v.loadMoreOffset}"
                     sortedBy="{!v.sortedBy}"                                                                
                     sortedDirection="{!v.sortedDirection}"                                                              
                     defaultSortDirection="{!v.defaultSortDirection }"
                     onsort="{!c.handleColumnSorting}"
                     onloadmore="{!c.handleLoadMoreAssets}"/>
</aura:if>

second data table as below:

<aura:if isTrue="{!not(empty(v.searchResult))}">
<lightning:datatable columns="{!v.columns}"
                     data="{!v.searchResult}"
                     keyField="Id"
                     onrowaction="{!c.handleRowAction}"
                     selectedRows="{!v.selectedRows}"                                                    
                     maxRowSelection="{!v.maxRowSelection}"
                     onrowselection="{!c.handleSelectedRow}"                                                                 
                     enableInfiniteLoading="true"
                     loadMoreOffset="{!v.loadMoreOffset}"
                     sortedBy="{!v.sortedBy}"                                                                
                     sortedDirection="{!v.sortedDirection}"                                                              
                     defaultSortDirection="{!v.defaultSortDirection }"
                     onsort="{!c.handleColumnSorting}"
                     onloadmore="{!c.handleLoadMoreAssets}"/>
</aura:if>

controller methods for the above tables:

    handleSelectedRows: function (component, event, helper) {
        var data = component.get('v.data');
        var selectedRowList =  component.get("v.selectedRowsList");
    },
handleSelectedRow: function(component, event, helper){
        var selectedRows = event.getParam('selectedRows');
        component.set("v.selectedRowsCount", selectedRows.length);
        let obj =[] ; 
        for (var i = 0; i < selectedRows.length; i++){
            obj.push({Name:selectedRows[i].Name});
            }
        component.set("v.selectedRowsDetails", JSON.stringify(obj) );
        component.set("v.selectedRowsList", event.getParam('selectedRows'));
        },

enter image description here

In the above screen shot added products from available datatable genwattdiesel100kw and added searched product SLA:Silver.In the same way i want to add the products from two datatables.

I wrote two different onrowselection functions,to handle two different datatable attributes.Now how to combile those two attributes into single attribute to get all the selected items.

2
  • Please include samples of the code you're running, such as the declarations of the data tables and your onrowselection handler. It sounds like you're just overwriting the data into the same attribute.
    – David Reed
    Jan 28, 2019 at 12:52
  • You need use the keyField to store the data as a session selected values Jan 28, 2019 at 13:00

2 Answers 2

0

Your data tables are sharing virtually all of their bindings and action handlers:

                 onrowaction="{!c.handleRowAction}"
                 selectedRows="{!v.selectedRows}"                                                    
                 maxRowSelection="{!v.maxRowSelection}"
                 onrowselection="{!c.handleSelectedRow}"                                                                 
                 loadMoreOffset="{!v.loadMoreOffset}"
                 sortedBy="{!v.sortedBy}"                                                                
                 sortedDirection="{!v.sortedDirection}"                                                              
                 defaultSortDirection="{!v.defaultSortDirection }"
                 onsort="{!c.handleColumnSorting}"
                 onloadmore="{!c.handleLoadMoreAssets}"

Your controller code doesn't look at which data table is the source of any given event, and instead populates the relevant data into a single component attribute:

    component.set("v.selectedRowsDetails", JSON.stringify(obj) );
    component.set("v.selectedRowsList", event.getParam('selectedRows'));

You will find that this code structure has a number of unexpected effects, including "smearing" of both selection and sorting data across your tables. I would anticipate your infinite loading to behave rather strangely too.

If your tables have data and action that's entirely independent of one another, you'll probably find it easiest to implement separate controller actions for the two tables. You'll certainly need separate attributes to act as backing stores for the table state, such as the sorting order and key and the current selected rows.

6
  • I want to select the records from both the tables.How can i achieve it? This functionality is same as adding products to an opportunity.
    – dileep
    Jan 28, 2019 at 17:15
  • As I stated above, you will need to write controller logic that is tailored for each of the tables separately, and maintain their state in separate attributes.
    – David Reed
    Jan 28, 2019 at 17:17
  • I'd be happy to expand in a more specific answer, but I would suggest you start by trying to implement this functionality and come back to ask about a specific issue you encounter.
    – David Reed
    Jan 28, 2019 at 17:25
  • Created two different methods for two different tables and storing the values in two different attributes.Now how will all those come under single list.
    – dileep
    Jan 29, 2019 at 10:19
  • component.set("v.secondselectedRowsDetails", JSON.stringify(secobj) ); component.set("v.secondselectedRowsList", event.getParam('selectedRows'));
    – dileep
    Jan 29, 2019 at 10:20
0

You probably have 2 tables using only 1 data, assuming that you have posted your code here. Take note that onrowselection="{! c.rowSelectAction}"/> will handle the actions upon row selection and will also affect the data from where your 2 tables are using. If you could just post your code here so that well see what the real problem is then I can help you more than just giving you tips.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .