Completed
Last Updated: 27 Jan 2021 17:32 by ADMIN
Created by: De
Comments: 1
Category: UI for Blazor
Type: Feature Request
0
Is it possible to add a header row for an entire Blazor Grid?  I don't mean a column row, group row, or a command row, I mean a header row for the entire grid.  E.g. I want a row at the top of the grid not related to my model, but which can contain things like instructions, etc.
Unplanned
Last Updated: 27 Jan 2021 13:28 by James
Created by: Kelly
Comments: 4
Category: Charts
Type: Feature Request
10
At the moment it is always white. I often want it transparent so it can blend better with the rest of the content (e.g., it should be able to the color of the grid row it is embedded in).
Unplanned
Last Updated: 25 Jan 2021 15:45 by ADMIN
Created by: Douglas
Comments: 1
Category: Notification
Type: Feature Request
1

I have utilized the Notification component in a centralized portion of my mainlayout and created a service so that all notifications flow through control so I don't have to repeat a TelerikNotification  component on every content page.    It is working great except..  there is no API control over the notifications once they are created.

What I would like to do is have all the open notifications cleared in response to a location change event on the NavigationManager.  I can accomplish the event but cant clear the notifications.

 

Thx

Pending Review
Last Updated: 25 Jan 2021 15:43 by David
Created by: David
Comments: 0
Category: TimePicker
Type: Feature Request
1
It might not always be obvious for desktop users that they can drag the spinners to set the desired value and having up/down buttons above/below the spinner might help them.
Pending Review
Last Updated: 25 Jan 2021 15:41 by David
Created by: David
Comments: 0
Category: DatePicker
Type: Feature Request
2

Ideas that would serve me:

 

Unplanned
Last Updated: 25 Jan 2021 11:22 by ADMIN
Created by: Kris
Comments: 0
Category: UI for Blazor
Type: Feature Request
2
I would like to be able to drag and drop (to sort) items in my listview, in a fashion similar to this feature planned for the grid. Libraries like Kendo Sortable and Sortable.JS would be nice, but for blazor.
Planned
Last Updated: 25 Jan 2021 11:22 by ADMIN
Scheduled for 2.23.0
Created by: Wei
Comments: 2
Category: Grid
Type: Feature Request
21
there is a feature we want to implement in grid for a row to be dragged and dropped onto another row. is this something we can do with blazor grid?

drag one row or multiple row over another row and have the drop event exposed so we can handle it?
Unplanned
Last Updated: 25 Jan 2021 10:09 by ADMIN
Created by: Matthias
Comments: 2
Category: Notification
Type: Feature Request
4
I would like to have a method for the reference of the component which will allow me to close the notifications, for example - Close().
Unplanned
Last Updated: 25 Jan 2021 10:02 by ADMIN
Created by: Graham
Comments: 2
Category: UI for Blazor
Type: Feature Request
16

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

---

Unplanned
Last Updated: 25 Jan 2021 09:52 by ADMIN

-----

ADMIN EDIT

At the moment, the splitter does not re-render when these events occur in order to improve performance. Thus, changing parameters of child components in those events does not have effect - it happens with "one event delay" because they do not re-render immediately.

For the majority of cases, responsive design (such as width and height set to 100%) will let the browser redraw the content as necessary.

-----

our usage of splitter requires a child conponent adjust its height based on the resized pane from splitter, using Parameter to pass height works with UI element binding (see the TelerikTextbox), no need to trigger StateHasChanged. 

but events on Resize/Expand/Collapse are handled to set the Height, it only update on UI of the parent page, but does not update to child. even with calling child's StateHasChanges after it is set. 

<TelerikTextBox @bind-Value="@height"></TelerikTextBox>

<div style="margin: 0; padding: 0; border-width: 0; height: 90vh;" >

    <TelerikSplitter Orientation="@SplitterOrientation.Vertical" Height="100%" Width="100%" OnResize="OnSplitterResized" OnCollapse="OnSplitterCollapsed" OnExpand="OnSplitterExpanded">
        <SplitterPanes>
            <SplitterPane Class="k-pane-flex" Min="0px" Max="600px" Collapsible="true">
                <ChildDiv Height="300px"></ChildDiv>
            </SplitterPane>
            <SplitterPane Class="k-pane-flex" Size="300px" Min="0px" Max="600px" Collapsible="true">
               <ChildDiv @ref="childDiv" Height="@height"></ChildDiv>
            </SplitterPane>
        </SplitterPanes>
    </TelerikSplitter>
</div>

@code {
    private string height = "300px";
    private ChildDiv childDiv;

    public async Task OnSplitterResized(SplitterResizeEventArgs args)
    {
        height = args.Size;

        await childDiv.Repaint();
    }

    public async Task OnSplitterCollapsed(SplitterCollapseEventArgs args)
    {
        if(args.Index == 0)
        {
            height = "600px";
        }

        await childDiv.Repaint();
    }

    public async Task OnSplitterExpanded(SplitterExpandEventArgs args)
    {
        if (args.Index == 1)
        {
            height = "300px";
        }

        await childDiv.Repaint();
    }
}



