Completed
Last Updated: 07 Feb 2022 16:10 by ADMIN
Michal
Created on: 04 Jan 2022 16:50
Category: UI for Blazor
Type: Bug Report
0
DropDownList inside TelerikDialog - OnRead Aync Task not showing any data

Hello,

first of all, thank you for relelasing Dialog, it is what we are "simulating" by modal Window on any kind of heavy data editing app,again and again and again :) .

The problem is,
- when you put DropDownList in Dialog, using OnRead async task event, the UI is still "empty". => Iam fiddled with reassigning datasource, changing order of assigning source, nothing helped.
- same dropdownlist scenario inside window, working/displayed as expected.

Steps to reproduce:
1) click on then button to show window by -> async task
2) event OnRead of the dropdownlist is correctly called, data to the IEnumerable<model> is loaded
3) window appear, but DropDownList is empty
4) when you filter by typeing inside DropDownList, OnRead is called and model populated, but GUI is still empty

What doesnt worked:
- statechaned, reassign datasource, clear datasource, task delay

What partially worked:
- OnRead=> async Task changed to just: OnRead=> Task

Thanks for info what should be made done else.

Stripped sample:
<TelerikButton @onclick="@(() => ParamEd(4444, null))">open window or dialog</TelerikButton>
<TelerikWindow Modal="true" @bind-Visible="@ShowEditWindow" Draggable="true">
<WindowTitle>
<strong>@ShowEditWindowCaption</strong>
</WindowTitle>
<WindowContent>

<TelerikDropDownList @bind-Value="@CurrentEdit.ValTxt"
ScrollMode="@DropDownScrollMode.Virtual"
Data="@CurrentEdit.ComboSource"
OnRead="@ReadComboData"
ItemHeight="30"
TotalCount="@Paging.CNT"
PageSize="14"
PopupHeight="400px"
TextField="Nazev1"
ValueField="KeyVal"
Filterable="true"
FilterOperator="StringFilterOperator.Contains">
</TelerikDropDownList>
....
vs
<TelerikDialog @bind -Visible="@ShowEditWindow" Title="@ShowEditWindowCaption" CloseOnOverlayClick="false">
<DialogContent>
<TelerikDropDownList @bind-Value="@CurrentEdit.ValTxt"
ScrollMode="@DropDownScrollMode.Virtual"
Data="@CurrentEdit.ComboSource"
OnRead="@ReadComboData"
ItemHeight="30"
TotalCount="@Paging.CNT"
PageSize="14"
PopupHeight="400px"
TextField="Nazev1"
ValueField="KeyVal"
Filterable="true"
FilterOperator="StringFilterOperator.Contains">
</TelerikDropDownList>
....
@code{

[CascadingParameter]
public NotificationBase Notification { get; set; }
[CascadingParameter]
public DialogFactory Dialogs { get; set; }


//clicked on the button to show window/dialog:
async Task ParamEd(int xtyp, object it)
{
await Task.Delay(500);//await load captions... and THEN open window:
ShowEditWindowCaption = "window title";
ShowEditWindow = true;
}

async Task ReadComboData(DropDownListReadEventArgs e)
{
try
{
var r = await readDBDATA...
//CurrentEdit.ComboSource = new List<EdBase>();
//CurrentEdit.ComboSource = null;
//CurrentEdit.ComboSource = new IEnumerable<EdBase>(r);
//CurrentEdit.ComboSource = await ReadDBDATA
CurrentEdit.ComboSource = r;
Paging.CNT = p.Get<int>("CNT");

/*
//!! HOTFIX FROM ANOTHER BUG(show selected data) - ReAssign data(but id doesnt impact result):
string v = CurrentEdit.ValTxt;
int? i= CurrentEdit.ValInt;
CurrentEdit.ValTxt = string.Empty;
CurrentEdit.ValInt = null;
StateHasChanged();
//await InvokeAsync(() => StateHasChanged());
CurrentEdit.ValTxt = v;
CurrentEdit.ValInt = i;

//CurrentEdit.ValTxt = CurrentEdit.ValTxt;
//StateHasChanged();
*/
}
catch (Exception ex)
{
Notification.ShowSQLErr(ex.Message);
}
}

//PARTIALLY WORKING, but not filtering:
Task ReadComboData(DropDownListReadEventArgs e)
{
try
{
var r = readDBDATA...
CurrentEdit.ComboSource = r;
Paging.CNT = p.Get<int>("CNT");
}
catch (Exception ex)
{
Notification.ShowSQLErr(ex.Message);
}
}
}

3 comments
ADMIN
Nadezhda Tacheva
Posted on: 07 Feb 2022 16:10

Hi Michal,

It is a bit hard to evaluate the problem based on just the code pieces and you have probably updated the configuration in regards to the 3.0 release changes. However, if you are somehow changing the data collection when using OnRead, you might also need to call the Rebind method that we recently released to refresh the data.

