Unplanned
Last Updated: 19 Jul 2024 10:07 by n/a
Created by: n/a
Comments: 0
Category: Scheduler
Type: Feature Request
1

The Timeline view currently does not provide the "Show business hours" option as in the other views.

Please add that for the Timeline view similar to the jQuery version of the component.

===

ADMIN EDIT

===

For the time being, you can achieve this functionality with a custom approach by programmatically setting the StartTime and EndTime of the view to equal the WorkDayStart and WorkDayEnd.

Here is a basic example: https://blazorrepl.telerik.com/QyEhvjbO07j1ZvID42.

Unplanned
Last Updated: 19 Jul 2024 08:23 by Liviu Ciocoiu

The problematic behavior appears in this specific scenario:

  • AllowCustom="true".
  • The input partially matches an item in the list.
  • The user presses Enter

In this case, the custom typed value is lost and the component value is the first item in the list matching the input. Thus, the user cannot set their desired custom value.

Reproduction with steps listed inside: https://blazorrepl.telerik.com/GokVlXEW12KGZ36F15.

===

ADMIN EDIT

===

A possible option for the time being:

  • Enable filtering.
  • Use the OnRead event to get the input value from the filter descriptors and save it.
  • In the OnChange event that is triggered on Enter press, set the saved input value to the component.

Here is a basic sample: https://blazorrepl.telerik.com/wourlNOC51FRcNAX54.

Unplanned
Last Updated: 19 Jul 2024 08:18 by ADMIN

If LoadGroupsOnDemand="false", I am able to programmatically expand the groups through the state. However, this is not possible when loading group data on demand.

Please allow programmatically expanding the groups when LoadGroupsOnDemand="true". This should go together with an event (OnStateChanged?) that will fire when LOD groups are expanded or collapsed.

Unplanned
Last Updated: 18 Jul 2024 19:48 by Matt
Hi,

The issue is that the tooltip position doesn't change when the user move the cursor between two elements with small proximity. 

The best example is Telerik's own Tooltip demo Blazor Components Demos and Examples - Telerik UI for Blazor. More often than not when moving between Karachi and Mumbay/Bombay tha tooltip doesn't shift position even though the text changes.
Unplanned
Last Updated: 18 Jul 2024 17:19 by shah

Subject says it all.  I've got a grid that contains multiple NumericTextBoxes....  my users need to be able to copy and paste price values that contain formatting...commas, periods, dollar signs.

Can there be an option to automatically strip off / ignore formatting values in pasted data?

Unplanned
Last Updated: 18 Jul 2024 14:24 by Alexander
Created by: Alexander
Comments: 0
Category: Window
Type: Feature Request
1

We are using a "TelerikWindow" that does neither contain the "WindowAction" "Minimize" nor "Maximize", since we do not want the user to do so. It is still possible, however, to minimize / maximize the window using the keyboard shortcuts described here: https://demos.telerik.com/blazor-ui/window/keyboard-navigation

 

We came up with a hack to work around the current behaivor:

https://blazorrepl.telerik.com/QSOVullp326u6uJW12

Unplanned
Last Updated: 18 Jul 2024 13:36 by ADMIN
Created by: Nitesh
Comments: 0
Category: Grid
Type: Feature Request
40

The feature request is to be able to customize the GridCsvExportOptions and GridExcelExportOptions from the API methods -

  • ExportToExcelAsync
  • ExportToCsvAsync
  • SaveAsExcelFileAsync
  • SaveAsCsvFileAsync

It will be useful to be able to customize the columns and data to be exported.

===

Telerik edit:

A possible workaround is to click the built-in Grid export buttons with JavaScript. With this approach, you will be able to use the built-in export options and events. Here is a REPL example.

Unplanned
Last Updated: 18 Jul 2024 12:22 by ADMIN
Created by: Janick
Comments: 2
Category: Scheduler
Type: Feature Request
1
When the Scheduler works with a large dataset the rendering can get laggy. I need to use a rendering optimization feature such as the virtual scrolling in the Grid. 
Unplanned
Last Updated: 18 Jul 2024 11:39 by Stephen
Created by: Stephen
Comments: 0
Category: Carousel
Type: Feature Request
1

