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

List with Trailing Radio Buttons

Hello. If possible, give an example of a  listbox similar to the attached screenshot that supports RTL


Attachment: List_with_Trailing_Radio_Buttons_cab17761_f1708bcd.rar

7 Replies

SP Sangeetha Priya Murugan Syncfusion Team September 30, 2019 10:11 AM UTC

Hi Ebi, 
 
Thank you for contacting Syncfusion support. 
 
We have checked your reported requirement “ListBox with trailing RadioButton that supports RTL” and it can be achievable by using “EnableRtl” property in ListBox and “LablePosition” property in RadioButton as like in the below code example. 
 
Code Block: 
 
  <EjsListBox Value="@Content" DataSource="@Data" TValue="string[]" ModelType="Model" EnableRtl="true"> 
    <ListBoxFieldSettings Text="Text" Value="Text"></ListBoxFieldSettings> 
 
   <ListBoxTemplates> 
        <ItemTemplate> 
            @{ 
                ListData currentData = context as ListData; 
                <EjsRadioButton ID=@currentData.Text name="listRadio" Label=@currentData.Text LabelPosition="RadioLabelPosition.Before"></EjsRadioButton> 
            } 
        </ItemTemplate> 
    </ListBoxTemplates> 
 
</EjsListBox> 
 
<style> 
     .e-listbox-wrapper.e-list-template { 
        width: 440px; /*customize the listbox width*/ 
    } 
     label.e-right{ 
         width:420px; /*customize the label width based on the listbox width*/ 
     } 
     .e-blazor-template{ 
         padding:10px; 
     } 
</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 



ET ebi torabi October 4, 2019 05:29 PM UTC

Hi Sangeetha M 
Thanks for your great support


SP Sangeetha Priya Murugan Syncfusion Team October 7, 2019 04:43 AM UTC

Hi Ebi, 
 
Thank you for your update, Please feel free to contact us if you need any further assistance on this. 
  
Regards, 
Sangeetha M 



ET ebi torabi October 8, 2019 09:32 AM UTC

Hi Sangeetha M
How do I place a horizontal line between the items as a separator

Attachment: separator_line_in_List_with_Trailing_Radio_Buttons_e487a72b.rar


SP Sangeetha Priya Murugan Syncfusion Team October 9, 2019 11:27 AM UTC

Hi Ebi, 
 
Thank you for your update. 
 
We have checked your reported requirement based on your provided screenshot and we suspect that you need, grouping support in ListBox. And it can be achievable by using GroupBy property as like in the below code example with CSS customization in it. 
 
Code Example: 
 
<EjsListBox Value="@Content" DataSource="@Data" TValue="string[]" ModelType="Model" EnableRtl="true"> 
    <ListBoxFieldSettings Text="Text" Value="Text" GroupBy="Category"></ListBoxFieldSettings> 
 
    <ListBoxTemplates> 
        <ItemTemplate> 
            @{ 
                ListData currentData = context as ListData; 
                <EjsRadioButton ID=@currentData.Text name="listRadio" Label=@currentData.Description LabelPosition="RadioLabelPosition.Before"></EjsRadioButton> 
            } 
        </ItemTemplate> 
    </ListBoxTemplates> 
</EjsListBox> 
 
@code { 
 
    private string[] Content = new string[] { "Cat Photos" }; 
 
    public ListData Model = new ListData(); 
    public List<ListData> Data = new List<ListData> 
{ 
        new ListData { Text = "CatPhotos", Description = "Cat Photos", Category ="Photos" }, 
        new ListData { Text = "DogPhotos", Description = "Dog Photos", Category ="Photos" }, 
        new ListData { Text = "Potatoes", Description = "Potatoes", Category ="Vegetables" }, 
        new ListData { Text = "Carrots", Description = "Carrots", Category ="Vegetables" }, 
        new ListData { Text = "Banana", Description = "Banana", Category ="Fruits" }, 
        new ListData { Text = "Apple", Description = "Apple", Category ="Fruits" }, 
        }; 
 
    public class ListData 
    { 
        public string Text { get; set; } 
        public string Description { get; set; } 
        public string Category { get; set; } 
    } 
 
} 
<style> 
     .e-listbox-wrapper.e-list-template { 
        width: 440px; /*customize the listbox width*/ 
    } 
     label.e-right{ 
         width:420px; /*customize the label width based on the listbox width*/ 
     } 
     .e-blazor-template{ 
         padding:10px; 
     } 
    /*To customize the group header*/ 
     .e-listbox-wrapper .e-list-group-item{ 
         height: 0px; 
         font-size: 0px; 
     } 
