JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums ListBox Set the selected values/index programmatically as an embedded component

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #102554
    TurricanDE
    Participant
    Up
    0
    Down

    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 weeks ago by TurricanDE.
    #102560
    ivanpeevski
    Participant
    Up
    0
    Down

    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/

    #102573
    TurricanDE
    Participant
    Up
    0
    Down

    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();
    }
    }

     

    #102580
    ivanpeevski
    Participant
    Up
    0
    Down

    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 1 week, 4 days ago by admin.
    • This reply was modified 1 week, 4 days ago by admin.
    #102588
    TurricanDE
    Participant
    Up
    0
    Down

    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…

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.