Hi Team,

I'm using the Blazor diagram with custom images as shape type. But for a better visibility I would like to show the text below the image. By default, the text overlays the image, making it hard to read.

Is there an easy way to achieve this without using visual functions with javascript?

Thank you very much in advance!

I am working with two Telerik Dialogs in a Blazor page.
One dialog is shown when an AP Strategy validation is required, and the other dialog is a confirmation popup.

Here is the markup:

<TelerikDialog Class="manual-adjustment_dialogBox"
               @bind-Visible="@IsDialogBoxVisible"
               Width="600px"
               Title="Message from webpage"
               ShowCloseButton="false">
    <DialogContent>
        <p style="text-align: center;">@ConfirmMessage</p>
    </DialogContent>
    <DialogButtons>
        <TelerikButton Id="yes-btn" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" @onclick="() => OnConfirmClick()">Yes</TelerikButton>
        <TelerikButton Id="no-btn" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" @onclick="() => GoBackToPopUp()">No</TelerikButton>
    </DialogButtons>
</TelerikDialog>

<TelerikDialog Class="manual-adjustment_apStrategyDialogBox"
               @bind-Visible="@IsApStrategyValidationVisible"
               Width="600px"
               Title="Message from webpage"
               ShowCloseButton="true">
    <DialogContent>
        <p style="text-align: center;">@ConfirmMessage</p>
    </DialogContent>
    <DialogButtons>
        <TelerikButton Id="confirm-btn" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" @onclick="() => FixApStrategyAndGoBackToPopUp()">OK</TelerikButton>
        <TelerikButton Id="cancel-btn" ThemeColor="@(ThemeConstants.Button.ThemeColor.Primary)" @onclick="() => GoBackToPopUp()">Cancel</TelerikButton>
    </DialogButtons>
</TelerikDialog>

When the AP Strategy dialog is visible (IsApStrategyValidationVisible = true), the user clicks OK, which calls this method:

public void FixApStrategyAndGoBackToPopUp()
{
    IsApStrategyValidationVisible = false;

    if (ManualAdjustmentArDTO.Amount == BundleUIResults.Bundle.Amount &&
        (ManualAdjustmentArDTO.APStrategyAdjustment == BundleManager.Schemas.Core.Content.APStrategy.ProRata ||
         ManualAdjustmentArDTO.APStrategyAdjustment == BundleManager.Schemas.Core.Content.APStrategy.AR) &&
        ManualAdjustmentArDTO.APStrategyType == APStrategyType.AllCharges)
    {
        ManualAdjustmentArDTO.APStrategyAdjustment = BundleManager.Schemas.Core.Content.APStrategy.AP;
        ConfirmMessage = $"Adjustment ... Are you sure you want to proceed?";
    }
    else if (ManualAdjustmentArDTO.Amount != BundleUIResults.Bundle.Amount &&
             ManualAdjustmentArDTO.APStrategyAdjustment == BundleManager.Schemas.Core.Content.APStrategy.AP &&
             ManualAdjustmentArDTO.APStrategyType == APStrategyType.AllCharges)
    {
        ManualAdjustmentArDTO.APStrategyAdjustment = BundleManager.Schemas.Core.Content.APStrategy.ProRata;
        ConfirmMessage = $"Adjustment ... Are you sure you want to proceed?";
    }

    IsDialogBoxVisible = true;
}

Problem

• When debugging step by step, it works fine: the AP Strategy dialog closes, and then the confirmation dialog opens.

• But when running normally (without debugger), both IsApStrategyValidationVisible is false and IsDialogBoxVisible is true at the same time. This causes the confirmation dialog not to show properly.

It looks like Blazor/Telerik is not processing the closing of the first dialog before the second is opened.

Question

How can I reliably close one TelerikDialog and then open another in Blazor, without them conflicting?
Is there a recommended pattern (maybe using a single state/enum) for handling multiple dialogs?

Hello,

I have integrated a TelerikDialog onto custom component, unfortulatla it seems to be not working despite it has been correcty initilialized.

Is there a way to working like that ?

Thks,

Does anyone know of a way to dynamically retrieve an SvgIcon from Telerik.SvgIcons by the string name?

I am trying to assign icons to drawer items from looking up string names in a database. I can create an interface that has a custom dictionary that maps strings to icons, but before I did that, I wanted to make sure that there wasn't something already available that I am missing.

How do I limit entry to just allow the MaxLength in the field?  Yes, I get an error when I enter 4000 characters in a field... but, why does it accept 4000 characters?  Is there a setting to limit/stop/truncate their entry?

            <TelerikForm Model="@ContextLink" Class="gsi-padding-10">
                <FormItems>
                    @if (IsDebug)
                    {
                        <FormItem Field="@nameof(ContextLink.Id)" LabelText="Id" Enabled="false" />
                    }

                    <FormItem Field="@nameof(ContextLink.Name)" LabelText="@nameof(ContextLink.Name)" Enabled="true" />
                    <FormItem Field="@nameof(ContextLink.Description)" LabelText="@nameof(ContextLink.Description)" Enabled="true" />
                    <FormItem Field="@nameof(ContextLink.RelativeUrl)" LabelText="@nameof(ContextLink.RelativeUrl)" Enabled="true" />
                    <FormItem Field="@nameof(ContextLink.ComponentFqn)" LabelText="@nameof(ContextLink.ComponentFqn)" Enabled="false" />

                </FormItems>
                <FormButtons />
            </TelerikForm>

        [MaxLength(50)]
        [Required]
        public string Name { get; set; }

Hi guys,

I have a grid with inline editing and I want to add some custom validation, as you can check below.

<TelerikGrid Data="@Model.Equipments"
             EditMode="GridEditMode.Inline"
             OnUpdate="@OnUpdate"
             OnCreate="@OnCreate"
             OnDelete="@OnDelete">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add">Add new equipment</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
<GridColumn Field="@nameof(Equipment.Code)"
                    Title="Code">
            <EditorTemplate>
                @{
                    Equipment item = (Equipment)context;
                }
                <div class="k-form-field-wrap">
                    <TelerikTextBox @bind-Value="item.Code" />
                    <TelerikValidationMessage For="@(() => item.Code)" />
                </div>
            </EditorTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Equipment.Name)"
                    Title="Name">
            <EditorTemplate>
                @{
                    Equipment item = (Equipment)context;
                }
                <div class="k-form-field-wrap">
                    <TelerikTextBox @bind-Value="item.Name" />
                    <TelerikValidationMessage For="@(() => item.Name)" />
                </div>
            </EditorTemplate>
        </GridColumn>       
        <GridCommandColumn Width="185px">
            <GridCommandButton Command="Edit">Edit</GridCommandButton>
            <GridCommandButton Command="Delete">Delete</GridCommandButton>
            <GridCommandButton Command="Save" ShowInEdit="true">Save</GridCommandButton>
            <GridCommandButton Command="Cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

public sealed class Equipment
{
    public Guid Id { get; set; }

    [Required]
    public string? Name { get; set; }

    [Required]
    public string? Code { get; set; }
}

If I don't fill in the Name or Code, I and I hit Save, I can see the validation message under the corresponding column in the row that is in edit mode. So far so good.

However, say that I want the code to be unique. How to I tackle this one? I would like to see a validation message under the Code textbox "That code already exists", or whatever the message might be.

Any guidance on the recommended approach here would be great—thanks!

Regards,

Bogdan