In the Blazor DropDownList it would be great to provide custom text or template to replace the "no data" message when the Data property returns an empty collection. Often, in cascading dropdowns, an empty list occurs because a value up the hierarchy has not been chosen yet. For example, if you have dropdowns for County and City, the City dropdown will be empty until a County is selected. It would be nice if the City dropdown, in that case, could say "Please select a county first" instead of "no data".

Thanks.

<AdminEdit>

This is also applicable to the MultiSelect, ComboBox, AutoComplete. 

</AdminEdit>

Just Moving from Ajax UI to Blazor

Used the search box a lot - multi-columns, had first match as typed toward an item,filtering, a click return the item selected

Wonderful

please can we have a blazor version?

Nick

Hi

Passwords are not yet supported. There is a DataAnotations Datatype for that. So technically this is possible and should not be a big deal. Almost all apps have a password entry somewhere. 

Example:

    class LoginModel
    {
        [Required]
        [Display(Name = "User Name")]
        public string UserName { get; set; }

        [Required]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }
    }

Annoying because then you have to do the form fields all manually because of the password.

Thanks for considering.

Best regards, Michael

Hi. VS 2022 version 17.2.4, C#, Windows 11

I thought I'd have a look at blazor and selected the Telerik version in the new projects window and ran through the wizard.

I selected the dashboard look, .net 6, teleric UI for blazor 3.4.0 (Dev) and to enable localization, which is what I assume to be the cause of the following error message. There were no other hints and as I've never tried blazor or telerik for blazor I don't know if there's anything missing from the solution. If I ran another wizard without localization there was no error.

An error occurred while running the wizard.

