I see a good solution for angular (PopupSettings.appendTo)

https://www.telerik.com/forums/datepicker-doesn%27t-open-in-ionic-modal#5117655

but blazor only has the PopupClass attribute to work with.  Assigning that a class with a large z-index didn't help

I'm looking for what you have in WPF as we migrate ourselves over to Blazor - https://www.telerik.com/products/wpf/conversational-ui.aspx

---

ADMIN EDIT

For the time being, you can consider using the Kendo Chat widget as described in this sample project.

---

It would be helpful if I had a rating control similar to Rating - MudBlazor.

Further it would be helpful if the selected/unselected items could be different visually for colors and icons.

The attributes that the Telerik Input components, FormItem, and FormGroup should all be consistent in the attributes that are supported.  For example, the TelerikSlider component doesn't support an Id property.  The FormGroup component doesn't support a Class property.

If I place the Slider inside a FormItem Template and provide my own label. I can't associate the label with the Slider since there is no Id property.

Also, if I am using a FormGroup to make sure that two input controls are shown horizontally install of vertically, I can't override the gray horizontal rule that shows with the group, especially when I am not providing LabelText.  I don't want to override this at the TelerikForm as I would like the default behavior in specific instances.

The attached screen shot highlights the issue.  Here is the razor component markup.  Note: Replace the custom RecSetSelector component with a dropdownlist.

@{
    var model = ViewModel.Model;
}

<TelerikForm EditContext="@EditContext"
             Columns="2"
             ColumnSpacing="20px"
             Orientation="FormOrientation.Vertical"
             OnValidSubmit="OnValidSubmit">
    <FormValidation>
        <FluentValidationValidator />
    </FormValidation>
    <FormItems>
        <FormGroup LabelText="Set options">
            <FormItem>
                <Template>
                    <label class="k-label k-form-label" for="setName">Set Name</label>
                    <TelerikTextBox Id="setName" @bind-Value="@model.SetName"></TelerikTextBox>
                </Template>
            </FormItem>
            <FormItem>
                <Template>
                    <TelerikDateRangePicker @bind-StartValue="@model.StartDate"
                                            @bind-EndValue="@model.EndDate"
                                            Min="@ViewModel.MinStartDate"
                                            StartId="startDate"
                                            EndId="endDate"
                                            DisabledDates="@ViewModel.DisabledDates">
                    </TelerikDateRangePicker>
                </Template>
            </FormItem>
            <FormGroup Columns="2">
                <FormItem>
                    <Template>
                        <label class="k-label k-form-label" for="allowAutoFill">Allow Auto Fill</label>
                        <TelerikCheckBox Id="allowAutoFill" @bind-Value="@model.AllowAutoFill"></TelerikCheckBox>
                    </Template>
                </FormItem>
                <FormItem Field="@nameof(model.RequiredRecsToExpire)">
                    <Template>
                        <label class="k-label k-form-label">Required Recs to Expire</label>
                        <TelerikSlider @bind-Value="@model.RequiredRecsToExpire"
                                       Min="0"
                                       Max="20"
                                       SmallStep="1"
                                       LargeStep="5"
                                       ShowButtons="false"/>
                    </Template>
                </FormItem>
            </FormGroup>
        </FormGroup>
        <FormGroup LabelText="Initial starting point">
            <FormItem LabelText="existingSets">
                <Template>
                    <label class="k-label k-form-label" for="existingSets">From existing recommendation sets:</label>
                    <RecSetSelector AvailableSets="@ViewModel.AvailableSets"
                                    IsNew="true"
                                    SelectedSetId="@ViewModel.SelectedSetId"
                                    OnSetSelected="@OnSetSelected" />
                </Template>
            </FormItem>
            <FormItem>
                <Template>
                    <label class="k-label k-form-label" for="eanList">From a list of EANs:</label>
                    <TelerikTextArea Id="eanList"
                                     @bind-Value="@ViewModel.EanList"
                                     AutoSize="true">
                    </TelerikTextArea>
                </Template>
            </FormItem>
        </FormGroup>
        <FormItem ColSpan="2" Field="@nameof(model.Comment)">
            <Template>
                <TelerikTextArea Id="comment"
                                 @bind-Value="@model.Comment"
                                 AutoSize="true">

                </TelerikTextArea>
            </Template>
        </FormItem>
        <ValidationSummary />
    </FormItems>
    <FormButtons>
        <div class="justify-content-end">
            <TelerikButton ButtonType="ButtonType.Button" OnClick="OnCancel">Cancel</TelerikButton>
            <TelerikButton ButtonType="ButtonType.Submit" Primary="true">Save</TelerikButton>
        </div>
    </FormButtons>
