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.
|
<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>
|
|
<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> |
|
<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> |
