I have a Grid page in the content section of a TabStrip.  I am trying to determine the best way to move from the grid to a detail page but still maintain the TabStrip. 

I want the detail page to stay in the same tab as the grid page was.

I assume some sort of component swap process?

Any suggestions

Hi

I have a use case whereby I just need the graphic representation of the Gantt only (i.e. not the list of tasks on the left).

I have tried leaving the GanttColumn property empty (no GanttColumn items in it) but it still displays the section of the control which is just blank.

I can get the view I want by then using the slider to adjust the width of that section till the gantt graphical part covers the entire control (see attached image)

What I would like to be able to do is to be able to do that through code not by moving the slider manually.

Is there a way - I assume there must be some css class I could adjust the width of somewhere given how flexible these components seem to be.

Thanks

Good day,

I would like to use the Gantt chart for industrial production planning. Independently of the bars, a color highlighting of individual columns (see picture) is to be inserted based on the personnel situation in available employee hours (e.g. workstation 2: 7h/...) and the workload according to the work plan ( workstation 2: .../7h). In addition, a mouse-over on the capacity situation is to be shown per day.

Can this be implemented by the current functions in the Gantt? So far I have not been able to find any configurable elements for the columns.
This is actually enormously important for our project and something like this (or similar) was confirmed in the initiation interview, which among other things prompted the purchase of the license.

Alternatively (even better) would be a dynamic capacity historygram under the Gantt, which is synchronously movable in vertical axe. Here, only a bar (required employee hours per day) would have to be displayed as a total and a constant line (available employee hours) would have to be inserted additionally.
Would a connection with a column chart be feasible from your point of view? (Kind a like: https://demos.telerik.com/blazor-financial-portfolio)


Many thanks in advance.

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