Questions on UI for Blazor Forum

2 answers

98 views

How to inform User, that a modified form is changed without save is menu navigation is made

I have this structure:

+ Menu - Navigation Page Load to div "Desktop"
   + div desktop
      + Toolbar
      + Splitter Vertical
           +Splitterpane
                 -Overview Grid
           +Splitterpane
                 - Detail
                       +TelerikEditForm
                            -lot of stuff-

Problem: How to get an infromation if the EditForm IsModified() and someone uses the navigation to fire an other page.

User request: Please show a dialog to ask user for abort or save.

So I was looking for an OnBlur() Event. But there is no such an event I can Intercept the Action.

I've no idea how I can solve this request. Ok, no simple way... :-)

This is such a typical situation that I can't imagine it can't be solved with Blazor's built-in tools. But I currently have tomatoes on my eyes. Probably, I can't see the forest for the trees right now.

Any hint would be gratefully received. :-)

Form

General Discussions

Menu

Splitter

answered on 09 Nov 2023

2 answers

79 views

Resize a column in a grid inside a pane of a splitter collapse the pane

Hello,

I have a splitter with 2 pane's and in each pane a grid with sizable columns.

When one resizes a column in a grid inside a pane of the splitter one of the panes collapses instead of resizing the column.

Please note: Only the first time when the page is opened it is going not good!

Kind regards,

demo code to reproduce:

@using TelerikBlazorDemos.DataAccess.Services
@using TelerikBlazorDemos.DataAccess.Dto
@page "/grid/column-resizing"
@inject HttpClient http
<DemoConfigurator>
    <DemoConfiguratorColumn Description="Auto Fit Columns">
        <TelerikButton OnClick="@AutoFitAllColumns">AutoFit All Columns</TelerikButton>
        <TelerikButton OnClick="@AutoFitColumn">AutoFit Name Column</TelerikButton>
    </DemoConfiguratorColumn>
</DemoConfigurator>
                    <TelerikSplitter Orientation="@SplitterOrientation.Horizontal">
                        <SplitterPanes>
                            <SplitterPane Collapsible="false" >
<TelerikGrid @ref="Grid"
             Data="@GridData"
             Width="100%"
             Height="350px"
             Sortable="true"
             Resizable="true"
             Pageable="true">
    <GridColumns>
        <GridColumn Field=@nameof(ProductDto.ProductId) Width="120px" MaxResizableWidth="250" Title="ID" />
        <GridColumn Field=@nameof(ProductDto.ProductName) Id="productName" Width="200px" MinResizableWidth="120" Title="Name"/>
        <GridColumn Field=@nameof(ProductDto.UnitPrice) Width="140px" Title="Price" />
        <GridColumn Field=@nameof(ProductDto.UnitsInStock) Width="160px" Title="In stock" />
        <GridColumn Field=@nameof(ProductDto.QuantityPerUnit) Width="210px" MinResizableWidth="100" MaxResizableWidth="400" Title="Quantity per unit" />
        <GridColumn Field=@nameof(ProductDto.Discontinued) Width="160px" Title="Discontinued" />
    </GridColumns>
</TelerikGrid>
                            </SplitterPane>
                            <SplitterPane Collapsible="false" >
<TelerikGrid @ref="Grid"
             Data="@GridData"
             Width="100%"
             Height="350px"
             Sortable="true"
             Resizable="true"
             Pageable="true">
    <GridColumns>
        <GridColumn Field=@nameof(ProductDto.ProductId) Width="120px" MaxResizableWidth="250" Title="ID" />
        <GridColumn Field=@nameof(ProductDto.ProductName) Id="productName" Width="200px" MinResizableWidth="120" Title="Name"/>
        <GridColumn Field=@nameof(ProductDto.UnitPrice) Width="140px" Title="Price" />
        <GridColumn Field=@nameof(ProductDto.UnitsInStock) Width="160px" Title="In stock" />
        <GridColumn Field=@nameof(ProductDto.QuantityPerUnit) Width="210px" MinResizableWidth="100" MaxResizableWidth="400" Title="Quantity per unit" />
        <GridColumn Field=@nameof(ProductDto.Discontinued) Width="160px" Title="Discontinued" />
    </GridColumns>
</TelerikGrid>
                            </SplitterPane>                            
                        </SplitterPanes>
                    </TelerikSplitter>                            
@code {
    private ProductService _productService;
    private ProductService ProductService
    {
        get
        {
            if(_productService == null)
            {
                _productService = new ProductService(http);
            }
            return _productService;
        }
    }
    public TelerikGrid<ProductDto> Grid { get; set; }
    public IEnumerable<ProductDto> GridData { get; set; }
    protected override async Task OnInitializedAsync()
    {
        GridData = await ProductService.GetProducts();
    }
    private async Task AutoFitAllColumns()
    {
        await Grid.AutoFitAllColumnsAsync();
    }
    private async Task AutoFitColumn()
    {
        await Grid.AutoFitColumnAsync("productName");
    }
}

