List with Trailing Radio Buttons

[ebi torabi]

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]

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. 

 

Link: https://www.syncfusion.com/downloads/support/forum/147943/ze/ListboxWithRadio48665058 

 

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]

Hi Sangeetha M 

Thanks for your great support

[Sangeetha Priya Murugan]

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]

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]

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. 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/147943/ze/ListboxWithRadio191644896 

 

For more details, regarding the grouping support. Please refer the below link. 

 

UG Link: https://ej2.syncfusion.com/blazor/documentation/listbox/sorting-grouping/?no-cache=1#grouping 

 

Demo Link: https://ej2.syncfusion.com/blazor/ListBox/Api?theme=material 

 

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]

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

[Sangeetha Priya Murugan]

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. 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/147943/ze/ListboxWithRadio-630696514 

 

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