Hello,

Please consider a Grid feature that changes the component layout on mobile devices or narrow screens. The idea is to switch the column layout to a card layout or anything similar to this example: https://css-tricks.com/responsive-data-tables/

It is possible to implement a similar behavior with the Telerik Blazor Grid and MediaQuery components, but it requires reusing the column titles in the CSS code: https://blazorrepl.telerik.com/GnYPmHFR176Jg5Yg02

===

Telerik Blazor team: Everyone who is interested in this feature, please vote for it to help us prioritize. Also, share your opinion about which Grid features you strictly need in the "mobile" layout and which ones you are ready to sacrifice. Some features don't make sense in a card / listview layout anyway, but still, the mobile-friendly Grid may require completely different HTML markup and UX, so some features may need to be completely revamped.

I want to use the built-in FileManagerToolBarSortTool but I want to remove the "Date Modified" option from the "Sort BY" menu.

===

ADMIN EDIT

===

For the time being, a possible option is to create a custom tool for sorting. You can use the SplitButton component to simulate the built-in UI. Upon selecting option from the dropdown, you may sort your data collection based on the selected custom sort option. Call the Rebind method to refresh the data after updating it.

We are using Telerik UI for Blazor (V6.2.0) grid. The first 3 columns (Delivery No, Spot Check, Spotcheck Status) of the grid are frozen/locked. While horizontal scrolling the header text gets overlapped. We have used custom CSS to change the header color.

<TelerikGrid @ref="@GridRef" Data="@dashboardData"
             Reorderable="true"
             SortMode="@SortMode.Single"
             Pageable="true"
             FilterMode="GridFilterMode.FilterRow"
             PageSize="10"
             EnableLoaderContainer="true"
             Sortable="true" Context="inboundContext" OnRowRender="@OnRowRenderHandler" Width="1800px" Height="500px">