</style> 
 
For your convenience, we have modified our previously updated sample based on your requirement. Please find the link below. 
 
 
For more details, regarding the grouping support. Please refer the below link. 
 
 
 
Could you please check the above details and get back to us, if you need any further assistance on this. 
 
Regards, 
Sangeetha M 




ET ebi torabi October 9, 2019 08:00 PM UTC

Hi Sangeetha M .Unfortunately I don't need grouping and I just need a line between items to separate them


SP Sangeetha Priya Murugan Syncfusion Team October 10, 2019 09:42 AM UTC

Hi Ebi, 
 
Thank you for your update. 
 
We have checked your reported requirement and it can be achievable in ListBox by adding the separator Div to list items with ItemTemplate support as like in the below code example. 
 
Code Example: 
 
<h2>ListBox</h2> 
<EjsListBox Value="@Content" DataSource="@Data" TValue="string[]" ModelType="Model" EnableRtl="true" CssClass="e-custom"> 
    <ListBoxFieldSettings Text="Text" Value="Text"></ListBoxFieldSettings> 
 
    <ListBoxTemplates> 
        <ItemTemplate> 
            @{ 
                ListData currentData = context as ListData; 
                <EjsRadioButton ID=@currentData.Text name="listRadio" Label=@currentData.Description LabelPosition="RadioLabelPosition.Before"></EjsRadioButton> 
                @*Condition to add the div for seperator*@ 
                if (currentData.Text == "DogPhotos" || currentData.Text == "Carrots") 
                { 
                    <div class="e-seperator"></div> 
                } 
            } 
        </ItemTemplate> 
    </ListBoxTemplates> 
</EjsListBox> 
 
 
@code { 
 
    private string[] Content = new string[] { "Cat Photos" }; 
    public ListData Model = new ListData(); 
    public List<ListData> Data = new List<ListData> 
     { 
        new ListData { Text = "CatPhotos", Description = "Cat Photos" }, 
        new ListData { Text = "DogPhotos", Description = "Dog Photos" }, 
        new ListData { Text = "Potatoes", Description = "Potatoes" }, 
        new ListData { Text = "Carrots", Description = "Carrots" }, 
        new ListData { Text = "Banana", Description = "Banana" }, 
        new ListData { Text = "Apple", Description = "Apple" }, 
        }; 
 
    public class ListData 
    { 
        public string Text { get; set; } 
        public string Description { get; set; } 
        public string Category { get; set; } 
    } 
 
} 
<style> 
     .e-listbox-wrapper.e-list-template.e-custom  { 
        width: 450px; /*customize the listbox width*/ 
    } 
     label.e-right{ 
         width:420px; /*customize the label width based on the listbox width*/ 
     } 
     .e-custom .e-radio-wrapper{ 
         padding:10px; 
     } 
     /*To customize the seperator div*/ 
     .e-seperator{ 
         border: 1px solid #e0e0e0; 
     } 
</style> 
 
For your convenience, we have modified our previously updated sample. Please find the link below. 
 
 
Could you please check the above sample and kindly get back to us with the details, whether it satisfies your requirement or if you need any further improvisation on this. Based on your provided details we will check and provide you better solution. 
 
Regards, 
Sangeetha M 


Loader.
Live Chat Icon For mobile
Up arrow icon