Any help would be appreciated.

Is there a way to hide/remove markers from chart, so they also dont appear on hover. When setting visible on ChartSeriesMarker to false, the marker is hidden but will still show up when hovering.

Best Regards,

Emil

Right now, each tile can be created in each Content and TilelLayoutItem tag. The way my current list works is to use the TileLayout inside of a TelerikListView component using my list as the data. Like this:

<TelerikListView Data=@Data
                 Pageable="true"
                 PageSize="int.MaxValue">
                 <Template>



    <TelerikTileLayout Columns="1"
                       Reorderable="true"
                       Resizable="false"
                       RowHeight="180px">


        <TileLayoutItems>
            <TileLayoutItem HeaderText="Descriptors">
                <Content>@context.Description</Content>
            </TileLayoutItem>

        </TileLayoutItems>
    </TelerikTileLayout>
        </Template>
    </TelerikListView>

It shows each item from the list in a new tile as expected, but the problem with this is that since I put it in just one Content/TileLayout tag, each tile somehow counts as one tile, so the Reorderable feature doesn't work. You can test this by adding a another Content tag. The contents of the second tag will only be able to swap with the contents of the first tag, but the contents of the first tag still won't be able to swap with each other. Does the same thing if you use a foreach loop to display the list data as well.

How do I achieve using Tile Layout to display preexisting data/ list items that can reorder? Or how can I reorder the tiles while using a foreach loop?

Hello,

I am trying to implement a progress bar while importing an excel file. The progress bar does not work, I implement the sample within my code and its not working anyway.

Here is the code :

@page "/administration/excel"

@inject HttpClient httpClient
@inject IJSRuntime jSRuntime

@implements IDisposable

@using System.Timers

@using XxxPathie.Libraries.Shared.Models.Tools;
@using XxxPathie.Libraries.Ui.Tools.Network;

<h3>Tools</h3>

<label for="specialites">Spécialités</label>
<InputFile id="specialites" OnChange="OnSpecialitesChange">Specialités</InputFile>
<br />
<label for="motscles">Mots clés</label>
<InputFile id="motscles" OnChange="OnMotsClesChange">Mots clés</InputFile>

<br />
<label for="principesactifs">Principes actifs</label>
<InputFile id="principesactifs" OnChange="OnPrincipesActifsChange">Principes actifs</InputFile>

<br />
<label for="preparations">Préparations</label>
<InputFile id="preparations" OnChange="OnPreparationsChange">Préparations</InputFile>

<br />
<br />

<TelerikProgressBar @ref="progressBar" Value="@progressValue" Max="progressMax"></TelerikProgressBar>

<TelerikProgressBar Value="@ProgressValue" Max="100"></TelerikProgressBar>