Currently, when the Carousel Data only contains one image, the navigation arrow buttons (previous and next) are still visible but they have no purpose in this scenario.

Please hide the arrows when the component has only one image.

===

ADMIN EDIT

===

An option to achieve this behavior in the meantime is to toggle the Arrows property of the Carousel based on the Data count: https://blazorrepl.telerik.com/GSEVvCus37r70wGx00.

Unplanned
Last Updated: 18 Jul 2024 10:57 by VladimirM
Created by: VladimirM
Comments: 3
Category: DropDownList
Type: Feature Request
8

Hello,

would it be possible to add "OnFocus" event to DropDownList as there is already "OnBlur" event?

Thanks

Unplanned
Last Updated: 18 Jul 2024 08:51 by cvuas

The Grid automatically scrolls to top when adding a new item in inline or incell edit mode. However, when the Grid has locked (frozen) columns, this scrolling doesn't occur.

Here is a test page with a JavaScript workaround in the OnAdd event:

@using System.ComponentModel.DataAnnotations

@inject IJSRuntime js

<label><TelerikCheckBox @bind-Value="@EnableScrollWorkaround" /> Enable Workaround</label>

<TelerikGrid Data="@GridData"
             EditMode="@GridEditMode.Inline"
             OnAdd="@OnGridAdd"
             OnUpdate="@OnGridUpdate"
             OnCreate="@OnGridCreate"
             Width="700px"
             Height="400px"
             Class="grid-class">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add">Add Item</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" Width="200px" Locked="true" />
        <GridColumn Field="@nameof(Product.Price)" Width="200px" />
        <GridColumn Field="@nameof(Product.Quantity)" Width="200px" />
        <GridCommandColumn Width="200px" Locked="true">
            <GridCommandButton Command="Edit">Edit</GridCommandButton>
            <GridCommandButton Command="Save" ShowInEdit="true">Save</GridCommandButton>
            <GridCommandButton Command="Cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

<script suppress-error="BL9992">

    function scrollGridToTop() {
        var gridContentArea = document.querySelector(".grid-class .k-grid-content");
        if (gridContentArea) {
            gridContentArea.scrollTop = 0;
        }
    }

</script>

@code {
    private bool EnableScrollWorkaround { get; set; } = true;

    private List<Product> GridData { get; set; } = new();

    private int LastId { get; set; }

    private async Task OnGridAdd(GridCommandEventArgs args)
    {
        if (EnableScrollWorkaround)
        {
            await js.InvokeVoidAsync("scrollGridToTop");
        }
    }

    private void OnGridUpdate(GridCommandEventArgs args)
    {
        var updatedItem = (Product)args.Item;
        var originalItemIndex = GridData.FindIndex(i => i.Id == updatedItem.Id);

        if (originalItemIndex != -1)
        {
            GridData[originalItemIndex] = updatedItem;
        }
    }

    private void OnGridCreate(GridCommandEventArgs args)
    {
        var createdItem = (Product)args.Item;

        createdItem.Id = ++LastId;

        GridData.Insert(0, createdItem);
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 30; i++)
        {
            GridData.Add(new Product()
            {
                Id = ++LastId,
                Name = $"Product {LastId}",
                Quantity = (short)Random.Shared.Next(0, 1000),
                StartDate = DateTime.Now.AddDays(-Random.Shared.Next(60, 1000)),
                IsActive = LastId % 4 > 0
            });
        }
    }

    public class Product
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Quantity { get; set; }
        public DateTime StartDate { get; set; }
        public bool IsActive { get; set; }
    }
}

