SFTab and SfListView problem

[Richard Rooks]

When a SfListview is contained inside of a SFTab the SfListview is adversely affected. The layout of the items in the SfListView are truncated. The below snippet works fine outside of a SfTab control but inside of it there is a problem.

Zip file contains a image of the problem.

Here is the code snippet:

                            <SfTab Height="320" HeaderPlacement="HeaderPosition.Left" CssClass="e-background e-accent">

                                <TabItems>

                                    <TabItem>

                                        <ChildContent>

                                            <TabHeader Text="Company"></TabHeader>

                                        </ChildContent>

                                        <ContentTemplate>

                                            <SfListView DataSource="@locations" @ref="LocationList" ShowCheckBox="true" Height="120px" ID="loc">

                                                <ListViewFieldSettings TValue="DealerLocation" Id="Id" Text="Location"></ListViewFieldSettings>

                                            </SfListView>

                                        </ContentTemplate>

                                    </TabItem>

                                </TabItems>

                            </SfTab>

Richard

Attachment: listview_c34b1a73.zip

[Sowmiya Padmanaban]

Hi Richard,  

 

Greetings from Syncfusion support. 

 

We have checked your reported problem with ListView component. Your reported issue occurred due to tab styles which overrides the default ListView component styles. 

 

To resolve your issue, please add the below styles in your application. 

 

<style> 

    .e-tab.e-vertical-tab .e-listview .e-content { 

        display: block; 

        height: 100%; 

    } 

    /*Inherit the height of list element.*/ 

    .e-listview .e-list-parent { 

        height: 100%; 

        overflow: auto; 

    } 

</style> 

 

Please, refer the sample link below. 

 

https://www.syncfusion.com/downloads/support/forum/160677/ze/ListView-805249449.zip 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Richard Rooks]

Worked great thank you so much.

Richard

[Sowmiya Padmanaban]

Hi Richard,  

  

We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. 

  

Regards,  

Sowmiya.P 

  

  

[Ángel]

Hello,

I'm facing a similar issue with the syncfusion tab and listview, in my situation the tab is inside a dashboard template that uses some bootstrap classes.

I have tried your solution but the listview items doesn't even show complete. 

Its important to notice that i have used a first tab with an EditForm and some other SyncFusion controls (calendar, combobox, uploader, etc), with no problem.

I'm sure that the data is being fetched correctly, is a design issue, is there a way to resolve this?

Attached the razor.component 

Here is some screen shots:

Wrong tab with the listview (in yellow), i just see 2 small boxes with no information, but when i click it it triggers correctly the model information:

This tab is OK:

Please help!!

Attachment: DocAdmins_bbf7ee6c.zip

[Sharon Sanchez Selvaraj]

Hi Angel, 

 

Thanks for contacting Syncfusion Support.  

 

We checked with the provided razor page and the screenshots. With the given details, we have rendered the ListView inside the Tab control with EditForm as given in your razor page with the specified input controls. Also, we noticed that you had fetched the data from the DB and set for the ListView.  

 

We have done the same by rendering the local data in OnInitializedAsync method as given in your code. 

 

Refer to the code snippet where the data source is set. 

 

protected override async Task OnInitializedAsync() 

    { 

        ……………………………………………………………… 

        await base.OnInitializedAsync(); 

        ListaAdmins.Add(new Data { Name = "Hennessey Venom", Id = "list-01" }); 

        ListaAdmins.Add(new Data { Name = "Bugatti Chiron", Id = "list-02" }); 

        ……………………………………………………………… 

        ……………………………………………………………… 

 

    } 

 

Refer to the code snippet of the ListView component. 

 

<EditForm EditContext="EC"> 

                    <ValidationSummary Model="employee" /> 

                    <DataAnnotationsValidator /> 

 

                    <SfListView DataSource="@ListaAdmins"> 

                         <ListViewEvents TValue="Data" Clicked="@diClick"></ListViewEvents> 

                         <ListViewFieldSettings TValue="Data" Id="Id" Text="Name"></ListViewFieldSettings> 

                     </SfListView> 

</EditForm> 

 

We suspect that in your case, the ListView must have rendered before the data had been fetched from DB and hence the empty ListView is rendered. However, the given issue was not replicated in our end and refer to the below sample for reference. 

 

https://www.syncfusion.com/downloads/support/forum/160677/ze/ListView_inside_Tab485838815.zip 

 

If the issue persists, kindly modify the above sample to reproduce your issue else please provide the data returned from your DB so that we could check this from our end and serve you better. 

 

Please get back to us if you need further assistance. 

 

Regards, 

 

Sharon Sanchez S.