@code {
    TelerikProgressBar progressBar;
    Timer timer = new();
    ExcelFile progress = new();
    double progressValue = 0;
    double progressMax = 1000;
    bool refresh = false;

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

    protected override void OnAfterRender(bool firstRender)
    {
        if (Timer.Enabled == false)
        {

            Timer.Start();
        }
    }

    public void OnTimerElapsed(Object source, ElapsedEventArgs e)
    {
        if (ProgressValue < 100)
        {
            UpdateProgress();
        }
        else
        {
            StopProgress();
        }
    }

    public void UpdateProgress()
    {
        ProgressValue += ProgressStep;

        InvokeAsync(StateHasChanged);
    }

    public void StopProgress()
    {
        Timer?.Stop();
    }

    public const int TimerInterval = 1000;
    public const int TotalTime = 10 * TimerInterval;
    public double ProgressValue = 0;
    public int ProgressStep = 100 / (TotalTime / TimerInterval);
    public Timer Timer { get; set; } = new Timer();

    private async void OnSpecialitesChange(InputFileChangeEventArgs args)
    {
        await ManageDownload(args.File, "excel/specialites", "Spécialités.xlsx");
    }

    private async void OnMotsClesChange(InputFileChangeEventArgs args)
    {
        await ManageDownload(args.File, "excel/motscles", "Mots clés.xlsx");
    }

    private async void OnPrincipesActifsChange(InputFileChangeEventArgs args)
    {
        await ManageDownload(args.File, "excel/principesactifs", "Principes actifs.xlsx");
    }

    private async void OnPreparationsChange(InputFileChangeEventArgs args)
    {
        await ManageDownload(args.File, "excel/preparations", "Préparations.xlsx");
    }

    private async Task ManageDownload(IBrowserFile file, string url, string fileName)
    {
        byte[] bytes = new byte[file.Size];

        using (var stream = file.OpenReadStream(250 * 1024 * 1024))
        {
            await stream.ReadAsync(bytes, 0, bytes.Length);
        }

        progress = await RestClient.Instance.PostAsync<ExcelFile>(httpClient, url, bytes);

        progressValue = 0;
        progressMax = progress.MaxCount;

        refresh = !refresh;

        timer.Stop();
        timer.Interval = 200;
        timer.AutoReset = true;
        timer.Elapsed -= ProgressPlease;
        timer.Elapsed += ProgressPlease;
        timer.Start();
    }

    private void ProgressPlease(Object source, ElapsedEventArgs e)
    {
        progressValue++;
        progressMax = 1000;
    }

    private async Task ProgressReport(ExcelFile progress, string fileName)
    {
        try
        {
            for (; ; )
            {
                progress = await PoolProgress(progress, "fileName");
                progressMax = progress.MaxCount;
                progressValue = progress.DoneCount;
            }
        }
        catch (Exception exception)
        {
            var breakime = 1;
        }
    }

    private async Task<ExcelFile> PoolProgress(ExcelFile progress, string fileName)
    {
        progress = await RestClient.Instance.GetAsync<ExcelFile>(httpClient, "excel/progress/" + progress.Identifier);

        if (progress.DoneCount == progress.MaxCount && progress.bytes != null)
        {
            var href = httpClient.BaseAddress + progress.Identifier.ToString();
            await jSRuntime.InvokeAsync<object>("triggerFileDownload", fileName, href);

            throw new Exception("OK");
        }
        else if (progress.Identifier == Guid.Empty)
        {
            return progress;
        }
        else if (progress.DoneCount == progress.MaxCount)
        {
            throw new Exception("OK");
        }

        return progress;
    }
}

Hi,

I am working on a dynamic form generator which is capable of generating a form based on a Json formdefinition retrieved from the server. I had some hurdles, but so far things are progressing nicely. Here's a summary of how it works (or should work):

• FormDefinition with FormFields is retrieved from the server
• FormModel is created dynamically using PropertyBuilder and AttributeBuilder
• Form uses an EditContext which takes the generated FormModel as an input

