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.

I have this code:

    <TelerikDatePicker @bind-Value="@Value" Width="400px" Format="dd/MM/yyyy">
    </TelerikDatePicker>

this results in this:

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

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

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

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>

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>

We modified the code in the InCell Editing demo (Blazor Components Demos and Examples - Telerik UI for Blazor) with the Telerik REPL tool to include an EditorTemplate for the UnitPrice column. If we type in the column quickly and press tab to exit the field the input is cutoff.  ie; we type 155 and the value shown in the grid after the update is 15.  We have recorded a video showing the problem but we are unable to upload here.  

In our own sample application that we built to isolate the problem we saw the same behavior with TelerikTextBoxes and TelerikNumericTextBoxes.

Is this a known problem with a known solution? 

The code used for the EditorTemplate

        <GridColumn Field=@nameof(ProductDto.UnitPrice) DisplayFormat="{0:C}" Title="Unit Price" Width="150px" >

I am trying to create dropdowns in my filter and I see there is an item that is currently unscheduled but am looking for a solution I can implement now
Unplanned feature

looking at the TelerikEnumEditor I see that the enums are doing exactly what I need but I need to change the Data Dictionary<int,string> to my own data. 

I have found a way to overwrite the GetEnumData function but it's not passing the information it's altering it within the class, Is there a way for me to access the Data member of the component when I am defining my filter fields or pass it along with it?

or are there other alternatives I have missed?

Thanks

Matt