Unplanned
Last Updated: 18 Jul 2024 08:09 by Rahul
The arguments within the OnDrop event are incorrectly calculated when a hierarchical grid row is expanded. This is likely because the expanded detail zone is being mistaken for a data row by the drag-and-drop algorithm.
Unplanned
Last Updated: 17 Jul 2024 21:32 by Adam
I want to take a row and move the mouse while holding the row at the bottom of the screen and it scrolls.  Is this feature available?  This is built in for an HTML grid.
Unplanned
Last Updated: 17 Jul 2024 08:17 by ADMIN

The "Bold" button in the code snippet below remains visible despite the fact that it's Visible property is false

<TelerikToolBar>

    <ToolBarButtonGroup>
        <ToolBarButton Icon="@SvgIcon.Bold" Visible="false">Bold</ToolBarButton>
        <ToolBarButton Icon="@SvgIcon.Italic">Italic</ToolBarButton>
        <ToolBarButton Icon="@SvgIcon.Underline">Underline</ToolBarButton>
    </ToolBarButtonGroup>
</TelerikToolBar>

 

Unplanned
Last Updated: 17 Jul 2024 07:01 by ADMIN
Can I change the content of the Delete popup?
Unplanned
Last Updated: 16 Jul 2024 11:59 by ADMIN
Created by: Dan
Comments: 7
Category: Dialog
Type: Feature Request
13
Pressing the Enter key should trigger the Ok button in the Prompt Dialog
Unplanned
Last Updated: 16 Jul 2024 11:18 by Lajos

In a navigable Grid with incell edit, if a column has Editable=false the tabbing behavior is as follows: while the user is editing the previous editable cell pressing tab results in skipping the non-editable cell and moving the focus to the next editable cell to open it for edit.

However, the behavior is different when cancelling the editing through the OnEdit event. In this case, while the user is editing the previous editable cell pressing tab results in exiting the edit and keeping the focus to the cell. Subsequent tab press moves to focus to the pager.

Reproduction: https://blazorrepl.telerik.com/mykLFEFJ14mlqei429.

===

ADMIN EDIT

===

A possible option for the time being is to cancel the edit as shown in the example above but also force the Grid to enter edit of the next editable cell. You can do that through the State: Enter and Exit Grid Edit Mode Programmatically.

Here is a basic example, you may adjust it as needed to fit your exact requirements: https://blazorrepl.telerik.com/mSuLPAFP05HRs7B555.

Unplanned
Last Updated: 15 Jul 2024 13:39 by René
The parameter is available for TelerikNumericTextBox only but it would be helpful for text-inputs as well.
Unplanned
Last Updated: 15 Jul 2024 11:38 by Alexander

Cases:

  • I am using the Template to control the rendering of the Drawer. When I place an <a> tag and focus it, I cannot use the Enter key to navigate to the desired link. The component traps the onkeypress event, which it should not.
  • When I place a TreeView inside the Drawer Template and focus it, the keyboard navigation does not work because the Drawer traps the HTML events like onkeydown.

<Admin>

Workaround for the first case:

<script suppress-error="BL9992">
    window.navigateToHref = (ev) => {
        if (ev.key === "Enter") {
            location.href = ev.target.href
        }
    };
</script>

