Set the selected values/index programmatically as an embedded component

[TurricanDE]

I have a ListBox component embedded in a Window component like this:

<Window @ref=”window” IsOpened=”@OpenDialog” label=”Test” Modal=”true” OnClose=”OnClosed” HeaderButtons=”@HeaderButtons”>

<ListBox
DataSource=”@Datasource” style=”width:100%”
SelectionMode=ListSelectionMode.One
SelectedValues=”@SelectedValues”>
</ListBox>

</Window>

@code {

// In the data source the values are “1”,”2″,”3″…..so I want to select the second item initially for example

private string[] SelectedValues{ get; set; } = new string[] { “2”};

…..

}

But the item will not be selected in the initial load. When I move the ListBox  component out of the Window component then the initial selection works.

 

 

• This topic was modified 2 years, 5 months ago by TurricanDE.

[ivanpeevski]

Hello TurricanDE,

Based on the information you provided, I created this demo for setting the selected values of a ListBox, embedded in a Window component:
<div>
<div><Window  IsOpened=”true” Label=”Test” Modal=”true” OnClose=”OnClosed” HeaderButtons=”@headerButtons”></div>
<div>    <ListBox DataSource=”@myData” SelectedValues=”@selectedValues”></ListBox></div>
<div></Window></div>
<div>@code {</div>
<div>    Window window;</div>
<div>    private string[] myData = new string[]{“1″,”2″,”3”};</div>
<div>    private string[] selectedValues = new string[]{“2”, “3”};</div>
<div>    private string[] headerButtons = new string[]{“pin”, “maximize”, “close”};</div>
<div>    private bool opened = true;</div>
<div></div>
<div>    private void OnClosed() {</div>
<div>        Console.WriteLine(“Closed!”);</div>
<div>    }</div>
<div>}</div>
</div>
 

Unfortunately, I was not able to repoduce your issue, I suggest checking if you provide the right type of values to the properties.
If the issue continues, please do not hesitate to contact us again by providing us with the full code of the page so we can help you find the exact solution!
Best regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[TurricanDE]

Thank you for the example. The example is working but unfortunately in my case it is not

and I can’t figured it out why the initial selection is not working:

Here is my code example:

I have the following parent component:

<h3>ParentComponent</h3>

<Button id=”openButton” OnClick=”OnClick”>Open/Close</Button>

<ChildComponent OpenDialog=”@opened” OnClosed=”OnClosed” >

</ChildComponent>

@code
{
private bool opened = false;

private void OnClick()
{
opened = !opened;
}

private void OnClosed()
{
opened = false;
}
}

And the child component is:

<h3>ChildComponent</h3>

<Window IsOpened=”@OpenDialog” Label=”Test” Modal=true HeaderButtons=”@headerButtons” OnClose=”Closed”>
<ListBox DataSource=”@myData” SelectedValues=”@selectedValues” Editable=true>
</ListBox>
</Window>

@code {

[Parameter]
public bool OpenDialog { get; set; } = false;

[Parameter]
public EventCallback OnClosed { get; set; }

private string[] myData = new string[] { “1”, “2”, “3” };
private string[] selectedValues = new string[] { “2”, “3” };
private string[] headerButtons = new string[] { “close” };

private async Task Closed(Event ev)
{
await OnClosed.InvokeAsync();
}
}

 

[ivanpeevski]

Hello TurricanDE,

Thank you for providing the additional code. Unfortunately, I was not able to reproduce the issue and your example is working on my end. Mosy likely the issue doesn’t come from a specific component, but from the setup of the project. I suggest creating a clean application to see if you can replicate this behavior according to the way you set up the components. Also please make sure that you are using the latest version of Smart.Blazor and that you are not using outdated version of Microsoft’s frameworks. Smart.Blazor has the following dependancies:

<ul class="list-unstyled dependency-group">
 	<li><a href="https://www.nuget.org/packages/Microsoft.AspNetCore.Components/">Microsoft.AspNetCore.Components</a> (>= 3.1.2)</li>
 	<li><a href="https://www.nuget.org/packages/Microsoft.AspNetCore.Components.Web/">Microsoft.AspNetCore.Components.Web</a> (>= 3.1.2)</li>
 	<li><a href="https://www.nuget.org/packages/Microsoft.CSharp/">Microsoft.CSharp</a> (>= 4.7.0)</li>
 	<li><a href="https://www.nuget.org/packages/Newtonsoft.Json/">Newtonsoft.Json</a> (>= 12.0.3)</li>
</ul>

If the problem continues, you can also share the relevant part of the project, so that we can help you find the issue.
Best regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

• This reply was modified 2 years, 5 months ago by admin.
• This reply was modified 2 years, 5 months ago by admin.

[TurricanDE]

I don’t think it is a dependency problem. I use the current Smart.Blazor 10.2.2.

As I mentioned, if the ListBox is outside the Window component the selection works like that:

<h3>ChildComponent</h3>

<ListBox DataSource=”@myData” SelectedValues=”@selectedValues” Editable=true>
</ListBox> // Selection works!

<Window IsOpened=”@OpenDialog” Label=”Test” Modal=true HeaderButtons=”@headerButtons” OnClose=”Closed”>
<ListBox DataSource=”@myData” SelectedValues=”@selectedValues” Editable=true>
</ListBox> // Selection not working!
</Window>

The “outside” listbox renders (Item 2 and 3)

<smart-list-item blazor-state-mode=”none” smart-blazor=”” id=”Smart0HMDEDNV87HFN” class=”smart-element smart-list-item” _bl_703cf334-ed07-4727-84a1-38adbe515b0e=”” value=”2″ label=”2″ role=”option” <span style=”text-decoration: underline;”>selected=”” aria-selected=”true”</span>>

<smart-list-item blazor-state-mode=”none” smart-blazor=”” id=”Smart0HMDEDNV87HFO” class=”smart-element smart-list-item” _bl_c2bb693a-fb93-447a-bed9-fd54d7765e4a=”” value=”3″ label=”3″ role=”option” focus=””<span style=”text-decoration: underline;”> selected=”” aria-selected=”true”</span>>

But the Listbox inside the Window component renders:

<smart-list-item blazor-state-mode=”none” smart-blazor=”” id=”Smart0HMDEDNV87HG5″ class=”smart-element smart-list-item” _bl_8e88a510-7f47-4889-9811-dae64596f970=”” value=”2″ label=”2″ role=”option” <span style=”text-decoration: underline;”>aria-selected=”false”</span>>

<smart-list-item blazor-state-mode=”none” smart-blazor=”” id=”Smart0HMDEDNV87HG6″ class=”smart-element smart-list-item” _bl_f8b55511-a6b5-4600-962a-75390155e7b6=”” value=”3″ label=”3″ role=”option” focus=”” <span style=”text-decoration: underline;”>aria-selected=”false”</span>>

How could that be? There is no additional logic in the component, I posted the full example above (ParentComponent/ChildComponent)

I have no idea…

[Author]

Posts