We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

lisebox with multi column

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

1 Reply

SP Sangeetha Priya Murugan Syncfusion Team September 30, 2019 05:12 AM

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. 
 
 
Could you please check the above sample and get back to us, if you need any further assistance on this. 
 
Regards, 
Sangeetha M 



Loader.
Live Chat Icon For mobile
Up arrow icon