Need help returning selected values from multiselect.

1 Answer 28 Views
MultiSelect
David
Top achievements
Rank 1
Iron
Iron
Iron
David asked on 04 Jun 2021, 07:08 PM

I have a mutliselect contained with in a window control which is then hosted on the parent page as a component.

The window control also contains a button to click once you select from the multi select which in it's onclick code performs a call back to the mainpage like this: OnSelectedItems.InvokeAsync(selectedItems);

At this point the selected items are in the variable. But the parent page does not seem to receive them. I am sending the component code as well as how it's referenced in the parent page. I have tried everything.

This is the parent page razor code:

EditForm Model="@ps" OnValidSubmit="FilteredSearchAsync">
    <button type="submit">Search</button>
    <label id="lbldodId">
        DoD Id:
        <InputText id="DodIdSearch" @bind-Value="ps.DodId" />
        <img src="/Images/icon-magnifying-glass.jpg" @onclick="showPopup" alt="" style="width:25px;height:25px;" />
    </label>

    <SearchFilterPopupComponent IsVisible="@showFilterPopup"  InputData ="@dodIdList"  selectedItems="@selectedDodIds" OnSelectedItems="@UpdateThisComponent"></SearchFilterPopupComponent>

    <label id="lblFirstName">
        First Name:
        <InputText id="FirstNameSearch" @bind-Value="ps.FirstName" />
    </label>
    <label id="lblLastName">
        Last Name:
        <InputText id="LastNameSearch" @bind-Value="ps.LastName" />
    </label>
    <button @onclick="ClearSearch">Clear</button>
</EditForm>

 

        protected void UpdateThisComponent()
        {
            if (selectedDodIds.Count > 0) // at this point the count is zero
            {
                showFilterPopup = false;
                ps.DodId = selectedDodIds[0]; //just grabbing the first one for now

                StateHasChanged();
            }
        }

 

 

This is my component code:

<TelerikWindow @bind-Visible="@IsVisible">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />
    </WindowActions>
    <WindowContent>
        <TelerikMultiSelect Data="@InputData"
                @bind-Value="@selectedItems"
                Placeholder="Enter Dod ID or click to see all."
                Width="350px" ClearButton="true" AutoClose="false">
        </TelerikMultiSelect>

        <TelerikButton OnClick="@ItemsSelected">Select</TelerikButton>

    </WindowContent>
</TelerikWindow>

 

    public partial class SearchFilterPopupComponent
    {
        [Parameter] public List<string> InputData { get; set; }
        [Parameter] public EventCallback<List<string>> OnSelectedItems { get; set; }
        [Parameter] public EventCallback<bool> OnVisibleChanged { get; set; }
        [Parameter] public bool IsVisible { get; set; }
        [Parameter] public List<string> selectedItems { get; set; }

        protected void OpenWin()
        {
            IsVisible = true;
        }

        protected void CloseWin()
        {
            IsVisible = false;           
            OnVisibleChanged.InvokeAsync(IsVisible);
        }

        protected void ItemsSelected()
        {
            IsVisible = false;
            OnSelectedItems.InvokeAsync(selectedItems); //AT this point all the items selected are in this variable.
        }
    }
}

1 Answer, 1 is accepted

Sort by
0
Hristian Stefanov
Telerik team
answered on 09 Jun 2021, 01:09 PM

Hi David,

It seems that the problem comes from the way the collection is being received.

To fix this problem, receive the collection as an argument in the UpdateThisComponent method. The code block below showcases the method from your example with the changes highlighted.

protected void UpdateThisComponent(List<string> selectedDodIds)
{
    if (selectedDodIds.Count > 0) // at this point the count is zero
    {
        showFilterPopup = false;
        ps.DodId = selectedDodIds[0]; //just grabbing the first one for now

        StateHasChanged();
    }
}

I hope this helps. If I'm missing something from the scenario or you have any other questions, please let me know. Thank you.

Regards,


Hristian Stefanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
MultiSelect
Asked by
David
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Hristian Stefanov
Telerik team
Share this question
or