Questions on UI for Blazor Forum

0 answers

5 views

My current scenario is... when I do a presentation from my laptop the resolution changes and my popovers are compressed left and right and it is so skinny it would starve to death in a 3 day snow-storm. It becomes useless because there is no "minimum width" setting. But more than just my scenario, what happens when I view this in a phone form-factor? How do you use the Popover in low resolution and tall/skinny applications?

<TelerikPopover @ref="@PopoverRef"
                AnchorSelector=".popover-target"
                ShowOn="@PopoverShowOn.Click"
                Position="@PopoverPosition.Bottom"
                Offset="20">
    <PopoverContent>

        <TelerikStackLayout Spacing="1px" Class="gsi-margin-5">

            <TelerikCard Width="20vh"
                         Class="gsi-card-border-remove">
                <CardBody>

                    <div class="form-group-short">
                        <label class="col-form-label" for="firstName">First Name</label><br />
                        <TelerikTextBox @bind-Value="@FirstNameFilter"
                                        Name="firstName"
                                        Placeholder="@Constant.NoFilter">
                        </TelerikTextBox>
                    </div>
                    <div class="form-group-short">
                        <label class="col-form-label" for="lastName">Last Name</label><br />
                        <TelerikTextBox @bind-Value="@LastNameFilter"
                                        Name="lastName"
                                        Placeholder="@Constant.NoFilter">
                        </TelerikTextBox>
                    </div>

                </CardBody>
            </TelerikCard>

            <TelerikCard Width="20vh"
                         Class="gsi-card-border-remove">
                <CardBody>

                    <div class="form-group-short gsi-max-width-250">
                        <label class="col-form-label">Date of Birth</label><br />
                        <TelerikDatePicker @bind-Value="@DobFilter"
                                           Min="@DobMinimum"
                                           Max="@DobMaximum"
                                           Format="MM/dd/yyyy"
                                           ShowWeekNumbers="true"
                                           Placeholder="@Constant.NoFilter">
                        </TelerikDatePicker>
                    </div>
                    <div class="form-group-short gsi-max-width-250">
                        <label class="col-form-label">Sex</label><br />
                        <TelerikDropDownList @bind-Value="@GenderFilterIndex"
                                             TextField="Name" ValueField="Id"
                                             Data="@GenderFilterOptions">
                        </TelerikDropDownList>
                    </div>

                </CardBody>
            </TelerikCard>

            <TelerikCard Width="20vh"
                         Class="gsi-card-border-remove">
                <CardBody>

                    <div class="form-group-short">
                        <label class="col-form-label">Group Filter</label><br />
                        <TelerikDropDownList @bind-Value="@GroupFilterIndex"
                                             TextField="Name" ValueField="Id"
                                             Data="@GroupFilterOptions">
                        </TelerikDropDownList>
                    </div>
                    <div class="form-group-short">
                        <label class="col-form-label">Patient Filter</label><br />
                        <TelerikDropDownList @bind-Value="@PatientFilterIndex"
                                             TextField="Name" ValueField="Id"
                                             Data="@PatientFilterOptions">
                        </TelerikDropDownList>
                    </div>

                </CardBody>
            </TelerikCard>

            <TelerikCard Width="20vh"
                         Class="gsi-card-border-remove">
                <CardBody>

                    <div class="form-group-short">
                        <label class="col-form-label">Patient Status</label><br />
                        <TelerikDropDownList @bind-Value="@IsActiveFilterIndex"
                                             TextField="Name" ValueField="Id"
                                             ReadOnly="@(!IsActiveFilterEnabled)"
                                             Data="@IsActiveFilterOptions">
                        </TelerikDropDownList>
                    </div>
                    <div class="form-group-short align-bottom">
                        <label class="col-form-label gsi-color-white">Apply Filter</label><br />
                        <TelerikButton OnClick="OnFilterChanged" Class="gsi-background-color gsi-color-white gsi-width-100pct">
                            Apply Filter
                        </TelerikButton>
                    </div>

                </CardBody>
            </TelerikCard>
        </TelerikStackLayout>

    </PopoverContent>
</TelerikPopover>

Popover

asked on 18 Sep 2025

1 answer

5 views

Hide field in popup

How do I hide a field in the standard popup window when Add button is clicked?

Grid

updated answer on 16 Sep 2025

1 answer

6 views

Show Text below image in Diagram

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!

Diagram

updated answer on 16 Sep 2025

0 answers

5 views