</TelerikForm>

Similar to how TelerikTextBox lets you set a label that moves above the control when filled, TelerikComboBox and TelerikMultiSelect also need this.

Currently you can set a label on TextBox but not some of the other editor controls.

Here is a screenshot comparing the textbox with the combo:

Here is the material UI demo for a combo with this feature:

https://material-ui.com/components/selects/

I wasn't sure if I should report this as a bug or not. With a modal window, you can tab beyond the modal window into the URL, and then continue on into the page behind the modal window itself. I was able to recreate this on the Modal demo, and fire a search, even though I couldn't click to get there. As I saw in another post that it is essentially a viewport modal (https://feedback.telerik.com/blazor/1510450-prevent-the-user-from-dragging-a-window-out-of-the-viewport), would it be possible to force modal to be system modal, as was available back in the ancient Winforms days?

---

ADMIN EDIT

That's how a web page behaves. Code in a web page cannot and should not prevent the user from using their OS. The browser chrome (address bar, buttons and so on) are part of the OS, and as such are beyond the sandbox of the web app. The web app is limited to the viewport, it cannot go out of it, or interact or control elements outside of it. Anything else would be a severe security issue.

A system-wide modal dialog is only possible though a native application, but not in a web application.

---

Hi,

In most of my projects I use the ObjectGraphDataAnnotationsValidator component for validating complex types; and I also use a lot of your components. I've noticed what I *think* might be a clash between this validator and some of your input components. I've built a simple (and crude) example but I think it demonstrates the problem.


In the example code we have a table with 2 cells - in both cells we have an EditForm and 10 TelerikTextArea components. The first cell's EditForm contains a ObjectGraphDataAnnotationsValidator instance and the 2nd cell doesn't. Hopefully when you try to reproduce you will notice a distinct difference in performance with the performance of the 2nd EditForm being great, while the 1st EditForm is quite laggy and gets worse the more items you add.


I'm wondering if there is a clash here between the ObjectGraphDataAnnotationsValidator and the input components or I'm using them incorrectly?


Thanks
Michael.

@page "/"

<table width="100%">
    <tr>
        <td width="50%">
            <h3>EditForm with ObjectGraphDataAnnotationsValidator</h3>
            <EditForm Model="Items">
                <ObjectGraphDataAnnotationsValidator />
                @foreach (var item in Items)
                {
                    <div style="display: flex">
                        <TelerikTextArea @bind-Value="item.TextValue" />

                        @if (Items.IndexOf(item) == (Items.Count - 1))
                        {
                            <TelerikButton OnClick="@(() => Items.Add(new DataItem()))">
                                Add
                            </TelerikButton>
                        }
                    </div>
                }
            </EditForm>
        </td>
        <td width="50%">
            <h3>EditForm without ObjectGraphDataAnnotationsValidator</h3>
            <EditForm Model="Items">
                @foreach (var item in Items)
                {
                    <div style="display: flex">
                        <TelerikTextArea @bind-Value="item.TextValue" />

                        @if (Items.IndexOf(item) == (Items.Count - 1))
                        {
                            <TelerikButton OnClick="@(() => Items.Add(new DataItem()))">
                                Add
                            </TelerikButton>
                        }
                    </div>
                }
            </EditForm>
        </td>
    </tr>
</table>

@code {
    protected List<DataItem> Items { get; set; }

    protected override void OnInitialized()
    {
        Items = new List<DataItem>();
        for (var i = 1; i <= 10; i++)
        {
            Items.Add(new DataItem { TextValue = $"This is item number {i}." });
        }
    }

    public class DataItem
    {
        public string TextValue { get; set; }
    }
}

Hello Team;

I'd would to see an Image & gallery Blazor component that is is data bound with the following effects:
https://ambient-image.wemakesites.net/?ref=madewithvuejs.com

This will allow us to create attractive apps related to imaging and marketing apps.

Thanks!

Hello team;

Let's say, depending on the user's authorization level, we just want to show the content of the Editor as "Read-Only" with no toolbar. So it will basically looks like an HTML rendered content to them to read.

Is it possible to do so with Editor or can we add a feature to hide the toolbar and make it read only?

If not, what's the best way and lightest way to show the content as read-only on different devices based medias query?

Thanks!

Can I use Translators or any other abstraction of Telerik component for my Selenium UI tests? 

---

ADMIN EDIT

Even if Telerik does not provide some example translators to facilitate e2e testing with Selenium, you can build your own translators and abstractions to access the correct DOM elements. You can find some guidance in this forum thread: https://www.telerik.com/forums/xunit-selenium-tests.

---

Hello

I noticed the DateRangePicker "OnChange" fires "on blur".

Confirmed by the docs;

https://docs.telerik.com/blazor-ui/components/daterangepicker/events#onchange

Is it possible to expose OnInput even for a "react style" onchange event?

https://linguinecode.com/post/onblur-vs-onchange-react-text-inputs

I think the StartValueChanged and EndValueChanged events have the same behaviour so unbinding might not be a solution..?

Attached is a use case where it is confusing because the events are not in sync... You'll see the grid data changes (data bound), but OnChange after you click out.

Create code snippets for all Blazor controls.

Provide either automation for installing into the Visual Studio toolbox or just provide as a web page for users to copy paste them into the Toolbox.

So the Date Filter is not working.

I believe this is because my data has Time with it, I couldn't find any help on how to ignore the time part in the date filter.

 <GridColumn Title="Date Visit" DisplayFormat="{0:D}" Field="DateOfVisit">
                    <Template>
                        <label class="gridLabel">Date Visit:</label>
                        @{
                            if ((context as Visit).DateOfVisit!= null)
                            {
                                @((context as Visit).DateOfVisit.Value.ToShortDateString())
                            }

                        }
                    </Template>
                </GridColumn>

Currently, the notification is displayed behind the overlay of the window modal. I was wondering if it might be better to be in front.

I would like to suggest couple of helpful features on the OnRowRender event on the grid component.  I know these can be done with a custom row template.  But if a couple of additional properties would be tacked on to "GridRowRenderEventArgs args", it would be helpful.

1. Columns and Cells collection
   Would like to override the display of a databound item, but not the underlying data.
   
2. Selection
   Based on props of the databound item, it would be helpful to disable the ability to select the row.

I'm using trial licence to test your component, I just started today and the first thing I'm trying is the layout.
We need a customizable dashbord where we can place our "widget" and store its layout.
I see you have TileLayout component but it doesn't support a proper flexible dashboard design because everytime I resize an element (or reorder) the grid auto-adjust, while we need to be possible to have "holes" in between while designing the dashboard, otherwise it's difficult to have control over the design process and UX is bad.

A simple example to explain the problem, is if I want to design a dashboard starting to place a vertical widget on the right. It's not possible until I don't fill the left space with other controls.
That's not what we'd expect, is this because of a bad usage or because it's not supported? (I think the latter because I tried to play with different settings)

What I'd expect is, for example looking at your demo in https://demos.telerik.com/blazor-ui/tilelayout/overview, that if I resize the first panel (Page Views) the content on the right stays there and don't move to the left

In your documentation you say that you follow CSS Grid Layout but css grid layout allows you to have empty elements in your template, while I see this is a missing feature that would be really useful

Example of the unwanted behavior:

Starting point:

I'm going to resize (shrink) the Page Views panel

Actual result:

Expected result:

note the empty cell.

Basically components should be able to be placed freely on the grid and should be locked in place during resize (it could be an option)

Let me know if I've to give more details,

Thanks