lisebox with multi column

[ebi torabi]

I would like to have a listbox that shows information in multiple columns similar to the attached screenshot, not one column. If possible, please give an example

Attachment: multilineListBox_6072948d.rar

[Sangeetha Priya Murugan]

Hi Ebi, 

 

Thank you for contacting Syncfusion support. 

 

We have checked your reported requirement “To show the ListBox items in multiple columns” and it can be achievable in listbox with using CssClass property as like in the below code example. 

 

Code Block: 

 

<EjsListBox Value=@Value DataSource="@Data" TValue="string[]" CssClass="e-custom"> 

    <ListBoxSelectionSettings ShowCheckbox="true"></ListBoxSelectionSettings> 

</EjsListBox> 

 

<style> 

    .e-listbox-wrapper .e-list-parent { 

        display: flex; 

        flex-wrap: wrap; 

    } 

 

    @@media (min-width: 320px) and (max-width:480px) { 

        .e-custom .e-list-item { 

            width: 100%; 

        } 

    } 

 

    @@media (min-width: 480px) and (max-width:780px) { 

        .e-custom .e-list-item { 

            width: 50%; 

        } 

    } 

 

    @@media (min-width: 780px) and (max-width:1920px) { 

        .e-custom .e-list-item { 

            width: 25%; 

        } 

    } 

</style> 

 

 

For you convenience, we have prepared the sample based on our suggestion. Please find the sample link below. 

 

Link: https://www.syncfusion.com/downloads/support/forum/147947/ze/ListBoxWithMultiColumn-1114240370 

 

Could you please check the above sample and get back to us, if you need any further assistance on this. 

 

Regards, 

Sangeetha M