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

Ideas that would serve me:

• spinners like those of the time pickers
• simple dropdowns like here
• ux like here

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

---

-----

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.

-----

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

}

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

---

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.

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

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

---

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%" />

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?

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


}