Grid

Splitter

updated answer on 01 Nov 2023

0 answers

30 views

TelerikSplitter elements getting tabindex="-1" attribute while loading

In a TelerikSplitter when I click a button that causes data to load, every element at that level and lower gets the attribute tabindex="-1" for a split second and then the property is removed. Is there any function of the Splitter or Loader/LoaderContainer that would do this? This causes explicitly set tabindex attributes to be completely removed.

Update/Solution:

I determined that this was the result of an intermediate Blazor component calling some JavaScript to disable tabbing on load. This issue is unrelated to the Telerik LoaderContainer.

updated question on 23 Oct 2023

1 answer

39 views

SizeChangedHandler In Splitter, can it fire before releasing the mouse?

In my current development project, which is based on Blazor, I extensively use the splitter in conjunction with BlazorSize to manage overflow and reconstruct the scrollbar.

While this setup works effectively, the user experience is not optimal. This is because the scrollbar, computed by BlazorSize, only appears after the mouse button is released. I considered utilizing the SizeChanged event to address this issue, but it too is triggered only after the mouse button is released.

Is there a way to configure the Splitter to trigger these events during the dragging motion, rather than waiting until the mouse button is released?

Splitter

answered on 10 Oct 2023

1 answer

74 views

The minimum size the pane when a pane is collapsed.

Hello,

How to collapse the pane using their collapse/expand buttons or double-clicking the split bars,
so that the minimum size the pane is taken into account.
Currently the whole panel is closed.

Thank you very much

Splitter

answered on 22 Mar 2023

1 answer

111 views

Is there a way to keep a pane content (Collapse/Expand)?

If the splitter pane is collapsed, its content is disposed and re-initialized again when the user expands the pane.

Is there a way to keep a pane content?

Splitter

answered on 25 Jan 2023

1 answer

522 views

Access to Blazor components' source code

I recall being told I would have access to source code once I buy a licence.

Now that I have a licence, how do I get access to the source so I can do a local build?

answered on 30 Dec 2022

1 answer

221 views

Blazor Splitter Component separator has accessibility issues - separator is not visible in aquatic high contrast mode or in desert mode

Environment Details:

URL: Telerik REPL for Blazor - The best place to play, experiment, share & learn using Blazor.

Edge Version 105.0.1343.53 (64-bit)

Windows 11 Pro

Control: Blazor Splitter Component | Telerik UI for Blazor

Repro Steps:

Go to Telerik REPL for Blazor - The best place to play, experiment, share & learn using Blazor. and hit "Run"
Turn on aquatic high contrast mode
Verify that in high contrast Aquatic theme, the splitter divider (especially on mouseover) and buttons are completely visible or not.

Actual Result:

In high contrast Aquatic theme, the splitter and its buttons are not completely visible.

Note:

Similar issue observed in desert mode - separator is not visible

Expected Result:

In high contrast Aquatic theme, the splitter divider (especially on mouseover) and buttons should be completely visible

Splitter

updated answer on 03 Nov 2022

1 answer

181 views

Blazor Splitter Component has accessibility issues - NVDA is announcing separator along with value like "50" irrespective of the position of the separator

Environment Details:

URL: Telerik REPL for Blazor - The best place to play, experiment, share & learn using Blazor

Chrome Version 105.0.5195.127 (64-bit)

Edge Version 105.0.1343.53 (64-bit)

Windows 11 Pro

Repro Steps:

Go to Telerik REPL for Blazor - The best place to play, experiment, share & learn using Blazor and hit the "Run" button
Turn on NVDA / Narrator
Tab till Separator
Verify that NVDA / Narrator is announcing separator with a value like "50 separator" or not (regardless of the position of the separator)

Actual Result:

NVDA is announcing the separator along with a prefix value like "50 " irrespective of the position of the separator

Narrator is announcing the current value as 50 irrespective of the position of the separator

Expected Result:

NVDA / Narrator should announce separator value with respect to position value for the separator (or no separator value at all)

Splitter

answered on 03 Nov 2022

1 answer

169 views

Hide SplitterPane for Mobile

Hi,

I need to make a responsive layout with a splitter.

If I remove a SplitterPane with Telerik MediaQuery it renders in a different order, same as this question:

https://feedback.telerik.com/blazor/1509284-splitter-order-changed-after-hiding-and-showing-pane?_ga=2.220935836.529993596.1645460989-111903490.1447636048

I cannot recreate the whole layout, because one div will use leafletjs. I'm not using Telerik map because it lacks many features I need.

Example code:

https://blazorrepl.telerik.com/ccuQmwQF26uBicm739

For me the best solution would be to have something by Telerik like: https://golden-layout.com/ or https://www.htmlelements.com/blazor/blazor-ui/demos/blazor-dockinglayout?id=basic

Splitter