Hello, 

We are looking to port an angularjs web application to Blazor and I didn't see the diagram component similar to the one found in Kendo UI. It would be nice to see a viso-like component in UI for Blazor.

Thank you.

I'd like at least a linear gauge

*** Thread created by admin on customer behalf ***

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/

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

I have an ENUM like this:

  public enum DeliveryMailOptions
        {
            Regular,
            [Display(Name ="FedEx Priority")]
            FedExPriority,
            [Display(Name ="FedEx Two-Day")]
            FedExTwoDay
        }

It is used in a data model like so:

[Display(Name = "Mail Option")]
public DeliveryMailOptions MailOption { get; set; }

When rendered, it ignores the Display attribute and only shows the enum text.

Like the one in Kendo https://demos.telerik.com/kendo-ui/breadcrumb/index

With the ability to hook to the URL and URL change like this https://docs.telerik.com/kendo-ui/controls/navigation/breadcrumb/navigation

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.

---

ADMIN EDIT: Please review this thread and add your comments so we can get the community feedback on this. We have attached to this opener post a small sample that shows how to achieve this with a few lines of code, and a short video of that behavior.

Hello Team;

The Grid Popup is a great feature, but my understanding is that the Popup form ONLY shows properties that are assigned as columns to the Grid.
If true, this poses some restrictions for us. Many times we might show ONLY small # of columns in Grid, however the form requires MORE properties during ADD or UPDATE.
Is it possible that we can use two ViewModels, one for the Grid columns with less properties and one with more properties for ADD & UPDATE?

Note: If this FR is considered, perhaps we can have separate ViewModel for Update and ADD, as sometimes, ADD might require more properties to be added than later be updated.

This feature will save a lot of time to build apps that have many tables and we have to create CRUD operations

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!

I would like components like the TextBox, NumericTextBox, TextArea, Button to have a method in their reference similar to the FocusAsync() which Microsoft included to the ElementReference in .NET5.

---

ADMIN EDIT

For the time being, you can use JS interop and prepare a suitable selector. Here is a basic example for the button:

@inject IJSRuntime _js

Notes:<br />
- Move this script to a proper place, it is hacked into the component to make this snippet short
- Make sure the ID is unique if you use IDs. THere are other selectors you can use (such as classes, or you can even cascade your selectors to make them more specific)
<br /><br />

<script suppress-error="BL9992">
    function focusElement(selector) {
        var elem = document.querySelector(selector);
        if (elem && elem.focus) {
            setTimeout(function () {
                elem.focus();
            }, 30);
        }
    }
</script>

<TelerikButton OnClick="@FocusBtn">Focus the other button</TelerikButton>

<br /><br />

<TelerikButton Id="@btnId" OnClick="@SpecialBtnAction">I will be focused programmatically</TelerikButton>

@code{
    string btnId = "my-special-btn";

    async Task FocusBtn()
    {
        await _js.InvokeVoidAsync("focusElement", $"#{btnId}");
    }

    async Task SpecialBtnAction()
    {
        Console.WriteLine("special button clicked");
    }
}

---

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!

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.

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.

---

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.

See more details in the following KB article: https://docs.telerik.com/blazor-ui/knowledge-base/textbox-validate-on-change and if the behavior and solution there do not fit your needs, leave your comments and ideas on how you want this exposed for configuration and what the desired behavior is. Also, make sure to Vote for this enhancement so we can gauge the public interest in it.

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

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>