Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
15
Add new row empty template on igx-hierarchical-grid for parent and child grid
posted

I want to add empty template row on parent and child grid in igx-hierarchical-grid in angular.

Also add empty template row on igx-row-island.


Can you provide and sample code?

  • 660
    Offline posted

    Hello,

    Thank you for posting in our community!

    I have been looking into your question and to ensure that it is addressed correctly, could you please clarify what you refer to with “empty template row”?

    Do you mean the “Grid has no data” message and the “Add row” button?

    /community/resized-image/__size/1018x629/__key/communityserver-discussions-components-files/1043/5684.igx_2D00_hgrid_2D00_empty.JPG

    If this is the case, what I could suggest is using the emptyGridTemplate property.

    <ng-template #rootGridAddRowTemplate>
        <p>Root Grid is empty! Add records.</p>
    </ng-template>
    
    <ng-template #childGridAddRowTemplate>
        <p>Child Grid is empty! Add records.</p>
    </ng-template>
    
    <igx-hierarchical-grid
        [data]="data"
        [autoGenerate]="false"
        [primaryKey]="'ID'"
        [rowEditable]="true"
        [emptyGridTemplate]="rootGridAddRowTemplate"
    >
        <igx-column field="ID"></igx-column>
    
        <igx-row-island
            [height]="null"
            [key]="'Albums'"
            [autoGenerate]="false"
            [primaryKey]="'Album'"
            [rowEditable]="true"
            [emptyGridTemplate]="childGridAddRowTemplate"
        >
            <igx-column field="Album"></igx-column>
            ...
        </igx-row-island>
    </igx-hierarchical-grid>

    Please test this approach and let me know if you need any further assistance on the matter.

    Additionally, if this is not an accurate demonstration of what you are trying to achieve, please feel free to provide any visual demonstration of the expected behavior in the form of screenshots, code snipepts, a working sample, etc.

    Thank you for your cooperation. Looking forward to your reply.

    Sincerely,
    Riva Ivanova
    Software Developer