Blazor TelerikDialog: second dialog does not show correctly after closing the first

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?

Dialog

updated question on 16 Sep 2025

1 answer

12 views

Incorrect tooltip information in Chart when using MissingValues="ChartSeriesMissingValues.Zero"

Hi Telerik Team,

Tooltip information at the first {DataCollectionSizeNumber pasted here} values is incorrect when setting MissingValues="ChartSeriesMissingValues.Zero".
The chart series-line is displayed properly - the value that is missing should be 0 and it's displayed visually as 0.

<TelerikChart>
    <ChartTitle Text="MissingValues.Zero Tooltip Bug (No Nulls)"></ChartTitle>
    <ChartTooltip Visible="true"></ChartTooltip>
    <ChartLegend Position="ChartLegendPosition.Bottom"></ChartLegend>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line"
                     Name="Sample Series"
                     Data="@Data"
                     Field="@nameof(ChartP.Count)"
                     CategoryField="@nameof(ChartP.Category)"
                     MissingValues="ChartSeriesMissingValues.Zero"
                     Style="ChartSeriesStyle.Normal">
            <ChartSeriesTooltip Visible="true" Context="ctxt">
                <Template>
                    @{
                        var point = ctxt.DataItem as ChartP;
                    }
                    <div style="font-size:13px;">
                        <strong>Category:</strong> @point?.Category.ToString("yyyy-MM-dd HH:mm")<br />
                        <strong>Count:</strong> @point?.Count<br />
                        <strong>Extra:</strong> @point?.ExtraInfo
                    </div>
                </Template>
            </ChartSeriesTooltip>

            <ChartSeriesMarkers Visible="false" Type="ChartSeriesMarkersType.Circle" Size="6">
                <ChartSeriesMarkersBorder Width="1" />
            </ChartSeriesMarkers>
        </ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis Min="@StartOfDayLocal" Max="@EndOfDayLocal" Type="ChartCategoryAxisType.Date"
                           BaseUnit="ChartCategoryAxisBaseUnit.Minutes" BaseUnitStep="15">
            <ChartCategoryAxisLabels Format="{0:HH:mm}" Step="4">
                <ChartCategoryAxisLabelsRotation Angle="45" />
            </ChartCategoryAxisLabels>
        </ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartValueAxes>
        <ChartValueAxis>
            <ChartValueAxisLabels Format="{0}" />
        </ChartValueAxis>
    </ChartValueAxes>
</TelerikChart>

@code {
    public class ChartP
    {
        public DateTime Category { get; set; }  // X axis
        public int Count { get; set; }          // Y value
        public string? ExtraInfo { get; set; }  // Info for tooltip
    }

    private static DateTime StartOfDayLocal =>
    DateTime.SpecifyKind(DateTime.Today, DateTimeKind.Local);
    private DateTime EndOfDayLocal => StartOfDayLocal.AddDays(1);

    public List<ChartP> Data = new()
    {
        new ChartP { Category = StartOfDayLocal.AddHours(2), Count = 5, ExtraInfo = "Real Point A" },
        new ChartP { Category = StartOfDayLocal.AddHours(3), Count = 7, ExtraInfo = "Real Point B" },
        new ChartP { Category = StartOfDayLocal.AddHours(4), Count = 3, ExtraInfo = "Real Point C" },
        new ChartP { Category = StartOfDayLocal.AddHours(5), Count = 2, ExtraInfo = "Real Point D" },
    };
}

Am I doing something wrong or this is a bug?

Regards,
Bohdan

Charts

updated answer on 12 Sep 2025

0 answers

9 views

TelerikDialog doesn't work on component

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,

Dialog

asked on 12 Sep 2025

1 answer

7 views

Drag and drop formbuilder

Hi Team,

I would like to know if there are components for drag and drop form building.
https://formengine.io/ is an example in react. I am looking for a form builder to create clinical forms like the ones attached.

Form

answered on 11 Sep 2025

1 answer

20 views

Retrieve Svg Icon Dynamically by String Name

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.

Drawer

answered on 10 Sep 2025

1 answer

11 views

Get actual TreeList Column Width

I have a TreeList with a column width set to "auto." Unless I change something with the state of the TreeList, the state shows the width of the column is "auto" but I can't find the actual width. Is there a way to get the actual width of the column without resizing, sorting, etc?

TreeList

answered on 09 Sep 2025

2 answers

19 views

Form: Limit Entry to MaxLength

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

Form

updated answer on 03 Sep 2025