Questions on UI for Blazor Forum

1 answer

295 views

Noticed today that when opened in Figma, these "warning-circle" icons appear (as we suspected) that the top portion of the exclamation mark is not cut through the image. It should look like the "warning-triangle". Any update or info on this would be much appreciated. Thanks in advance!

Styling

answered on 19 Feb 2024

1 answer

291 views

Problem with DropDownList data annotations

I have an issue with the DropDownList and Data Annotations.

I have created a REPL instance that demonstrates the problem https://blazorrepl.telerik.com/GyamPdlf37LXpPAW36

Select the last item in the tree 7.Garden and change the value in the drop down list to Unsupported.

The drop down list shows a red border.

Select item 6.Garden from the tree. (Any item in the tree other than 1 will do)

I expect the drop down to not have the red border, yet is does.

The text box does not show the same behaviour.

Select 7.Garden

Edit the email address to start with unsupported

The text box has the red border

Select any other item in the tree, they will not have the red border.

TBH I'm not sure if this is a Telerik/DropDownList issue or I'm doing something wrong.

The REPL example replicates an issue in a larger piece of code that is more complex with regards to the validation which is why there are no data annotations on properties and the binding are not simple.

Regards

DropDownList

answered on 16 Feb 2024

1 answer

957 views

Open TelerikPopup in Grid Cell

I'm trying to open a popup from a button in a grid cell. The button work and opens the popup, but it opens in the top left corner of the screen, rather than anchored to the button. I would love to get it to the right of the icon, with a little space in between.

In my grid column, I've added a button to open the popup

<GridColumn Field="L1" Title="Level 1" FieldType="@typeof(string)">
    <Template>
                @{
                    var item = (TaxonomyGrid)context;
                }
                @item.L1
                <TelerikButton OnClick="@(() => PopupRef.Popup_OpenAsync())" Class="popup-target" Icon="@SvgIcon.User" Title="The name of the owner" />
    </Template>
    <FilterMenuTemplate>
        <div>
            <TelerikMultiSelect Width="300px" AutoClose=false Data="@L1List" TextField="Name" ValueField="TaxonomyId" OnChange="@(() => FilterGrid(1, SelectedL1Ids))" @bind-Value=@SelectedL1Ids > </TelerikMultiSelect>
        </div>
    </FilterMenuTemplate>
    <FilterMenuButtonsTemplate />
</GridColumn>

The popup itself is pretty generic and is added to the page after the grid.

<TelerikPopup
    @ref="@PopupRef"
    AnchorSelector=".popup-target">
    I am a Telerik Popup.
</TelerikPopup>

My other issue is I have none of the placement properties such as AnchorHorizontalAlign and AnchorVerticalAlign. If I try and add them to the TelerikPopup tag, it tells me it doesn't exist.

It's got to be something really simple, yes? Help me please.

Update: I added the popup to the column template

        <GridColumn Field="L2" Title="Level 2" FieldType="@typeof(string)">
            <Template>
                @{
                    var item = (TaxonomyGrid)context;
                }
                @item.L2
                @{
                    if (item.L2OwnerId != null)
                    {
                        <TelerikButton OnClick="@(() => PopupRef.Popup_OpenAsync())" Class="popup popup-target" Icon="@SvgIcon.User" Title="The name of the owner" />
                        <TelerikPopup Class="popup" @ref="@PopupRef"
                                        MinHeight="500px"
                                        MinWidth="300px"
                                        AnchorSelector=".popup-target">
                            <span>@item.L2OwnerName</span>
                            <span>@item.L2OwnerEmail</span>
                        </TelerikPopup>
                    }
                }
            </Template>
            <FilterMenuTemplate>
                <div>
                    <TelerikMultiSelect Width="300px" AutoClose=false Data="@L2List" TextField="Name" ValueField="TaxonomyId" OnChange="@( () => FilterGrid(2, SelectedL2Ids))" @bind-Value=@SelectedL2Ids> </TelerikMultiSelect>
                </div>
            </FilterMenuTemplate>
            <FilterMenuButtonsTemplate />
        </GridColumn>

Now, I click on the first row with an icon and the tooltip works as expected. However, if I click on a subsequent row the tooltip appears in the wrong place. I assume this is related to the fact I can't set the horizontal/vertical relationship with the anchor because the properties are availble?

