Duplicated
Last Updated: 21 Jun 2021 13:13 by ADMIN
Created by: Fairoz
Comments: 3
Category: UI for Blazor
Type: Feature Request
0

Hi,

Would be great if there could be a Timeline component for Blazor. Just like the Timeline component for WPF at "https://docs.telerik.com/devtools/wpf/controls/radtimeline/overview".

I need that component or something similar to show time based instances of activity on a particular item. A lack of such visualisation feature is making us hold on to the WPF one. 

Thanks.

Duplicated
Last Updated: 21 Jul 2022 09:00 by ADMIN
Created by: Lance
Comments: 8
Category: UI for Blazor
Type: Bug Report
2

<TelerikDatePicker Id="startDate" @bind-Value="@StartDate" Width="160px" Format="dd-MMM-yy"></TelerikDatePicker>

DateTime StartDate=DateTime.Now

 

When our users type to click on the year and type another one they lose one of the digits - so if they try typing 19 or 18 for instance then it sets the date to year 01

 

 

Completed
Last Updated: 11 Apr 2022 11:16 by ADMIN
Release 3.2.0
OutOfMemory exception when an infinite loop updates the Telerik UI for Blazor components in an EditForm
Duplicated
Last Updated: 12 Jun 2021 06:28 by ADMIN
Created by: Don
Comments: 1
Category: UI for Blazor
Type: Feature Request
0
Allow pre-canned major cities, custom pins, and custom lat/long with label name.

Example live daylight map: https://www.flightradar24.com/

Completed
Last Updated: 14 Jun 2021 13:01 by ADMIN
Created by: Chris
Comments: 1
Category: UI for Blazor
Type: Feature Request
0

It would be nice to switch the color schemes used by the telerik Blazor components on-the-fly in an application (i.e. switch from light mode to dark mode). I realize you have a JS approach to this problem, however that requires maintaining multiple stylesheets and custom javascript, which we are trying to avoid in a Blazor project. I like the approach used by MudBlazor where basically all css colors are variables that can be easily switched at runtime without any javascript:

https://mudblazor.com/wasm/customization/theming/overview

Completed
Last Updated: 14 Nov 2024 09:26 by ADMIN
Release 7.0.0
Created by: MichaƂ
Comments: 3
Category: UI for Blazor
Type: Bug Report
15

When filtering or editing a Grid with enum data, the Name property of their Display parameter is respected.

However, in the initial view mode of the Grid the Name property is not applied and the enum values are rendered regardless of whether or not their Display parameter has a Name property defined.

 

==========

ADMIN EDIT

==========

In the meantime, a workaround you might try is to create a custom method to check whether Display attribute is defined and get and display its Name property, otherwise display the Enum's member name.

You can then use a Template for the column that uses enum data, cast its context to the model you are using and invoke the method on the field containing the enum. The sample below demonstrates how you can achieve this.

@using System.ComponentModel.DataAnnotations
@using System.Reflection

<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="500px"
             OnUpdate="@UpdateHandler" FilterMode="@GridFilterMode.FilterRow">
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="ID" />
        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
        <GridColumn Field=@nameof(SampleData.Role) Title="Position">       
            <Template>
                @{
                    var currentEmployee = context as SampleData;
                    var currentRole = GetDisplayName(currentEmployee.Role);                        
                }

                @currentRole
            </Template>
        </GridColumn>
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    //custom method to check whether Display attribute is defined and get and display its Name property, otherwise display the Enum's member name
    public string GetDisplayName(Enum val)
    {
        return val.GetType()
                  .GetMember(val.ToString())
                  .FirstOrDefault()
                  ?.GetCustomAttribute<DisplayAttribute>(false)
                  ?.Name
                  ?? val.ToString();
    }


    public void UpdateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        //update the view-model
        var index = MyData.FindIndex(i => i.ID == item.ID);
        if (index != -1)
        {
            MyData[index] = item;
        }

        //perform actual data source operations here
    }

    //model and dummy data generation
    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public Role Role { get; set; }
    }

    public enum Role
    {
        [Display(Name = "Manager")]
        ManagerRole,
        [Display(Name = "Employee")]
        EmployeeRole,
        [Display(Name = "Contractor")]
        ContractorRole
    }

    public List<SampleData> MyData { get; set; }

    protected override void OnInitialized()
    {
        MyData = new List<SampleData>();

        for (int i = 0; i < 50; i++)
        {
            MyData.Add(new SampleData()
            {
                ID = i,
                Name = "name " + i,
                Role = (Role)(i % 3) // just some sample to populate initial values for the enum
            });
        }
    }
}

Duplicated
Last Updated: 27 May 2021 11:09 by ADMIN
Created by: Ardi
Comments: 4
Category: UI for Blazor
Type: Feature Request
0
Hi,

I'd like to be have possibility to override <TelerikTimePicker /> buttons' actions or determine which button was clicked.
There's no built-in way to differentiate "Now" and "Set" button click on <TelerikTimePicker /> .

For example I'd like to be able to determine when "Now" button was clicked and modify the time accordingly (set different timezone offset for example). 

Kind regards,
Ardi Aver 
Duplicated
Last Updated: 17 May 2021 21:40 by Lance
Created by: Lance
Comments: 2
Category: UI for Blazor
Type: Bug Report
0

Hi, 

I reported this last week but it got declined ??  Perhaps a picture will help

The default grid displays the filter icon OVER the text and this makes the text unreadable.  This is just the material format from your websites themebuilder

The icon should be closer to the column width adjuster - as you can see from the attachment there is more space between the columns than there is text

I would expect it to be  "| Description  Y |"  and not "|  Desc... Y        |" which is what its doing.  (really the space between the filter icon and the column adjusted is just wasted and there seems to be no way to fix it)