childDiv.razor:

<div style="border:solid; height: @Height">
    Child div, Height: <span>@Height</span>
</div>

@code {
    [Parameter]
    public string Height { get; set; }

    public async Task Repaint()
    {
       await InvokeAsync(StateHasChanged);
    }

}

 
Unplanned
Last Updated: 25 Jan 2021 09:41 by ADMIN

I am running into an issue with what I believe is the default behaviour of the TelerikWindow, namely capturing @onkeydown - events and closing the window when the user presses escape.

Is there any way to disable this default behaviour of the dialog / overwrite its onkeydown event handler?

---
ADMIN EDIT

Include the ability to :

  • Disable keyboard shortcuts altogether
  • Use custom keyboard shortcuts
  • Use a combination of several keys (e.g. Shift + ESC)
  • Define several keyboard shortcuts at the same time for the same action

If you have any preferences how to expose this functionality please leave a comment. Any feedback on how to handle this on a Mac for the Ctrl and CMD keys is welcome (e.g. should the shortcut for the Ctrl key handle the CMD key for the Mac automatically).

In the meantime you could use the following snippet as a workaround to disable the Esc key:

@result

<TelerikButton OnClick="@ToggleWindow">Toggle the Window</TelerikButton>

<TelerikWindow Visible="@isVisible" VisibleChanged="@VisibleChangedHandler">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        This is my window <strong>popup</strong> content.
    </WindowContent>
    <WindowActions>
        <WindowAction Name="MyCustomClose" Icon="@IconName.Close" OnClick="@MyCustomCloseHandler" />
    </WindowActions>
</TelerikWindow>

@code {
    bool isVisible { get; set; }
    string result { get; set; }

    void VisibleChangedHandler(bool currVisible)
    {
        // if you don't do this, the window won't close because of the user action
        // so if you don't update the view-model here, the window will not close when Esc is pressed

        //isVisible = currVisible;

        result = $"the window is now visible: {isVisible}";

        Console.WriteLine($"Closing because of Esc key");
    }

    void MyCustomCloseHandler()
    {
        //will fire on click only
        isVisible = false;
        //since the built-in window UI didn't invoke this change, the event will not fire
    }

    public void ToggleWindow()
    {
        isVisible = !isVisible;

        result = $"the window is now visible: {isVisible}";
    }
}

---

Unplanned
Last Updated: 25 Jan 2021 08:26 by ADMIN
Created by: Jürgen
Comments: 0
Category: Grid
Type: Feature Request
1
I would like to be able to reposition the Grid Toolbar, for example, to move it to the bottom of the Grid. 
Unplanned
Last Updated: 23 Jan 2021 10:03 by ADMIN
Created by: Darryl
Comments: 2
Category: UI for Blazor
Type: Feature Request
22

I know that I can bind the PageSize property to a variable, but then I have to build a dropdown with the available page sizes in a separate control. Are there plans to integrate a page size selection into the existing paging controls? Perhaps a PageSizes property that takes an array of integers.

Example:

PageSizes = "[10, 25, 50, 100]"

These would then be converted into a dropdown integrated into the existing paging controls on the grid.

Duplicated
Last Updated: 22 Jan 2021 20:42 by ADMIN
Created by: Henk
Comments: 1
Category: UI for Blazor
Type: Feature Request
0

Wè would like to have the Fluent UI style available for Blazor. We are using the Telerik UI controls in a large project werd the UI has to be very similar to the one of Microsoft D365 Customer Service.

Regards, Henk

Unplanned
Last Updated: 22 Jan 2021 13:29 by ADMIN
Created by: Alberto
Comments: 5
Category: Menu
Type: Feature Request
11

At the moment, when you click a menu item it does not hide.

A method can be exposed to hide the expanded items that can be invoked from the OnClick handler.

---

ADMIN EDIT

Here is a potential workaround - when the menu item is clicked, we use a little bit of JS to go over the menu items at the root and make the browser think that the user moved the mouse away from them which is the signal for the menu dropdowns to hide. Do test this carefully before using in production, though.

@inject IJSRuntime _js

@* Move this script together with other scripts in the project, it is here to make the snippet shorter *@
<script suppress-error="BL9992">
    function closeMenu() {
        setTimeout(function () {
            var mouseLeaveEvent = new Event('mouseleave');
            var rootNodes = document.querySelectorAll("li.k-menu-item");
            rootNodes.forEach(function (elem) { elem.dispatchEvent(mouseLeaveEvent); })
        }, 30);
    }
</script>