Update #2 I fixed part of the anchor problem. I created a method to open the popup and I found some properties there that let me set the anchor alignment, plus I removed the min-height and set the max-height.

        public void Openpopup()
        {
            PopupRef.AnchorAlign.HorizontalAlign = PopupHorizontalAlign.Right;
            PopupRef.AnchorAlign.VerticalAlign = PopupVerticalAlign.Top;
            PopupRef.Popup_OpenAsync();
        }

Now if I click down the column the popup is positioned correctly, however (LOL) if I click on the 6th row down, then click on the first row the popup appears with the 6th row. ugh.

Popup

answered on 15 Feb 2024

1 answer

665 views

Telerik Textbox Password Input

Is there a way to keep the show password icon on the textbox whether the textbox is focused or not or when its initialized?

TextBox

answered on 15 Feb 2024

5 answers

514 views

Datepicker format doesn't work

I have this code:

this results in this:

Why is it not the format dd/MM/yyyy as I specified?

DatePicker

answered on 15 Feb 2024

1 answer

190 views

Blazor ListView CRUD operations - OnAdd

Hi,

I couldn't find OnAdd event for Blazor Listview component CRUD operations(like the one available for Grid) .

I would like to initialize certain properties of the model when 'Add' button is clicked, is there any other workaround?

Thanks,

Deepa

ListView

answered on 14 Feb 2024

1 answer

437 views

[Solved] Hide the expand icon on Blazor Panelbar items when there is nothing to expand.

How can I hide the expand button on the right side of the panelbar header if there is nothing to expand? I am willing to do this either through code somehow or even if I have to access the css and set the fill of the svg icon to white I will, but I have not been able to do so, thus far. At very least disabling the expand button would be an option as well. As you can see in my image, the top item I want an expand button but the one beneath it since it has zero hours should be removed. Any help would be appreciated.

PanelBar

Styling

answered on 14 Feb 2024

1 answer

257 views

Display the prompt and output for the AIPrompt as one view

I am wondering if it is possible to change the AIPrompt to be a bit more like a chat then a separate request/prompt, and then having it as it currently operates as separate window/tab displaying the prompt and user response and the second tab having the output to the prompt. It would seem to me that it is smoother to have it all in one, rather than separate. Is there any solution?

Steve

AIPrompt

answered on 14 Feb 2024

1 answer

750 views

ErrorBoundary not working if async event handlers

Hi,

This seems to effect most telerik components, but if for example using a TelerikCheckBox and the ValueChanged event is an async function, then the error boundry wont catch the exception. This works from basic checkboxes or if not using async.

Example:

<div>
    Telerik checkbox (does NOT display any error): <TelerikCheckBox TValue="bool" ValueChanged="@OnCheck" />
</div>

<div>
    Basic checkbox (displays the error): <input type="checkbox" @onchange="@OnCheck" />
</div>

@{
    async Task OnCheck()
    {
        throw new Exception("Something went wrong!");
    }
}

MainLayout:

<ErrorBoundary>
    <ChildContent>
        <div class="page">
            <div class="sidebar">
                <NavMenu />
            </div>

            <main>
                <div class="top-row px-4">
                    <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
                </div>

                <article class="content px-4">
                    <TelerikRootComponent>
                        @Body
                    </TelerikRootComponent>
                </article>
            </main>
        </div>
    </ChildContent>
    <ErrorContent>
        ERROR!!!
    </ErrorContent>
</ErrorBoundary>

Checkbox

TextBox

answered on 14 Feb 2024

1 answer

443 views

[Solved] Resizing the Editor

Hello,

I'm a newcomer to Telerik, and I'd appreciate it if you could assist me without suggesting that the documentation is clear enough.

Is there an uncomplicated method to enable resizing for the Editor, similar to the one used in your forum's editor?

I'm concurrently working with Syncfusion controls, and I've been able to implement a resizable editor easily using the code provided below with their control.

How can I achieve the same functionality with your control?

Regards,

Omar

@using Syncfusion.Blazor.RichTextEditor
<div class="control-section resize">
    <SfRichTextEditor EnableResize="true" Height="250px">
        <p>
            The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
            Users can format their content using standard toolbar commands.
        </p>
    </SfRichTextEditor>
</div>
<style>
    .e-richtexteditor {
        max-width: 880px;
        min-width: 200px;
        min-height: 170px;
        max-height: 400px;
    }
    .control-section.resize .e-popup.e-popup-open.e-dialog {
        max-height: 410px !important;
    }
</style>

Editor

answered on 06 Feb 2024