I've tried to move the k-i-filter using CSS and while giving it a left margin of 32px is working ok and making it look reasonable, it still has the circle highlighter when you click it in the wrong place and I can't figure out how to move that also.

 

Completed
Last Updated: 26 May 2021 14:51 by ADMIN

There doesn't seem to be a way to deselect the selected row either by clicking on a selected row again or by two-way-binding and setting it to an empty list.

 

This would be pretty handy as currently the only way that makes sense for me is to make no use of selection mode at all.

Declined
Last Updated: 17 May 2021 06:04 by ADMIN
Created by: Lance
Comments: 3
Category: UI for Blazor
Type: Bug Report
0

Hi,

I have a grid, it has quite a few columns - maybe 10-15, and this is causing 2 problems which are kind of related.

First problem is it tries to squash them all onto the screen making them all narrow and that hides the header text - I have played with horizontal scrollbar but so far I've only managed to resize them after it loads (or to workaround that I have tried save state after I've resized them with some success, but i'd really prefer the default starting point to be wider than the screen - if you have an example you can show me how to do this?)

Next problem is when I add a filter row to it - its basically unusable.  Even though the columns are narrow, they look like they should be wide enough, but instead what happens is the filter button appears in the middle by itself and nothing else appears - sometimes I see " ___ Y      "  but most of the time its "        Y         ".  It seems very poor use of space by default.  This is the material theme. 

Can you help?  I did try with the filter menu but it is more complicated for our users and they prefer the idea of filterrow, plus it also crashes intermittently (see below for callstack).

 

Intermittent crash in filter menu - happens when user clicks the menu then clicks filter, before the filter menu is displayed.
Error: System.NullReferenceException: Object reference not set to an instance of an object.
   at Telerik.Blazor.Components.Common.Filters.FilterList.TelerikFilterList.GetFilterOperators()
   at Telerik.Blazor.Components.Common.Filters.FilterList.TelerikFilterList.InitFilterOperators()
   at Telerik.Blazor.Components.Common.Filters.FilterList.TelerikFilterList.OnInitializedAsync()
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
Completed
Last Updated: 31 Jan 2022 15:46 by ADMIN
Release 3.0.1

---

ADMIN EDIT

The following should let the multiselect render above the custom yellow element, but it does not. A workaround is available as the second CSS snippet that you can uncomment.

<style>
    /*should work but does not*/
    .high-zindex {
        z-index: 124;/*note how this is higher than the z-index of the div element, and is higher than the default z-index of the component*/
    }

    /*workaround*/
    .k-animation-container {
        z-index: 15000;
    }
</style>

<div style="position: absolute; z-index: 123; width: 600px; height: 200px; background: yellow;">
    <TelerikMultiSelect Data="@Countries"
                        @bind-Value="@Values"
                        Placeholder="Enter Balkan country, e.g., Bulgaria"
                        ClearButton="true" AutoClose="false"
                        PopupClass="high-zindex">
    </TelerikMultiSelect>
</div>

@code {
    List<string> Countries { get; set; } = new List<string>();
    List<string> Values { get; set; } = new List<string>();

    protected override void OnInitialized()
    {
        Countries.Add("Albania");
        Countries.Add("Bosnia & Herzegovina");
        Countries.Add("Bulgaria");
        Countries.Add("Croatia");
        Countries.Add("Kosovo");
        Countries.Add("North Macedonia");
        Countries.Add("Montenegro");
        Countries.Add("Serbia");
        Countries.Add("Slovenia");

        base.OnInitialized();
    }
}

---

Duplicated
Last Updated: 09 May 2021 06:28 by ADMIN
Created by: shanthu
Comments: 1
Category: UI for Blazor
Type: Feature Request
8
Many LOB applications have to play video within their web applications. MediaPlayer for Blazor is definitely needed.
Declined
Last Updated: 04 May 2021 14:11 by Ron Barone
Created by: Ron Barone
Comments: 3
Category: UI for Blazor
Type: Feature Request
0

It would be really cool to be able to edit documents much like the WPF syntax editor.

Our use case is that we use blazor for our admin tools and we need to give a better look and feel (color coding) to some stored SQL and XML.  Nothing fancy just a better experience.

 

Duplicated
Last Updated: 12 May 2021 10:29 by Rajesh
Created by: Rajesh
Comments: 4
Category: UI for Blazor
Type: Feature Request
1
In Telerik blazor grid  Incell editing mode once we edit existing grid row and modified and save.  after that how to add new row programmatically (automatically like excel).  No need to bother user to  click add button again and again to add row.
Duplicated
Last Updated: 13 May 2021 12:27 by Victor

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


Planned
Last Updated: 24 May 2025 05:11 by ADMIN
Scheduled for 2025 Q3 (Aug)
Created by: cmarsh
Comments: 11
Category: UI for Blazor
Type: Feature Request
55

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.

---

Duplicated
Last Updated: 24 Apr 2021 19:05 by ADMIN
Created by: Datafyer
Comments: 1
Category: UI for Blazor
Type: Feature Request
1

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.

Declined
Last Updated: 23 Apr 2021 07:43 by ADMIN
Created by: Marc Simkin
Comments: 1
Category: UI for Blazor
Type: Bug Report
0

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>

Duplicated
Last Updated: 21 Apr 2021 11:23 by ADMIN
Created by: Greg
Comments: 1
Category: UI for Blazor
Type: Feature Request
0

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/

 

Declined
Last Updated: 17 Jul 2021 10:29 by ADMIN
Created by: Matt
Comments: 6
Category: UI for Blazor
Type: Feature Request
0

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.

---