In the Appearance section of the ContextMenu component documentation on the Progress Design System Kit website (https://www.telerik.com/design-system/docs/components/contextmenu/#size), it is stated that:

The ContextMenu provides the size configuration option that enables you to control how big or small the rendered submenu items in the popup will be.

I’ve observed that this functionality is implemented in at least one library—Kendo UI for Angular (https://www.telerik.com/kendo-angular-ui/components/menus/contextmenu/appearance#size).

Is there a plan to introduce support for the Size parameter in the ContextMenu component of the Telerik UI for Blazor library?

Rebinding the PDF Viewer multiple times leads to an ever increasing memory usage, which can ultimately cause a browser crash.

The issue started with Telerik UI for Blazor version 8.0.0 and does not occur in 7.1.0.

Test Page: https://blazorrepl.telerik.com/QTayOxvQ090qYPsb50

Like https://docs.telerik.com/blazor-ui/components/combobox/custom-value and https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/custom-values/ so the user can input tags on their own without them being in the app data source.

---

ADMIN EDIT

The following sample may be useful in implementing this in the meantime: https://github.com/telerik/blazor-ui/tree/master/multiselect/add-new-item

---

Hello,

I am currently reworking an old webapp with server-side Blazor and Telerik UI for Blazor. I noticed that TelerikDialogs kind of break the rerendering of child components if the TelerikDialog and all of its content are placed inside their own component:

<PageTitle>Home</PageTitle>

<EditWithDialog @ref="EditDialogInside"></EditWithDialog>

Where EditWithDialog is (basically) defined as follows:

<TelerikDialog @ref="Dialog" @bind-Visible="@Visible">
	<DialogTitle>
		Edit ID
	</DialogTitle>
	<DialogContent>
		<div>
			<div>TelerikDialog inside of component</div>
			<TelerikTextBox Value="@AppState.CustomerString" OnChange="@SetID" Width="300px"></TelerikTextBox>
			<TelerikButton OnClick="@GenerateID">Generate ID</TelerikButton>
		</div>
	</DialogContent>
	<DialogButtons>
		<TelerikButton OnClick="@ToggleVisible">Close</TelerikButton>
	</DialogButtons>
</TelerikDialog>

However, if the TelerikDialog is placed on a page and its content is placed inside of its own component, everything works as expected:

<PageTitle>Home</PageTitle>
<TelerikDialog @bind-Visible="@Visible">
	<DialogTitle>
		Edit ID
	</DialogTitle>
	<DialogContent>
		<div>
			<div>TelerikDialog outside of component</div>
			<EditWithoutDialog @ref="EditDialogOutside"></EditWithoutDialog>
		</div>
	</DialogContent>
	<DialogButtons>
		<TelerikButton OnClick="@ToggleEditOutside">Close</TelerikButton>
	</DialogButtons>
</TelerikDialog>

EditWithoutDialog.razor:

<TelerikTextBox Value="@AppState.CustomerString" OnChange="@SetID" Width="300px"></TelerikTextBox>
<TelerikButton OnClick="@GenerateID">Generate ID</TelerikButton>

I am using the state-container approach described here, but the problem persists when using two-way binding via parameters.

In this scenario, putting the dialog directly on the page is not a problem, but with larger applications where there's possibly multiple dialogs and a lot more content on one page, this can become very unwieldy and confusing. Considering Blazors emphasis on making components reusable, this also prevents proper use of a customized dialog component that uses the TelerikDialog as a base.

I have attached a small project that implements both versions on a single page for you to test. I have tested using both Edge and Firefox.

We have forms that starts with single text box input, all other inputs are either hidden or disabled. Based on the value of that input we load additional data from the server, show/enable the rest of the inputs and move the focus to the next unput. We react to the value in that first input either when the Enter key is pressed, or when the input loses focus e.g. tab-out of the input or click/tap on another input. One or the other but never both. This scenario should be handled by the OnChange event. However, the OnChange event fires twice, when the enter key is pressed and again when the text box loses focus. This results in double data retrieval (takes twice the time), screen flicker and creates unpleasant user experience.

The recommended workaround is to add second variable to track if the input actually changed and ignore consequent events for the same value. This has it’s own caveat. If for any reason the user wants to retrieve the related data from server again e.g. he was notified it has changed, then he cannot use the OnChange event anymore because the value hasn’t changed and the event will be ignored. So the user has to change the value twice.

 We found a second workaround, see code below. Blur the text box on enter and handle only the on OnBlur event to process the value. This way we can process the value repeatedly, the user presses enter or tab-out, then focus back on the same input and hit enter or tab-out and repeat as many times as desired.

 We propose OnEnter event to be added to the text box so we don’t have to handle @onkeypress on outer <div>. The <div> events are also not synchronized with the DebounceDelay parameter of the text box. We have to either set the DebounceDelay to 0 or introduce delay in the KeyHandler method. The text box has OnBlur event already but surprisingly there is no OnEnter event.

We also proposed BlurAsync() method that will eliminate the need to create the javascript function and invoke JSRuntime.

 <<< javascript function >>>
function blurInput(inputId) {
    const textField = document.getElementById(inputId);
    if (textField) {
        textField.blur();
    }
}

<<< Blazor >>>
@page "/" 
@inject IJSRuntime JSRuntime

<PageTitle>Home</PageTitle>

<div @onkeydown="@(async (args) => await KeyHandler(args))">
    <TelerikTextBox id="txt1" Width="20rem" Placeholder="Pallet" DebounceDelay="0" @bind-Value="@_textInput" OnBlur="@OnInputBlur" />
</div>
<div>
    <TelerikTextBox @ref="_txtRef" Width="20rem" Placeholder="Pallet" />
</div>

@code
{
    private string? _textInput;
    private TelerikTextBox _txtRef = null!;

    private async Task KeyHandler(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            await JSRuntime.InvokeVoidAsync("blurInput", "txt1");
        }
    }

    private async Task OnInputBlur()
    {
        Console.WriteLine($"Bound variable: {_textInput}");
        await _txtRef.FocusAsync();
    }
}

}

When unpinning a DockManager pane, the unpinned pane always collapses to the left. Need the ability to configure it to collapse to the right or top instead.

In the meantime, a possible alternative to position it to the right is to override the default theme styles with the following CSS approach:

<style>
    .unpin-to-right {
        display: flex;
        flex-direction: row-reverse;
    }
</style>

<TelerikDockManager Height="90vh" Class="unpin-to-right">
    <DockManagerPanes>

        <DockManagerSplitPane Orientation="@DockManagerPaneOrientation.Vertical"
                              Size="40%">
            <Panes>

                <DockManagerContentPane Size="55%" HeaderText="Pane 1.1">
                    <Content>
                        First Content Pane in Split configuration
                    </Content>
                </DockManagerContentPane>

                <DockManagerContentPane HeaderText="Pane 1.2">
                    <Content>
                        Second Content Pane in Split configuration
                    </Content>
                </DockManagerContentPane>

            </Panes>
        </DockManagerSplitPane>

        <DockManagerTabGroupPane>
            <Panes>

                <DockManagerContentPane HeaderText="Tab 2.1">
                    <Content>
                        First Tab Content
                    </Content>
                </DockManagerContentPane>

                <DockManagerContentPane HeaderText="Tab 2.2">
                    <Content>
                        Second Tab Content
                    </Content>
                </DockManagerContentPane>

            </Panes>
        </DockManagerTabGroupPane>
    </DockManagerPanes>

    <DockManagerFloatingPanes>
        <DockManagerSplitPane>
            <Panes>

                <DockManagerContentPane HeaderText="Floating Pane">
                    <Content>
                        Floating Pane Content
                    </Content>
                </DockManagerContentPane>

            </Panes>
        </DockManagerSplitPane>
    </DockManagerFloatingPanes>
</TelerikDockManager>

Example:

<PageTitle>Home</PageTitle>

<div>
    <TelerikTextBox Width="20rem" Placeholder="Pallet" DebounceDelay="1000" @bind-Value="@_textInput" OnChange="@(async (input) => await OnInputChanged(input))" />
</div>
<p>@_textInput</p>


@code {
    private string? _textInput;

    private async Task OnInputChanged(object input)
    {
        Console.WriteLine($"Immediate: function parameter: {input}, bound variable: {_textInput}");
        await Task.Delay(1000);
        Console.WriteLine($"Delayed: function parameter: {input}, bound variable: {_textInput}");
        //Make the OnChange event receive the immediate value when the DebounceDelay is set
    }
}

The DebounceDelay is set to 1 second to highlight the behavior, although we have observed it with delays less than 100 milliseconds when the input is from a barcode scanner and the Enter is part of the scan. Start the sample, type "123" in the input, and hit enter within 1 second.

The output in the console is:
Immediate: function parameter: , bound variable:
Delayed: function parameter: , bound variable: 123

Currently, the TelerikChartBreadcrumb does not allow specifying how the Breadcrumb items are visualized when their total width exceeds the width of the component.

A possible alternative to achieve the same result is to override the default theme styles with the following CSS rule:

.k-breadcrumb-container {
    flex-flow: row wrap;
}

Here is a REPL example to see the result of the above CSS approach - https://blazorrepl.telerik.com/GTOyPYbG23PugZBQ36

Hi there,

I have a TelerikGrid with a DateTime column. I use a custom FilterEditorFormat which is localizable depending on the user settings, e.g. "dd/MM/yyy HH:mm:ss". Unfortunately, any '/' in the date component is always replaced by the current culture's DateSeparator. Using any other separator works, e.g. '-'. 

Expectation: Use the FilterEditorFormat without modification, unless it's a standard format string like "g" or "D".

I already traced it down to Telerik's FormatHelper class and it seems like a quick fix.

Steps to reproduce:

• Create a TelerikGrid with a DateTime column and a FilterEditorFormat as shown above.
• If required, change the DateSeparator to anything else but '/'.
• Run and open the filter dialog

Please let me know if you need any additional information.

Best regards

Andreas

Related to PDF Viewer does not display editable Acro fields, which was fixed in version 8.0, but the problem with readonly Acro fields persisted.

This is a regression in version 7.0.0. Version 6.2.0 displays all the acro field values as expected.