@* This example shows how to create header and footer for the Drawer and select an item manually. *@
<TelerikDrawer @bind-Expanded="@DrawerExpanded"
               Data="@Data"
               MiniMode="true"
               Mode="@DrawerMode.Push"
               @bind-SelectedItem="@SelectedItem"
               @ref="@DrawerRef">
    <Template>
        @* the header *@
        <div>
            <TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())" Icon="@FontIcon.Menu" />
            @if (DrawerExpanded)
            {
                <div class="text-info" style="border-bottom:solid; font-weight: bold; margin-bottom: 3em; white-space:nowrap">
                    <a href="https://google.com" onkeydown="navigateToHref(event)">
                        My Custom Navigation to Google
                    </a>
                </div>
            }
            else
            {
                <div class="text-info" style="border-bottom:solid; font-weight: bold;">
                    Nav
                </div>
            }
        </div>

        @* custom items rendering and item selection *@

        <div class="k-drawer-items">
            <ul>
                @if (SelectedItem != null && DrawerExpanded)
                {
                    <li class="k-drawer-item" style="white-space:nowrap">
                        <div>
                            <p><strong>@SelectedItem.Text</strong></p>
                            <p>@SelectedItem.Description</p>
                        </div>
                    </li>
                }

                @foreach (var item in Data)
                {
                    @* Use onclick to handle manual item selection *@
                    <li @onclick="@(() => SelectedItem = item)"
                    class="k-drawer-item @GetSelectedItemClass(item)" style="white-space:nowrap">
                        <TelerikFontIcon Icon="@item.Icon"></TelerikFontIcon>
                        @if (DrawerExpanded)
                        {
                            <div>
                                <div>@item.Text</div>
                            </div>
                        }
                    </li>
                }
            </ul>
        </div>

        @* the footer *@
        @if (DrawerExpanded)
        {
            <div style="text-align: center; margin-top: 3em; padding-top: 2em; border-top: 2px solid black; white-space:nowrap">
                <img src="user-avatar.png" alt="my avatar" style="border-radius: 50%; width: 50px; height: 50px;" />
                <br /><br />
                <TelerikButton Icon="@FontIcon.Logout" ThemeColor="primary">Log Out</TelerikButton>
            </div>
        }
    </Template>
    <DrawerContent>
        <div class="m-5">Content for @SelectedItem?.Text - @SelectedItem?.Description</div>
    </DrawerContent>
</TelerikDrawer>


@code {
    public TelerikDrawer<DrawerItem> DrawerRef { get; set; }
    public DrawerItem SelectedItem { get; set; }
    public bool DrawerExpanded { get; set; } = true;
    public IEnumerable<DrawerItem> Data { get; set; } = new List<DrawerItem>
    {
        new DrawerItem {Text = "Shopping Cart", Icon = FontIcon.Cart, Description = "Items in shopping cart"},
        new DrawerItem {Text = "Settings", Icon = FontIcon.Gear, Description = "My profile settings"},
        new DrawerItem {Text = "Notifications", Icon = FontIcon.ExclamationCircle, Description = "My profile notifications"},
        new DrawerItem {Text = "Calendar", Icon = FontIcon.Calendar, Description = "My events"},
    };

    public string GetSelectedItemClass(DrawerItem item)
    {
        if (SelectedItem == null) return string.Empty;
        return SelectedItem.Text.ToLowerInvariant().Equals(item.Text.ToLowerInvariant()) ? "text-info" : "";
    }

    public class DrawerItem
    {
        public string Text { get; set; }
        public FontIcon? Icon { get; set; }
        public string Description { get; set; }
    }
}

</Admin>

Unplanned
Last Updated: 15 Jul 2024 07:40 by Hang
Created by: Hang
Comments: 0
Category: FileManager
Type: Bug Report
1

When the user renames a folder, the TreeView foes not refresh to display the new folder name.

The test page below is based on the FileManager Events example.

A possible workaround is to recreate the FileManager in the OnUpdate handler:

@using System.IO

@if (ShouldRenderFileManager)
{
    <TelerikFileManager @ref="@FileManagerRef"
                        Data="@Files"
                        @bind-Path="@DirectoryPath"
                        View="@CurrentView"
                        ViewChanged="@OnViewChanged"
                        Height="400px"
                        OnCreate="@OnCreateHandler"
                        OnUpdate="@OnUpdateHandler"
                        OnDelete="@OnDeleteHandler"
                        OnModelInit="@OnModelInitHandler"
                        OnDownload="@OnDownloadHandler"
                        SelectedItems="@SelectedItems"
                        SelectedItemsChanged="@((IEnumerable<FlatFileEntry> selectedFiles) => OnSelect(selectedFiles))">
    </TelerikFileManager>
}

@foreach (var item in Files)
{
    <div>@item.Name</div>
}

