JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › ListBox › Set the selected values/index programmatically as an embedded component
- This topic has 5 replies, 2 voices, and was last updated 2 years, 9 months ago by
TurricanDE.
-
AuthorPosts
-
November 19, 2021 at 11:36 am #102554
TurricanDE
ParticipantI 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, 9 months ago by
TurricanDE.
November 19, 2021 at 11:40 pm #102560ivanpeevski
ParticipantHello 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/November 22, 2021 at 9:03 am #102573TurricanDE
ParticipantThank 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();
}
}November 22, 2021 at 6:02 pm #102580ivanpeevski
ParticipantHello 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/November 23, 2021 at 11:16 am #102588TurricanDE
ParticipantI 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…
-
This topic was modified 2 years, 9 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.