How to set number of columns in SfListView in SfPopup from xaml

[John]

Is it possible to set the number of columns of an SfListView contained within a SfPopup in XAML?  If so how would I do that?

John

[Shivagurunathan Kamalakannan]

Hi John,   

    

Thanks for contacting Syncfusion support.   

 

Your requirement to have multiple columns in SfListview in Xaml page can be achieved by using layout manager in SfListView. You can use GridLayout so that you can load the items based on the columns. 

 

Refer the following code snippet: 

 

<syncfusion:SfListView x:Name="listView"  

                       ItemSize="50"  

                       ItemsSource="{Binding Items}" > 

 

    <syncfusion:SfListView.LayoutManager> 

        <syncfusion:GridLayout SpanCount="3"/> 

    </syncfusion:SfListView.LayoutManager> 

 

… 

 

</syncfusion:SfListView> 

 

 

We have prepared a sample in which SfListView has been loaded inside the SfPopupLayout. And it can be downloaded from the below link. 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ListViewsample-767696150 

 

Please let us  know for further assistance. 

    

Regards,   

Shivagurunathan 

[John]

Thank you very much!  How would one use OnIdiom to set different spans based on device?

John

[Shivagurunathan Kamalakannan]

Hi John,   

   

Thanks for the update.     

   

You could set OnIdiom for the SpanCount property of GridLayout. With OnIdiom you can give the values based on the type of device.   

   

Please refer the below user guideline.   

UG link: https://help.syncfusion.com/xamarin/sflistview/layouts#customize-span-count-based-on-platform   

   

Xaml code snippet:   

   

<syncfusion:SfListView.LayoutManager>   

    <syncfusion:GridLayout>   

        <syncfusion:GridLayout.SpanCount>   

            <OnPlatform x:TypeArguments="x:Int32">   

                <On Platform ="UWP">   

                    <OnIdiom x:TypeArguments="x:Int32"    

                             Phone="2"    

                             Tablet="4"    

                             Desktop="4"/>   

                </On>   

                   

                <On Platform ="Android">   

                    <OnIdiom x:TypeArguments="x:Int32"    

                             Phone="2"    

                             Tablet="4" />   

                </On>   

                   

                <On Platform ="iOS">   

                    <OnIdiom x:TypeArguments="x:Int32"    

                             Phone="2"    

                             Tablet="4" />   

                </On>   

            </OnPlatform>   

        </syncfusion:GridLayout.SpanCount>   

    </syncfusion:GridLayout>   

</syncfusion:SfListView.LayoutManager>   

   

  

   

Please refer the attached sample for more details.   

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ListViewsample_(2)1074340763   

   

Regards,   

Shivagurunathan   

[John]

Thank you it works perfect

[Farjana Parveen Ayubb]

Hi John, 

 

Thanks for the update. 

 

We are glad to know that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help you. 

 

Regards, 

Farjana Parveen A