In my grid pop-up form the validation summary looks out of place when I add my own list of errors.

I have added pictures of the code and how it looks.

Please take a look at it, looks very stranges

Hi,

We are using among other components the TreeView component for showing an hierarchical view of an organization and that works fine in most cases, there is however an issue that happens when the users are quick to navigate between views and we get an error:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Cannot read property 'addEventListener' of null
      TypeError: Cannot read property 'addEventListener' of null

After some investigation of the code and how the TreeView works we can see that this probably happens due to that the OnAfterRenderAsync of the TreeView runs InitTreeView which calls JSInterop to set event handling for example:

this.element.addEventListener(h, this.onKeyDown),
this.element.addEventListener(f, this.onMouseDown),
this.options.draggable && this.createDraggable()

but since this is run in OnAfterRenderAsync it may happen even after the component is disposed and removed from the DOM so the elements are no longer available and the error occurs.

Is this a known issue and is there a way to handle it?

Best regards

Johan

My tabs are taking a little of bit time to change when clicked on making it look like nothing is happening when they click on  tab.

I need a way to some kind of Please Wait when a tab is clicked on and then goes away once the new tab is rendered.  

I am thinking something like the three pulsing dots in the tab title while it is working.

Is there any way I can achieve this?

Hello,

I have an issue that I'd like to share with you.
I have the following setup:
Razor:
@if (_isEditMode && _aListOfStrings.Any())
{
<TelerikAutoComplete Data="_aListOfStrings"
Filterable="true"
FilterOperator="StringFilterOperator.Contains"
@bind-Value="_aViewModel.aStringProperty">
</TelerikAutoComplete>
}

Code behind:
protected override async Task OnParametersSetAsync()
{
await GetTheStringList();
}

private async Task GetTheStringList ()
{
_aListOfStrings = _aService.GetTheListOfStrings();
}

The autocomplete renders like expected. The data is also shown and filtered like expected. For some reason, when I type a string that is present in "_aListOfStrings" and select it for the first time. The string is not filled-in the autocomplete, nor does it get bound to the model. The second time I filter and select the string, it does get filled in and bound to the model.
Do you guys have any idea why this happens? I can't seem to figure it out. This is happening for all autocompletes in this "form". I've tried the following:
1. Render the Autocomplete outside of the Form
2. Set an id
3. Call this.StateHasChanged() after retrieving the data for the list
4. Changed OnParametersSetAsync() to OnInitilizedAsync() to fetch the list
Thanks in advance!

First a salute to the Telerik team. The Grid is awesome, thanks for making me look like a rock star.

I am using the build in Blazor FileUpload component, not Telerik and would like to show validations errors in the pop-up form for not supported file types.

How can I show errors in a component like the Validation Summary?

I want negative #'s to show as -9999 not (9999). 

Is there any way to do this?  

I could do it with the Kendo controlsby putting kendo.culture().numberFormat.currency.pattern[0] = "-$n"; in the document.ready function but I can't see to figure out how to do it with Blazor controls.

Thanks.

When using the new MediaQuery, I am receiving an error on the iPad (Safari) but works fine with desktop and Android. Safari does not have support for addEventListener.

warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
      Unhandled exception rendering component: this.mediaQueryList.addEventListener is not a function. (In 'th
is.mediaQueryList.addEventListener("change",this.onMediaChange)', 'this.mediaQueryList.addEventListener' is un
defined)
value@https://localhost:5001/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:59:14905
e@https://localhost:5001/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:59:14611
r@https://localhost:5001/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:1:13840
r@https://localhost:5001/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:59:12983

-------------------------------------------------------

I've implemented a rather ugly workaround for now but this should be resolved within Telerik itself.

Add this above <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>:

<script>
        var mediaObj = window.matchMedia("");
        if (typeof mediaObj.addEventListener != "function") {
           mediaObj.__proto__.addEventListener = function(event, listener) {
               mediaObj.addListener(listener);
           }
        }
 </script>

Hi,