@code {
    private bool ShouldRenderFileManager { get; set; } = true;

    private TelerikFileManager<FlatFileEntry>? FileManagerRef { get; set; }
    private List<FlatFileEntry> Files { get; set; } = new();

    private string DirectoryPath { get; set; } = string.Empty;

    private IEnumerable<FlatFileEntry> SelectedItems { get; set; } = new List<FlatFileEntry>();

    private FileManagerViewType CurrentView { get; set; }

    private void OnViewChanged(FileManagerViewType newView)
    {
        CurrentView = newView;
    }

    private async Task OnCreateHandler(FileManagerCreateEventArgs args)
    {
        var newFolder = args.Item as FlatFileEntry;

        var parent = GetParent(newFolder, DirectoryPath);

        newFolder.Id = "20";
        newFolder.ParentId = parent.Id;
        newFolder.Name = "New folder";
        newFolder.IsDirectory = true;
        newFolder.HasDirectories = false;
        newFolder.DateCreated = DateTime.Now;
        newFolder.DateCreatedUtc = DateTime.Now;
        newFolder.DateModified = DateTime.Now;
        newFolder.DateModifiedUtc = DateTime.Now;
        newFolder.Path = Path.Combine(DirectoryPath, newFolder.Name);
        newFolder.Extension = null;

        var parentDirectory = GetDirectory(DirectoryPath) ?? GetParent(newFolder, DirectoryPath);

        if (parentDirectory != null)
        {
            // Simulate add to the file system.
            newFolder.ParentId = parentDirectory.Id;
            Files.Add(newFolder);
            parentDirectory.HasDirectories = Files.Count(x => x.ParentId == parentDirectory.Id) > 0;
        }
        else
        {
            // Create a folder in the root directory.
            Files.Add(newFolder);
        }

        RefreshData();
    }

    private FlatFileEntry GetDirectory(string path)
    {
        var directory = Files.FirstOrDefault(x => x.IsDirectory && x.Path == path);

        return directory;
    }

    private FlatFileEntry GetParent(FlatFileEntry currItem, string currDirectory)
    {
        var parentItem = Files
            .FirstOrDefault(x => x.IsDirectory && x.Path == currDirectory);

        return parentItem;
    }


    private async Task OnUpdateHandler(FileManagerUpdateEventArgs args)
    {
        var item = args.Item as FlatFileEntry;

        if (item.IsDirectory)
        {
            var name = item.Name ?? string.Empty;

            var updatedItem = Files.FirstOrDefault(x => x.Id == item.Id);
            updatedItem.Name = item.Name;
            updatedItem.Path = Path.Combine(DirectoryPath, name);

            ShouldRenderFileManager = false;
            await Task.Delay(1);
            ShouldRenderFileManager = true;
        }
        else
        {
            // The name property is updated, but also update the path to the file.
            var name = item.Name ?? string.Empty;
            var extension = item.Extension ?? string.Empty;
            var fullName = extension.Length > 0 && name.EndsWith(extension) ?
                name : $"{name}{extension}";

            var updatedItem = Files.FirstOrDefault(x => x.Id == item.Id);

            updatedItem.Name = item.Name;
            updatedItem.Path = Path.Combine(DirectoryPath, fullName);
            Console.WriteLine(updatedItem.Path);
        }
    }

    private async Task OnDownloadHandler(FileManagerDownloadEventArgs args)
    {
        var selectedItem = args.Item as FlatFileEntry;

        // The Filemanager does not have the actual file.
        // Obtain the file contents, based on args.Item, and set the event arguments:

        //args.Stream = the file stream of the actual selected file;
        //args.MimeType = the MIME type of the actual file;
        //args.FileName = the file name that the browser will receive (optional);

        FlatFileEntry actualFile = (FlatFileEntry)args.Item;

        string dummyFileContent = $"This file is a dummy version of {actualFile.Name}. It was downloaded with the Telerik Blazor FileManager.";
        byte[] dummyFileBuffer = System.Text.Encoding.UTF8.GetBytes(dummyFileContent);

        args.Stream = new MemoryStream(dummyFileBuffer);
        args.MimeType = "text/plain";
        args.FileName = $"filemanager-{actualFile.Name}-{DateTime.Now.ToString("yyyy-MM-dd-HH-mm-ss")}.txt";
    }

    private async Task OnDeleteHandler(FileManagerDeleteEventArgs args)
    {
        var currItem = args.Item as FlatFileEntry;

        var itemToDelete = Files.FirstOrDefault(x => x.Id == currItem.Id);

        Files.Remove(itemToDelete);

        RefreshData();
    }

    private FlatFileEntry OnModelInitHandler()
    {
        var item = new FlatFileEntry();
        item.Name = $"New folder";
        item.Size = 0;
        item.Path = Path.Combine(DirectoryPath, item.Name);
        item.IsDirectory = true;
        item.HasDirectories = false;
        item.DateCreated = DateTime.Now;
        item.DateCreatedUtc = DateTime.Now;
        item.DateModified = DateTime.Now;
        item.DateModifiedUtc = DateTime.Now;

        return item;
    }

    private void OnSelect(IEnumerable<FlatFileEntry> selectedFiles)
    {
        // Update the view model.
        SelectedItems = selectedFiles;
    }

    private void RefreshData()
    {
        Files = new List<FlatFileEntry>(Files);
    }

    protected override async Task OnInitializedAsync()
    {
        Files = await GetFlatFileEntries();
    }

    public class FlatFileEntry
    {
        public string Id { get; set; }
        public string ParentId { get; set; }
        public string Name { get; set; }
        public long Size { get; set; }
        public string Path { get; set; }
        public string Extension { get; set; }
        public bool IsDirectory { get; set; }
        public bool HasDirectories { get; set; }
        public DateTime DateCreated { get; set; }
        public DateTime DateCreatedUtc { get; set; }
        public DateTime DateModified { get; set; }
        public DateTime DateModifiedUtc { get; set; }
    }

    // the next lines are hardcoded data generation so you can explore the FileManager freely

    private async Task<List<FlatFileEntry>> GetFlatFileEntries()
    {
        var workFiles = new FlatFileEntry()
        {
            Id = "1",
            ParentId = null,
            Name = "Work Files",
            IsDirectory = true,
            HasDirectories = true,
            DateCreated = new DateTime(2022, 1, 2),
            DateCreatedUtc = new DateTime(2022, 1, 2),
            DateModified = new DateTime(2022, 2, 3),
            DateModifiedUtc = new DateTime(2022, 2, 3),
            Path = Path.Combine("files"),
            Size = 3 * 1024 * 1024
        };

        var Documents = new FlatFileEntry()
        {
            Id = "2",
            ParentId = workFiles.Id,
            Name = "Documents",
            IsDirectory = true,
            HasDirectories = false,
            DateCreated = new DateTime(2022, 1, 2),
            DateCreatedUtc = new DateTime(2022, 1, 2),
            DateModified = new DateTime(2022, 2, 3),
            DateModifiedUtc = new DateTime(2022, 2, 3),
            Path = Path.Combine(workFiles.Path, "documents"),
            Size = 1024 * 1024
        };

        var Images = new FlatFileEntry()
        {
            Id = "3",
            ParentId = workFiles.Id,
            Name = "Images",
            IsDirectory = true,
            HasDirectories = false,
            DateCreated = new DateTime(2022, 1, 2),
            DateCreatedUtc = new DateTime(2022, 1, 2),
            DateModified = new DateTime(2022, 2, 3),
            DateModifiedUtc = new DateTime(2022, 2, 3),
            Path = Path.Combine(workFiles.Path, "images"),
            Size = 2 * 1024 * 1024
        };

        var files = new List<FlatFileEntry>()
{
            workFiles,

            Documents,

            Images
        };

        return files;
    }
}

1 2 3 4 5 6