TelerikTextBox and TelerikRadioButtonGroup work like a charm (they both use string properties of the dynamically created model). However the TelerikNumericTextBox and TelerikDateTimePicker generate the following error (and show a red line in the razor file:

Error (active)	CS0411	The type arguments for method 'TypeInference.CreateTelerikNumericTextBox_0<T>(RenderTreeBuilder, int, int, string, int, T, int, Expression<Func<T>>, int, int, int, T, int, string, int, EventCallback<object>, int, EventCallback<T>)' cannot be inferred from the usage. Try specifying the type arguments explicitly.

Error (active)	CS0411	The type arguments for method 'TypeInference.CreateTelerikDatePicker_1<T>(RenderTreeBuilder, int, int, string, int, T, int, Expression<Func<T>>, int, EventCallback<object>, int, EventCallback<T>, int, string)' cannot be inferred from the usage. Try specifying the type arguments explicitly.

I assume it has something to do with the type of the propery, but I am not sure. Here's the full code of the dynamic form so far.

@namespace TrueLime.Blazor.TrueForms
@inherits TrueFormBase

<TelerikForm EditContext="@FormEditContext"
             OnSubmit="@HandleSubmit">
    <FormValidation>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidation>
    <FormItems>

        @foreach (var propertyInfo in GetFormFieldProperties())
        {
            <FormItem Field="@(propertyInfo.Name)">
                <Template>
                    <div class="mb-1 row">
                        <label for="@(propertyInfo.Name)" class="k-label k-form-label col-sm-2">@propertyInfo.DisplayName()</label>
                        <div class="col-sm-8">

                            @switch (GetFormControlType(propertyInfo.Name))
                            {
                                case "textbox":
                                    <TelerikTextBox Id="@(propertyInfo.Name)"
                                                    Value="@GetStringValue(propertyInfo.Name)"
                                                    ValueExpression="@(() => propertyInfo.Name)"
                                                    OnChange="OnChange"
                                                    ValueChanged="@(value => OnValueChanged(value, propertyInfo.Name))"
                                                    InputMode="text"
                                                    PlaceHolder="@propertyInfo.PlaceholderDescription()">
                                    </TelerikTextBox>
                                    break;
                                case "decimaltextbox":
                                    <TelerikNumericTextBox Id="@(propertyInfo.Name)"
                                                           Value="@GetDecimalValue(propertyInfo.Name)"
                                                           ValueExpression="@(() => propertyInfo.Name)"
                                                           Decimals="2"
                                                           Step="0.01m"
                                                           Format="@CurrencyFormat"
                                                           OnChange="OnChange"
                                                           ValueChanged="@(value => OnValueChanged(value, propertyInfo.Name))">
                                    </TelerikNumericTextBox>
                                    break;
                                case "datepicker":
                                    <TelerikDatePicker Id="@(propertyInfo.Name)"
                                                    Value="@GetDateTimeValue(propertyInfo.Name)"
                                                    ValueExpression="@(() => propertyInfo.Name)"
                                                    OnChange="OnChange"
                                                    ValueChanged="@((DateTime value) => OnValueChanged(value, propertyInfo.Name))"
                                                    Placeholder="@propertyInfo.PlaceholderDescription()"
                                                    >
                                    </TelerikDatePicker>
                                    break;
                                case "radiogroup":
                                    <TelerikRadioGroup Id="@(propertyInfo.Name)"
                                                       Value="@GetStringValue(propertyInfo.Name)"
                                                       ValueExpression="@(() => propertyInfo.Name)"
                                                       OnChange="OnChange"
                                                       ValueChanged="@((string value) => OnValueChanged(value, propertyInfo.Name))"
                                                       Layout="@GetRadioGroupLayout(propertyInfo.Name)"
                                                       Data="@GetFormOptions(propertyInfo.Name)"
                                                       ValueField="@nameof(FormOption.Value)"
                                                       TextField="@nameof(FormOption.Text)">
                                    </TelerikRadioGroup>
                                    break;
                            }
                        </div>
                        <div class="col-sm-2">
                            <TrueFormValidationMessage For="@(new FieldIdentifier(FormModel, propertyInfo.Name))" />
                        </div>
                    </div>
                </Template>
            </FormItem>
        }

    </FormItems>
    <FormButtons>
        <TelerikButton ButtonType="ButtonType.Submit">@SubmitButtonLabel</TelerikButton>
    </FormButtons>
</TelerikForm>

<br/>
@ScreenLog

Here's the OnValueChanged (which needs work, but the get the gist of it):

protected void OnValueChanged(object e, string propertyName)
    {
        var propertyInfo = FormInputModel.GetType().GetProperty(propertyName);
        if (propertyInfo == null) return;

        if (propertyInfo.PropertyType == typeof(int))
            SetFormValue(propertyInfo.Name, Convert.ToInt32(e));

        if (propertyInfo.PropertyType == typeof(long))
            SetFormValue(propertyInfo.Name, Convert.ToInt64(e));

        if (propertyInfo.PropertyType == typeof(decimal))
        {
            // Needs work
            SetFormValue(propertyInfo.Name, Convert.ToDecimal(e, new CultureInfo("nl-NL", false)));
        }

        if (propertyInfo.PropertyType == typeof(string))
            SetFormValue(propertyInfo.Name, e.ToString());

        //if (propertyInfo.PropertyType == typeof(DateTime) || propertyInfo.PropertyType == typeof(DateTime?))
        //    throw new NotImplementedException("DateTime nog niet geimplementeerd.");

        //if (propertyInfo.PropertyType == typeof(bool) || propertyInfo.PropertyType == typeof(bool))
        //    throw new NotImplementedException("Boolean nog niet geimplementeerd.");
    }

And some of the helper methods:

private FormField GetFormField(string propertyName) =>
        FormDefinition.FormFields.SingleOrDefault(x => x.PropertyName == propertyName);

    protected string GetStringValue(string propertyName) =>
        GetFormValue(propertyName)?.ToString();

    protected decimal GetDecimalValue(string propertyName) =>
        Convert.ToDecimal(GetFormValue(propertyName));

    protected DateTime GetDateTimeValue(string propertyName) =>
        Convert.ToDateTime(GetFormValue(propertyName));

    protected object GetFormValue(string propertyName) =>
        FormModel?.GetType().GetProperty(propertyName)?.GetValue(FormModel);

    protected void SetFormValue(string propertyName, object value) =>
        FormModel.GetType().GetProperty(propertyName)?.SetValue(FormModel, value, null);

In my opinion there is an error in the date picker component.

When I enter manually a date below the min value then the binded value is set to null but in the input field the wrong date is not cleared

(See Screenshot).

You can reproduce it by the DatePicker - Overview Demo:

1. Enter 01.01.1950

2. Click on the year and use the arrow down button to set 1949. The value is set to null and the input field is cleared.

3. Click on dd and set day to 01. Value 01.01.1949 is shown.

4. Click outside the date picker. Value is null but input shows 01.01.1949.

Please let me know whether this is a known issue and you intend to fix it.

When printing from the print button on the PDF viewer (on Edge or Chrome), the print is inconsistent with printing the downloaded document.

It seems to be printing an image of a web page containing the PDF rather an actually printing the PDF document

In particular, when printing from the button:

• The print quality is visibly lower (printing is more gray than black).
• The document extents are smaller on the page.
• In some cases, the document prints across more pages than the actual PDF (e.g. 3 pages, when document is 1 page)
• If Chrome header options are on, the page shows web page printing headers and footers as well.

Is this intended behaviour, or are there ways to modify this?

We'd like to use the control, as it removes the need for JavaScript code used in our current control, but the print quality probably precludes using it at the moment.

Thanks

Tim McMaster

Hi,

I have some additional Controls in a PanelBar-Header-Template. Anytime  when I click on a Control the Event bubbles to the PanelbarHeader and opens the panel.

How can I prevent this bubbeling?

As you see,  I tried to get rid of that with "stopPropagation". But you can imagine it doesn't work.

<TelerikPanelBar Data="@item.ColorsWithArticles"
                            @bind-ExpandedItems="@ExpandedItems"
                            OnExpand="@OnPanelBarExpand">
                            <PanelBarBindings>
                                <PanelBarBinding Level="0" ItemsField="Articles">
                                    <HeaderTemplate>
                                        @{
                                            var article = ((ColorAndArticlesItemVm)context);
                                            <div class="d-flex flex-row flex-wrap">
                                                <div class="p-1 border">
                                                    <img src="@article.Color.ColorImageUrl" alt="" style="width:28px; height:28px">
                                                </div>
                                                    <div onkeydown="stopPropagation(event)" onmousedown="stopPropagation(event)">
                                                        <TelerikTextBox @bind-Value="@StringValue" />
                                                    </div>
                                                </div>

<script suppress-error="BL9992">
    function stopPropagation(e) {
        e.stopPropagation();
    }
</script>

Hello,

I have to mark some text in the TelerikEditor and I'm using span for that:

Anamnese <span class='code-marked' title='S52, S60, S63'>robert</span>, 14 år, V=50 

I would like to have the "title" displayed as a tooltip but when I inspect the element in the TelerikEditor the "title" is removed.

Is there a way to use css or something similar to add tooltip for words in TelerikEditor? Is there any way to keep the "title" ?

TIA

Lucian