Reply To: Set items read only (from data source) (Blazor)

[ivanpeevski]

Hi turricanDE,

The readonly property is available to the ListItem component, so to create a readonly item, you can use the following code:

<ListBox SelectionMode=ListSelectionMode.One>
<ListItem Value=”1″ Readonly=”true”>Item 1</ListItem>
<ListItem Value=”2″>Item 2</ListItem>
<ListItem Value=”3″>Item 3</ListItem>
</ListBox>
Additionally, if you have data inside an array, which you want to bind to the ListBox(as in your example), you can foreach the array inside the component:
<div>
<div><ListBox SelectionMode=ListSelectionMode.One>
<div>        @foreach (var myListBoxItem in MyItems){</div>
<div>            <ListItem Value=”@(myListBoxItem.Value)” Readonly=”@(myListBoxItem.Readonly)”>@(myListBoxItem.Label)</ListItem></div>
<div>        }</div>
<div>    </ListBox></div>
<div>@code{</div>
<div>    public class MyListBoxItem</div>
<div>    {</div>
<div>        public string Value { get; set; }</div>
<div>        public string Label { get; set; }</div>
<div>        public bool Readonly { get; set; } // reserved keyword</div>
<div>    }</div>
<div>    public List<MyListBoxItem> MyItems { get; set; } = new List<MyListBoxItem>()</div>
<div>    {</div>
<div>        new MyListBoxItem { Label = “Item 1”, Value = “1”,  Readonly = true},</div>
<div>        new MyListBoxItem { Label = “Item 2”, Value = “2”, Readonly = false},</div>
<div>        new MyListBoxItem { Label = “Item 3”, Value = “3”,  Readonly = false},</div>
<div>    };</div>
<div>}</div>
</div>
I hope this will be of help!
If you have any other questions, please do not hesitate to contact us again.

Best regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/