Set items read only (from data source) (Blazor)

[TurricanDE]

Referering to the documentation:

“Determines the data source that will be loaded to the ListBox. The dataSource can be an array of strings/numbers or objects where the attributes represent the properties of a List Item. For example label, value, group. It can also be a callback that returns an Array of items as previously described.”

I have the following class (it looks like it has to be lower case):

public class MyListBoxItem
{
public int value { get; set; }
public string label { get; set; }
public bool @readonly { get; set; } // reserved keyword
}

The data source is a List<MyListBoxItem>

public List<MyListBoxItem> MyItems { get; set; } = new List<MyListBoxItem>()

{

new MyListBoxItem { label = “Item 1”, value = 1,  @readonly = true},

new MyListBoxItem { label = “Item 2”, value = 2, @readonly = false},

new MyListBoxItem { label = “Item 3”, value = 3,  @readonly = false}

};

<ListBox DataSource=”@MyItems “>

But Item 1 is not read only, I tried it with another property e.g MyListBoxItem.hidden (also the item 1 is not hidden)

Is this the way it meant to be or did I something wrong?

 

 

[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/

[TurricanDE]

Hello,

Thank you for your example.

I thought this could be done with the same property names in the data source as the ListItem have?

“The dataSource can be an array of strings/numbers or objects where the attributes represent the properties of a List Item. For example label, value, group”

With your example, the item is read only now. But what happens now is when you double click an item for editing, the input field

as some weird spaces before the text of the item then another few spaces and than the edit cursor? This will not happen if you only bind with the datasource, the edit cursor is right after the text without any spaces.

Could you check your example, when you add Editable=true to the Listbox?

[ivanpeevski]

Hello TurricanDE,

In this case, you only need to modify the line inside the foreach loop, by setting the Item Label inside a Label property:

<ListItem Value=”@(myListBoxItem.Value)” Readonly=”@(myListBoxItem.Readonly)” Label=”@(myListBoxItem.Label)”></ListItem>

 

Please, let me know if this works for you!
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/

[TurricanDE]

Oh yes, I missed to set the label explicitly for the ListItem. Now it is working as expected.

Great! Thank you!

 

[Author]

Posts