If, on another hand, you are trying to preselect an item which is not yet part of the received data, you have indeed encountered the bug you linked (Selected text does not update when changing the data collection). When testing on my end, it looks like the proposed workaround does not work when the OnRead is used. I will address this use case in the internal bug report as well.

Please advise if I am missing something in your scenario. You can also send us a runnable reproduction, so we can test your exact configuration on our end.

Regards,
Nadezhda Tacheva
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/.

Michal
Posted on: 31 Jan 2022 17:10

Hello Nadezhda,

 thank You for info, but in version 3.0.0 it is still somewhere on half of the way.

1) yes, data are loaded and after clicking on combo/dropdown they are shown(fixed :) )
2) It is not showing binded data for the MOST of the time (ie. after the first dialog show OK, after seccond, not visible and so on randomly):
Sugestet hotfix from previous version and your post doesnt work either. 
Maybe related?: https://feedback.telerik.com/blazor/1518099-selected-text-does-not-update-when-changing-the-data-collection

ReAssign values - doesnt helped
refresh dialog - doesnt helped
What is the current correct setup with hotfixes for version 3.0.0?


<TelerikDialog @bind-Visible="@ShowEditWindow" Title="@ShowEditWindowCaption" ShowCloseButton="false" CloseOnOverlayClick="false" @ref="DialogRef">
<DialogContent>


<TelerikDropDownList @bind-Value="@CurrentEdit.ValTxt"
ScrollMode="@DropDownScrollMode.Virtual"
 
OnRead="@ReadComboData"
ItemHeight="30"
PageSize="14"
TextField="Nazev1"
ValueField="KeyVal"
Filterable="true"
TItem="EdBase" TValue="string"
FilterOperator="StringFilterOperator.Contains">

</TelerikDropDownList>

</DialogContent>
</TelerikDialog>

code
{
ReadComboData - from previous posts + DialogRef.Refresh();
}

ADMIN
Nadezhda Tacheva
Posted on: 11 Jan 2022 14:23

Hello Michal,

Thank you for reaching out! Indeed, this behavior is observed when handling the OnRead of a DropdownList placed in a Dialog component. I actually managed to reproduce the issue with both asynchronous and synchronous handlers. It looks like the Dialog component is not refreshed after the change of the DropdownList data in the OnRead handler.

For our upcoming 3.0.0 release we have planned some updates in the OnRead event which will handle such scenarios. The release is expected to be live around January 19th.

In the meantime, you can force the Dialog component to refresh when needed by calling its Refresh method. For example:

<TelerikButton OnClick="@( () => DialogIsVisible = !DialogIsVisible )">Open Dialog</TelerikButton>

<TelerikDialog @bind-Visible="@DialogIsVisible" @ref="@DialogRef"
               Title="Dialog">
    <DialogContent>
        <TelerikDropDownList Data="@Options"
                             OnRead="@ReadItems"
                             Filterable="true"
                             DefaultText="Find what you seek by typing"
                             @bind-Value="@SelectedValue">
        </TelerikDropDownList>
    </DialogContent>
</TelerikDialog>

@code {
    public Telerik.Blazor.Components.TelerikDialog DialogRef;

    private bool DialogIsVisible { get; set; }

    public string SelectedValue { get; set; }

    List<string> Options { get; set; } = new List<string>();

    async Task ReadItems(DropDownListReadEventArgs args)
    {
        if (args.Request.Filters.Count > 0) // there is user filter input, skips providing data on initialization
        {            
            Telerik.DataSource.FilterDescriptor filter = args.Request.Filters[0] as Telerik.DataSource.FilterDescriptor;
            string userInput = filter.Value.ToString();
            string method = filter.Operator.ToString();

            //new data collection comes down from the service
            Options = await GetOptions(userInput, method);

            //force refresh of the Dialog
            DialogRef.Refresh();
        }
        else
        {
            // when there is no user input you may still want to provide data
            // in this example we just hardcode a few items, you can either fetch all the data
            // or you can provide some subset of most common items, or something based on the business logic
            Options = new List<string>() { "one", "two", "three" };
        }
    }

    async Task<List<string>> GetOptions(string userInput, string filterOperator)
    {
        await Task.Delay(500); // simulate network delay, remove it for a real app

        //sample logic for getting suggestions - here they are generated, you can call a remote service
        //for brevity, this example does not use the filter operator, but your actual service can
        List<string> optionsData = new List<string>();
        for (int i = 0; i < 5; i++)
        {
            optionsData.Add($"option {i} for input {userInput}");
        }

        return optionsData;
    }
}

Here is a Telerik REPL for Blazor link as well, so you can directly run and test it in the browser - https://blazorrepl.telerik.com/mGEFFlbo165dF0qu01.

Having in mind that the fix for this report will be included in our next release, I am hereby marking this thread as completed.

Please let us know if you are experiencing any unexpected behavior after testing with version 3.0.0 once it is live.

Regards,
Nadezhda Tacheva
Progress Telerik

Learn about the important changes coming in UI for Blazor 3.0 in January 2022!