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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

List with Trailing Radio Buttons

Thread ID:

Created:

Updated:

Platform:

Replies:

147943 Sep 28,2019 04:11 PM UTC Oct 10,2019 09:42 AM UTC Blazor 7
loading
Tags: ListBox
ebi torabi
Asked On September 28, 2019 04:11 PM UTC

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

Sangeetha Priya Murugan [Syncfusion]
Replied On 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 


ebi torabi
Replied On October 4, 2019 05:29 PM UTC

Hi Sangeetha M 
Thanks for your great support

Sangeetha Priya Murugan [Syncfusion]
Replied On 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 


ebi torabi
Replied On 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

Sangeetha Priya Murugan [Syncfusion]
Replied On 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 



ebi torabi
Replied On 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

Sangeetha Priya Murugan [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon