2

Lightning component is having table which contains row of records. Each record row has 2 date input fields.

I am using <ui:inputDate> for date fields.

<ui:inputDate aura:id="endDate" label="End Date" 
              value="{!v.account.End_Due_Date__c}" 
              displayDatePicker="true" />

If table contains around 50-70 records then the loading time is very long and it takes around 21-25 seconds to load the table.

I also tried keeping displayDatePicker="false" but this doesn't help in anyways.

Is there any trick/solution or better alternatives which can solve this problem.

Appreciate if code snippets are given with solution.

Adding code:

Iteration code generating date component:

<aura:iteration items="{!v.milestone.deliverables}" var="deliverable" indexVar="i">
    <c:FormInputComponent deliverable="{!deliverable}" index="{!i}" />
</aura:iteration>

FormInputComponent having date fields:


<aura:component>
    <aura:attribute name="deliverable" type="object" />
    <table>
        <tr>
            <td>
                <form class="slds-form--inline">
                    <div class="slds-form-element">
                        <ui:outputText value="{!v.deliverable.name}" />
                    </div>
                    <div class="slds-form-element">
                        <ui:inputCheckbox aura:id="cancel" label="Cancel" />
                    </div>
                    **
                    <div class="slds-form-element" style="white-space: nowrap">
                        <ui:inputDate aura:id="startDate" label="Start Date" value="{!v.deliverable.startDate}" displayDatePicker="true" class="slds-input" />
                    </div>
                    <div class="slds-form-element" style="white-space: nowrap">
                        <ui:inputDate aura:id="dueDate" label="Due Date" value="{!v.deliverable.dueDate}" displayDatePicker="true" class="slds-input" />
                    </div>
                    **
                    <div class="slds-form-element">
                        <ui:inputTextArea aura:id="Description" value="{!v.deliverable.description}" label="Deliverable Description" rows="2" class="slds-input" />
                    </div>
                    <div class="slds-form-element">
                        <ui:button label="Delete" press="{!c.deleteDeliverable}" class="slds-button slds-button--brand" />
                    </div>
                </form>
            </td>
        </tr>
    </table>
</aura:component>
2
  • What else are you loading on the page and how are you loading it? Is this component for mobile or for desktop? Could you show us the rest of your code? Is there a reason you need to load all of the 50-70 records for display? That obviously takes time. Can you limit to last 10 or 15 records? Are the existing records being edited? If not, why do you need <ui:inputDate> as opposed to <ui:outputDate>?`
    – crmprogdev
    Jun 12, 2016 at 13:30
  • Added the code in original question. I need to have editable date fields, so can't use outputDate. And can't limit the count of record. Jun 13, 2016 at 0:28

0

You must log in to answer this question.

Browse other questions tagged .