Error executing custom action Telerik.Blazor.VSX.Actions.CopyBlazorLocalizationResourcesAction: System.Collections.Generic.KeyNotFoundException: The given key was not present in the dictionary.
   at System.ThrowHelper.ThrowKeyNotFoundException()
   at System.Collections.Generic.Dictionary`2.get_Item(TKey key)
   at Telerik.Blazor.VSX.Actions.CopyBlazorLocalizationResourcesAction.Execute(WizardContext wizardContext, IPropertyDataDictionary arguments, IProjectWrap project)
   at Telerik.VSX.WizardEngine.ActionManager.ExecActions()

In the example below, the home icon is displayed correctly but the two with underscores are not.  Moving the span outside the drawer does display correctly.

<TelerikRootComponent>
    <TelerikDrawer Data="@NavigablePages"
                   @bind-Expanded="@DrawerExpanded"
                   MiniMode="true"
                   Mode="@DrawerMode.Push"
                   @ref="@DrawerRef"
                   @bind-SelectedItem="@SelectedItem">
        <Template>
            <div class="k-drawer-items">
                <ul>
                    <li class="k-drawer-item" style="white-space:nowrap">
                        <span class="k-icon material-icons" style="margin-right: 8px;">home</span>
                        @if (DrawerExpanded)
                        {
                            <span class="k-item-text">Home</span>
                        }
                    </li>
                    <li class="k-drawer-item" style="white-space:nowrap">
                        <span class="k-icon material-icons" style="margin-right: 8px;">shopping_cart</span>
                        @if (DrawerExpanded)
                        {
                            <span class="k-item-text">Shopping Cart</span>
                        }
                    </li>
                    <li class="k-drawer-item" style="white-space:nowrap">
                        <span class="k-icon material-icons" style="margin-right: 8px;">content_paste_search</span>
                        @if (DrawerExpanded)
                        {
                            <span class="k-item-text">Clipboard</span>
                        }
                    </li>
                </ul>
            </div>
        </Template>
        <DrawerContent>
                <div class="content px-4">
                    @Body
                </div>
            </div>
        </DrawerContent>
    </TelerikDrawer>
</TelerikRootComponent>

Hi good morning. I am implementing a FileManager control, but by business logic only certain users have permission to rename files. So in the onEdit method I validate the permission and if it doesn't have it I send a DialogFactory and after that I send an args.IsCancelled = true. And at the end of the event if I click on another item (file) inside the folder. throw an exception:

public async Task OnEdit(FileManagerEditEventArgs args)
    {
        Dialogs.AlertAsync(message, "FileManager");
        args.IsCancelled = true;
    }

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
   at Telerik.Blazor.Extensions.ReflectionExtensions.GetPropertyValue(Object target, String propertyName)
   at Telerik.Blazor.Components.TelerikFileManager`1[[XXX.WASM.Shared.HierarchicalFileEntry, XXX.WASM.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ConvertToFileEntry(Object dataItem)
   at Telerik.Blazor.Components.FileManager.FileView.FileManagerFileViewBase`1[[XXX.WASM.Shared.HierarchicalFileEntry, XXX.WASM.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ConvertToFileEntry(Object dataItem)
   at Telerik.Blazor.Components.FileManager.FileView.FileManagerListFileView`1.<>c__DisplayClass17_2[[XXX.WASM.Shared.HierarchicalFileEntry, XXX.WASM.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].<BuildRenderTree>b__8(RenderTreeBuilder __builder3)
   at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)
   at Telerik.Blazor.Components.ListView.ListViewItem`1[[XXX.WASM.Shared.HierarchicalFileEntry, XXX.WASM.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].<BuildRenderTree>b__17_0(RenderTreeBuilder __builder2)
   at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)
   at Microsoft.AspNetCore.Components.CascadingValue`1[[Telerik.Blazor.Components.ListView.IListViewCommandContainer, Telerik.Blazor, Version=3.3.0.0, Culture=neutral, PublicKeyToken=20b4b0547069c4f8]].Render(RenderTreeBuilder builder)
   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)

We're a paying customer for the Blazor software components under AVEVA.

We need to do a substantial amount of custom real-time drawing on top of a Blazor based map control using a layer rendered on top of the Tile Layer.  The currently supported Map layers are somewhat specific to smaller map indicators and static overlays.

Our rendering subsystem doing this drawing will be using SkiaSharp/Skia on WebAssembly, drawing on a Skiasharp canvas in the browser (this already works).  I'm assuming behind the scenes the Map is drawing with a standard HTML canvas.

I believe we need a solution which resembles the following:

- The Image is a layer rendered on top of the map viewport (as opposed to the entire map canvas)

- The Image layer can know the size of the ViewPort so it can create an identical size image (or perhaps this is handled automatically by the Map control)

- The Image layer can be re-rendered as often as the customer code desires (we're showing realtime data on top of maps, so we will want to re-render the Image layer say every 250ms.

- When the map viewport changes (pan, zoom, etc.), events are fired so the Image layer customer code can re-render the image based on the new viewport coordinates and zoom level.

- Click events are passed through the Image Layer for processing.

Since we're using a different rendering technology than the underlying map control, my assumption is the best way to keep this simple is our code draws to a SkiaSharp canvas then converts that to PNG/BMP/whatever so that can be injected into the Image layer for rendering.

It would be expected that every pan/zoom/viewport change causes an entire re-rendering of the Image layer.

Hi I have noticed that if the dropdown for an enum cannot wordwrap the item then the styling is broken, see the following the screenshot:

As you can see IN_PROGRESS is so long that it exceeds the column width and creates empty space above.

To me it appears as though an attempt to try to wordwrap the IN_PROGRESS but IN_PROGRESS has no applicable breaks in it.

Thanks,

Daniel

Hi I was wondering if there is a way for us to have the functionality of CloseOnOverlayClick like on Dialogs for the Create/Edit Popup in the TelerikGrid?

I can't seem to find the option within the TelerikGrid -> GridSettings -> GridPopupEditSettings component

Thanks,

Daniel

We have a grid with the standard numeric filter menu.

When we copy a numeric value from Excel or from somewhere else and paste it into the field it is not copied.

This also happens with the demo on https://demos.telerik.com/blazor-ui/grid/filter-menu

It does not work since the 3.3.0 version.

Looks like the filter row has the same problem.

As a user, I would like to ability to pin one to many row(s) in a grid so that the pinned rows are always the first rows at the top of the grid.

If a filter is applied, the pinned records that match the filter should be displayed first.  Non matching rows may be hidden.

If a column sort is changed, the pinned rows should be sorted then the unpinned rows should be sorted to ensure the pinned rows are always at the top of the grid.  

As a developer, Pinning should be a optional feature configured when the grid is setup.

This essentially would only add a data populated "pin" column the user can toggle on or off, but the real effort in this request is around the sorting and filtering to ensure when the user clicks a column the event is captured, and the sort is submitted as pin column, then the selected column, to ensure the pin takes precedent.  

All I ask is to give a way to have a proper working datepicker. Like your javascript datepickers. That doen't care only for right values but for the person that uses it. Telerik was an early adopter in the Blazor ecosystem, I don't know how they haven't yet fixed their datepickers.

You can do this with many ways. I don't know them all but I will propose some here.

1. Create a second datepicker component that works properly.
2. Put an attribute in the component to work with free-text
3. Maybe if this attribute is on you can switch behind between 2 different components
4. Find a other solution of your own.

In the end behind the scenes you shouldn't bind the datepicker input in the datetime property but to a sting one. DevExtress has done this right.

This will solve

1. Proper user expirience when a user uses the keyboard to edit dates
2. Copy-Paste issue
3. Clear date parts issue
4. all from 30/4/2022 to edit to 31/5/2022 with out having to clear the input
5. Strange editing of years (I have an example in the end)
6. Allow to have dots or what ever the users want between dates numbers. (e.x. 13.3.2022 )

I this is a trade-off and you will have senarios with wrong inputs and other things, but you already know them from the javascript world, and it's less importand than the aboves.

*Strange editing of years

Lets say that we have the year 1998 19and we want to put 2014.

the users See
-> 1/1/1998
-> 1/1/9982
-> 1/1/9820
-> 1/1/8201
-> 1/1/2014

That's not user friendly, and is very disturbing.

https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.fieldcssclassprovider.getfieldcssclass?view=aspnetcore-6.0

The feature request is to provide a way for Telerik customers to define custom validation classes. It seems appropriate to have the FieldCssClassProvider override in Telerik components. Thus, if required customers would be able to apply custom styling and remove the default theme classes for valid and invalid state.

My team is currently using animation containers as menu popups in our web app, which will need to work on both desktop and mobile devices in a web browser. For the mobile layout, I would like to be able to open animation containers via swipe gestures. I understand that animation containers are not strictly menus, however, I would love to see swipe action support in Telerik UI for Blazor, and then be able to bind that action to an animation container.

The only framework I have found by way of example is https://onsen.io/. Please observe how it is possible to open a panel by swiping close to the edge of the sample device on their homepage.

This feature would make it much easier to build dynamic web apps that perform well on desktop and feel native on mobile devices as well.

Thank you,

David

Hi Team,

We are using Telerik Modal popup on the GridView edit click button.

This Modal Window moves out of the screen when user clicks on popup header click when there is a vertical page scrollbar and the scroll position is not top.

Can you please fix this bug? We implemented your workaround, but using that workaround with below link, after opening the popup, below screen automatically scrolls on top. This is not good user experience on lengthy page.

Expectation : Page scroll should stay with the previous position after opening the popup with scrollbar.

Modal Window moves away from the cursor on drag start when there is a vertical page scrollbar and the scroll position is not top (telerik.com)

Thanks,

Aarti Tare

This Feature (above) would make my life more easily :) I mean custom main line, which shows, for example, how many items are selected.  The existing solution (below) does not work for me because of overflow behavior.

I have a telerikdropdownlist in the EditorTemplate of a Grid. If a user uses the keyboard to speed the navigation of the dropdown (for example: they type a T to immediately scroll to the T section), then clicks on a selection further down in the list, the selected item becomes the item navigated to via the Keyboard, not the item that is actually clicked on. Clicking on an item (without using the keyboard navigation first) works as expected. I was able to replicate this behavior in REPL using the following code:

<br />
<br />
<TelerikDropDownList
    Data = "@People"
    @bind-Value="@SelectedUser"
    TextField="LastFirst"
    ValueField="Id"
    Width="400px"
/>
<br />
<br />
<TelerikGrid
    Data="@Assets"
    EditMode="GridEditMode.Inline"
    Width="800px"
    OnUpdate="@Update"
    >
   <GridColumns>
       <GridColumn Field="@nameof(Asset.AssetId)" Title="ID" Width="50px"/>
       <GridColumn Field="@nameof(Asset.BarCode)" Title="BarCode" Width="125px"/>
       <GridColumn Field="@nameof(Asset.UserId)" Title="User" Width="125px">
           <Template>
                @{
                    CurrentAsset = (Asset)context;
                    Person? p = People.FirstOrDefault<Person>(x => x.Id == CurrentAsset.UserId);
                    if(p != null)
                    {                        
                        <span>@p.LastFirst</span>
                    }
               }
           </Template>
           <EditorTemplate>
               @{
                    CurrentAsset = (Asset)context;
                   <TelerikDropDownList
                        Data = "@People"
                        @bind-Value="@CurrentAsset.UserId"
                        TextField="LastFirst"
                        ValueField="Id"
                   />

               }
           </EditorTemplate>
       </GridColumn>
        <GridCommandColumn Width="100px" Locked="true">
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true"></GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit"></GridCommandButton>
            <GridCommandButton Command="Delete" Icon="delete"></GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true"></GridCommandButton>
        </GridCommandColumn>        
   </GridColumns>
</TelerikGrid>

<br />

@code {
    public List<Person> People = new();
    public List<Asset> Assets = new();
    int SelectedUser = 0;
    Asset CurrentAsset = new();

    protected override void OnInitialized()
    {
        LoadData();
        base.OnInitialized();
    }

    public void LoadData()
    {
        People.Add(new Person(1, "Brent", "Tuominen"));
        People.Add(new Person(2, "Tina", "Tuominen"));
        People.Add(new Person(3, "Casey", "Tuominen"));
        People.Add(new Person(4, "Ryan", "Tuominen"));
        People.Add(new Person(5, "Alex", "Tuominen"));

        Assets.Add(new Asset(1, "BC001"));
        Assets.Add(new Asset(2, "BC002"));
        Assets.Add(new Asset(3, "BC003"));
        Assets.Add(new Asset(4, "BC004"));
        Assets.Add(new Asset(5, "BC005"));
    }

    public void Update(GridCommandEventArgs args)
    {
        Asset a = (Asset)args.Item;
        Asset? asst = Assets.FirstOrDefault(x => x.AssetId == a.AssetId);

        if(asst != null)
        {
            asst.BarCode = a.BarCode;
            asst.UserId = a.UserId; 
        }
        StateHasChanged();
    }

    public class Asset
    {
        public Asset()
        {
            
        }
        public Asset(int assetId, string barcode)
        {
            AssetId = assetId;
            BarCode = barcode;
        }
        public int AssetId{ get; set; }
        public string BarCode { get; set; } = string.Empty;
        public int? UserId{ get; set; }
    }

    public class Person
    {
        public Person(int id, string fName, string lName)
        {
            Id = id;
            FirstName = fName;
            LastName = lName;
        }
        public int Id{ get; set; }
        public string FirstName { get; set; } = string.Empty;
        public string LastName { get; set; } = string.Empty;
        public string LastFirst
        {
            get
            {
                return LastName + ", " + FirstName;
            }
        }
        public string FullName
        {
            get
            {
                return FirstName + " " + LastName;
            }
        }
    }
}

Greetings,

I am curious if you intend on offering any means of control for the height of an appointment cell within the scheduler. For us it is in the Timeline view with Resources. I have downloaded the source code and implemented the functionality myself and am willing to share my changes. It ultimately performs three functions:

1. Creates a new parameter on the SchedulerTimeViewBase.cs so that it is end user facing.

2. Alters the code in the ContentTableBase.cs to assign the AllDayAppointmentOuterHeight property with this new parameter's value (plus 1).

3. Alters the AppointmentRendererBase.cs to assign the AllDayAppointmentHeight property with this new parameter's value.

Additional changes are necessary to the Models and Interfaces.

We have used the JS version of this for several years and need the additional real estate on the scheduler. This is the only means that I could figure to alter the height as the position of the cells and resource rows are computed on the back end. Any alterations using a CSS class during OnItemRender will produce cells that overlap each other and/or overflow to subsequent rows.

https://blazorrepl.telerik.com/cmYxOvaC33mi4Krl37?_ga=2.263757508.951488700.1649659216-525147323.1642084966

With an item selected, I want to reset the drop down list to the state it has when the page loads, i.e. populated with nothing selected.
Setting the backing filed to zero does not work. I have read Clear the selection, I know it works if you have a default text,
I dont't want to have a default text.

As you can see in the repl, there's some more experiments, since I thought I could maybe clear the content and re-populate
the list to reset it.
Setting the data source to null does nothing?!?!
Clearing the data source removes the items in it, but keeps the selected value!?!?

I've seen answers to this question that suggests using CSS to achieve this, but that's just stupid and shouldn't be necessary.

Finally, we have the hack solution, which is totally crazy but seems to work.
I leave it here for others to see, since it seems a lot of people also have this problem.

Please fix this.