<TelerikMenu Data="@MenuItems"
                ItemsField="@nameof(MenuItem.SubSectionList)"
                TextField="@nameof(MenuItem.Section)"
                UrlField="@nameof(MenuItem.Page)"
                OnClick="@((MenuItem item) => OnClickHandler(item))">
</TelerikMenu>

@code {
    public List<MenuItem> MenuItems { get; set; }

    async Task OnClickHandler(MenuItem item)
    {
        await _js.InvokeVoidAsync("closeMenu");
    }



    public class MenuItem
    {
        public string Section { get; set; }
        public string Page { get; set; }
        public List<MenuItem> SubSectionList { get; set; }
    }

    protected override void OnInitialized()
    {
        MenuItems = new List<MenuItem>()
                {

            new MenuItem()
            {
                Section = "fetchdata",
                Page = "fetchdata"

            },
            new MenuItem()
            {
                Section = "counter",
                Page = "counter"
            },

// sample URLs for SPA navigation
new MenuItem()
{
    Section = "Company",
    SubSectionList = new List<MenuItem>()
                        {
        new MenuItem()
        {
            Section = "Overview",
            Page = "fetchdata"
        },
        new MenuItem()
        {
            Section = "Events",
            Page = "fetchdata"
        },
        new MenuItem()
        {
            Section = "Careers",
            Page = "counter"
        }
    }
},
// sample URLs for external navigation
new MenuItem()
{
    Section = "Services",
    SubSectionList = new List<MenuItem>()
                        {
        new MenuItem()
        {
            Section = "Consulting",
            Page = "counter"
        },
        new MenuItem()
        {
            Section = "Education",
            Page = "fetchdata"
        }
    }
},
new MenuItem()
{
    Section = "Contact",
    Page = "counter"
}
};

        base.OnInitialized();
    }
}

---

Unplanned
Last Updated: 21 Jan 2021 14:15 by ADMIN

First, let me thank you for adding the Width in the latest update (2.21). Much appreciated! 

https://www.w3schools.com/tags/tag_textarea.asp

 

We need a fixed height for our text areas to encourage user-interaction and ease the UX for the end user. Having (now a wide), but very narrow description field is not ideal and since it's basically a feature of HTML5, I don't see why it be exempt from Blazor UI.

<TelerikTextArea Rows="10" Width="100%" />

 

 

 

Unplanned
Last Updated: 21 Jan 2021 12:40 by ADMIN
Created by: Datafyer
Comments: 15
Category: UI for Blazor
Type: Feature Request
26

Currently there are 3 application themes: Default, Material, and Bootstrap.
These are nice and helpful however having 3 is quite a bit limiting.

I totally understand that a lot of people will and maybe should create a theme based on their own styles and preferences.
However I honestly think most people probably use a default theme and make small corrections to it in order to suit their needs.

-------

Admin edit: We will be keeping here a list of the suggestions, add your comment which one you would like to see implemented - if it's not on this list, we will add it:

  • Dark (black) theme - you can find a basic sample attached below that uses #363636 for background and #d5d5d5 for text colors (two of the main colors for the Black Material theme we have in Kendo), you can further tweak things in the Theme Builder app
  • Fluent UI - based on the Fluent UI by Microsoft
  • Kendo Themes such as BlueOpal, Silver and Office 365 - you can generate them from the predefined color swatches on the left hand side of the Theme Builder app
  • Theme that uses CSS, not SASS variables so that it can be customized at runtime - at the moment, you can generate the needed themes and switch them at runtime as shown here.

------

 

In WPF there are 20 or so styles.
Why only 3 in Blazor when the web is just as easy to style as WPF?

Unplanned
Last Updated: 20 Jan 2021 12:59 by Giuseppe
Created by: Tyler
Comments: 1
Category: Tooltip
Type: Feature Request
6

I would like to be able to do something like the following - cause the tooltip to close from my code:

<TelerikTooltip TargetSelector="#tooltip1" ShowOn="@TooltipShowEvent.Click" @ref="@TooltipRef">     
            <Template>
                 Content Here
                <button type="button" class="btn btn-primary" @onclick="tipClose">Save</button>                
            </Template>
</TelerikTooltip>

<a href="#" id="tooltip1" class="btn btn-secondary">open</a>

@code{
 Telerik.Blazor.Components.TelerikTooltip TooltipRef { get; set; }

void tipClose()
    {
       // TooltipRef ?
    }


}

Planned
Last Updated: 20 Jan 2021 12:22 by ADMIN
Scheduled for 2.22.0
At the moment it is not allowed, but I would like to freeze a few columns in the 100 columns that I have, and I use column virtualization for.
Unplanned
Last Updated: 20 Jan 2021 09:44 by ADMIN
Created by: Al
Comments: 2
Category: Scheduler
Type: Feature Request
1
I would like to click on a schedule item and be able to open a linked page or item. For instance if the schedule item Title is a File # I would like to be able to click on that item and go to a file # details page. Is that possible? 
1 2 3 4 5 6