After 2.21.0 update, I noticed there is still a dependency of Newtonsoft.Json package in Telerik.DataSource, increasing the application payload with > 600k. Since .Net 5 moved to System.Text.Json context, maybe that dependency could be eliminated.

Thanks,

Ion

I have the following scenario:

- file download from a site;

- process records on file to store in a database.

The first take about 4 seconds and the second around a minute or a little more.

Followed the sample of ProgressBar to signal that records are being processed, however, the UI is not being updated. 

The environment is Blazor with .NET 5.04 and the latest version of UI for Blazor

Below is the Razor component where the data is handled.

Any suggestions on how to update the UI and reflect the current status?

Thanks

@page "/importPeers"
@using DataLoader.Models
@using DataLoader.Services
@using System.Timers
@implements IDisposable
@inject LoadDataFIService service

<h1>CVM FI Download</h1>

<p>componente para realizar o download de informações da CVM e carga no banco de dados</p>
<hr />
<br />

<div class="row">
    <div class="col-sm-8 col-md-8">
        <div class="row">
            <div class="col-sm-6 col-md-6">
                <span>
                    Mês Referência:
                    <TelerikDatePicker @bind-Value="@selectedDate"
                                       BottomView="@CalendarView.Year"
                                       Format="MMM yyyy">
                    </TelerikDatePicker>
                </span>
            </div>
            <div class="col-sm-3 col-md-3">
                <TelerikButton OnClick="@OnProcessDataClick">Processar</TelerikButton>
            </div>
        </div>
    </div>
</div>
<br />
<div class="row">
    <div class="col-sm-8 col-md-8">
        @processingAction
        <br />
        <TelerikProgressBar Indeterminate="@isIndeterminate" Value="@CurrentValue" Max="@MaxValue" />
    </div>
</div>
@currentCount importados...
<hr />




@code {
    public string processingAction { get; set; }
    public bool isIndeterminate { get; set; } = false;
    public int progressValue { get; set; } = 0;
    DateTime selectedDate { get; set; } = DateTime.Now;
    int currentCount = 0;
    public double MaxValue { get; set; } = 100;
    public double CurrentValue { get; set; } = 0;
    public double StepValue { get; set; } = 5;
    public Timer Clock { get; set; } = new Timer();

    void OnProcessDataClick()
    {
        currentCount++;
        ProcessData();

    }

    void ProcessData()
    {
        //signal progress bar for download
        processingAction = "Downloading...";
        MaxValue = 5 * 1000;                    // download should take no more than 4 seconds
        StartProgress();

        var result = service.DownloadFile(selectedDate);

        // signal end of downloading
        processingAction = "Downloaded!";
        StopProgress();

        System.Diagnostics.Stopwatch watch = new System.Diagnostics.Stopwatch();

        if (result)
        {
            processingAction = "Processing records...";
            MaxValue = 65 * 1000;       // data processing should last about a minute or more
            StartProgress();
            //watch.Start();

            currentCount = service.ReadCsvFile(selectedDate);

            //watch.Stop();
            processingAction = "Records processed!";
            StopProgress();
        }

        // Console.WriteLine(watch.Elapsed);
    }

    public void Dispose()
    {
        StopProgress();
        Clock?.Close();
    }

    public void StartProgress(int interval = 200)
    {
        if (Clock?.Enabled == false)
        {
            Clock.Interval = interval;
            Clock.Elapsed -= OnClockElapsedEvent;
            Clock.Elapsed += OnClockElapsedEvent;
            Clock.AutoReset = true;
            Clock.Start();
        }
    }

    public void OnClockElapsedEvent(Object source, ElapsedEventArgs e)
    {
        if (CurrentValue < MaxValue)
        {
            UpdateProgress();
        }
        else
        {
            StopProgress();
        }
    }

    public void UpdateProgress()
    {
        CurrentValue += StepValue;
        InvokeAsync(StateHasChanged);
    }

    public void StopProgress()
    {
        Clock?.Stop();
        InvokeAsync(StateHasChanged);
    }

}