Questions on UI for Blazor Forum

1 answer

290 views

[Solved] Scroll up in virtual TelerikGrid

When scrolling up in a virtual grid, the rows "above" seems to not be kept or loaded like when scrolling down, and it takes a while before they gets "loaded" and shown. This behaviour is not very user friendly and should be corrected. I can accept a certain time of delay when doing large scrolls using the scrollbar, but not when doing a scroll-wheen or page-up scroll.

Unless I missed something in the grid properties? I got the PageSize set.

Grid

answered on 28 Nov 2023

0 answers

236 views

Blazor Grid: first row selection

How to set in code the first row of the grid selected?

grdRptCallDetails_SelectedItems = RptResults[0].ToList();

Wont work. So How do I set that to the first row in the grid?

Grid

asked on 27 Nov 2023

1 answer

399 views

Treeview/Treelist lazy loading and paging

I am using treelist to display an hierarchical dataset that is read from an API using web calls.

I have encounbtered a problem where my source data contained many root items (which was an actual programming error), but by this surfaced a problem that you have to read ALL roots (or all children of an item) in order to make paging work correctly.

As in some cases I may have up to 10K "child" items (whichs unfortunately landed in my root due to the error), I would expect treeview and treelist to handle this without actually having to transfer 10K objects from my API call.

For this, a similar solution like the one used for the grid "OnRead" event would be a good solution as this could tell the treeview how many (root or direct child) objects there actually are and provide the offset to start reading with and how many objects to return.

You could even throw in filtering and sorting for all I care and recycle the DataRequest class for this.

This in turn should help getting the "paging" right for the treelist/treeview.

Regards - Hans

Grid

TreeList

TreeView

answered on 27 Nov 2023

1 answer

152 views

Additional parameters/logic for an existing base component

Hi

Is there a better way to add an automated permission than replacing an existing component type?
How else can I automatically check permissions on the base component "TelerikButton" instead of "MyTelerikButton"?
With a large number of thousands of fields, it does not want to fill the Enable/Visible per field.

My question is not only about permissions, but also about the ability to extend TelerikButton with its my additional [Parameter] which is not included in the basic set.

I would be grateful if you could suggest a better solution.

@foreach (var item in ListOfItemNames.Take(200))
 {         
     <div class="row">
         <div class="col">
             <label for="@item">@item</label>
             <MyTelerikButton Id="@item" Form="Device" Icon="SvgIcon.Stop" Title="@item" OnClick="@ButtonAction" ButtonType="ButtonType.Button" />
             <MyTelerikTextBox Id="@item" Name="Device"  Value="@item"></MyTelerikTextBox>
             @* ...<Telerik...> etc *@
         </div>
     </div>
 }

My Component

public  class MyTelerikButton: TelerikButton
{
   
    [CascadingParameter (Name = "Privileges")]
    public required List<Privilege> Privileges { get; set; } = [];

    protected override void OnInitialized()
    { 
        base.OnInitialized();
        var buttonName = Form + Id;
        Enabled = Privileges.Any(x=>x.Code == buttonName);       

    }
}

Button

General Discussions

answered on 27 Nov 2023

0 answers

168 views

Showing filter state when setting in code

I have a filter on End Date set at start up.

If I filter manual I get the filter indicator. How can I get the same result from code?

This is the code that I am using. Called from event

OnStateInit="@( (GridStateEventArgs<FundFirm> args) => OnFundFirmGridStateInit(args) )"

  private async Task OnFundFirmGridStateInit(GridStateEventArgs<FundFirm> args)
    {
        args.GridState.FilterDescriptors = new List<IFilterDescriptor>
        {
            new FilterDescriptor
            {
                Member = "ExcludeDate", Operator = FilterOperator.IsGreaterThanOrEqualTo,
                Value = DateTime.Today,
                MemberType = typeof(DateTime)
            }
        };
    }

Grid

asked on 27 Nov 2023

1 answer

1.0K+ views

[Solved] How to TAB key through grid for Accessibility

I'm trying to figure out how/if you can tab through a grid. What I mean by that is my Grid has a header row with a checkbox. If the focus is there and I hit tab, it goes out to the browser controls and I can't focus on a row or the pagination controls using the keyboard. I have row-click enabled so I assume the user should be able to tab to a row and use Enter to simulate a click. Or tab down to the pagination controls and select another page. Here's how it works now after the page first loads, I hit tab and it selects the hamburger (Telerik menu) in the top-right corner (which I can't activate with the keyboard!), next it moves to the checkbox in the grid header and the third tab goes to the browser controls starting with the magnifying glass.

I can't find anything in the documentation that talks about tab order so I'm stuck. Please point me at anything that defines how the tab order is setup for a grid.

Here is my grid code in case it helps.

<TelerikGrid Data="@RequestList"
             Pageable="true"
            @bind-PageSize="@PageSize" 
            @bind-Page="@CurrentPage"
             Resizable="true"
             Sortable="true"
             FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu "
             OnRowClick="@OpenRequestDetailAsync"
             OnStateChanged="@((GridStateEventArgs<RequestDTO> args) => GridStateChanged(args))"
             OnStateInit="@((GridStateEventArgs<RequestDTO> args) => InitGridState(args))">
    <GridToolBarTemplate>
            <TelerikCheckBox TabIndex="1" Id="chkPeriodFilter" OnChange="GetAllRequets" @bind-Value="FilterForPeriod"></TelerikCheckBox>
            <label for="chkPeriodFilter">View all requests</label>  
    </GridToolBarTemplate>
    <GridSettings>
        <GridPagerSettings InputType="PagerInputType.Input"
                            PageSizes="@PageSizes"
                            ButtonCount="5"
                            Adaptive="true"
                            Position="PagerPosition.Bottom">
        </GridPagerSettings>
    </GridSettings>
    <GridColumns>
            <GridColumn Field="ChangePeriodId" Width="5%" Visible="false" Title="ChangePeriodId" OnCellRender="@( (GridCellRenderEventArgs e) => e.Class = "vertical-aligned-cell" )" />
            <GridColumn Field="RequestId" Width="5%" Title="ID" OnCellRender="@( (GridCellRenderEventArgs e) => e.Class = "vertical-aligned-cell" )" />
            <GridColumn Field="SubmitDate" Width="9%" title="Requested Date" DisplayFormat="{0:MMM dd yyyy}" Sortable=true OnCellRender="@( (GridCellRenderEventArgs e) => e.Class = "vertical-aligned-cell" )" />
            <GridColumn Field="SubmitUser" Width="15%" title="Requested By" Sortable=true OnCellRender="@( (GridCellRenderEventArgs e) => e.Class = "vertical-aligned-cell" )" />
            <GridColumn Field="CurrentStatus" Width="9%" Title="Status" Sortable=true OnCellRender="@( (GridCellRenderEventArgs e) => e.Class = "vertical-aligned-cell" )">
                <FilterMenuTemplate>
                    @foreach(var status in RequestList.DistinctBy(x => x.CurrentStatus).Select(x => x.CurrentStatus))
                    {
                        <div>
                            <TelerikCheckBox Value="@(IsCheckboxInCurrentFilter(context.FilterDescriptor, status.ToString()))"
                                             TValue="bool"
                                             ValueChanged="@((value) => FilterStatus(value, status.ToString(), context))"
                                             Id="@($"status_{status}")">
                            </TelerikCheckBox>
                            <label for="@($"status_{status}")">
                                @if (status == null) 
                                {
                                    <text>Empty</text>
                                }
                                else
                                {
                                    @status
                                }
                            </label>
                        </div>
                    }
                </FilterMenuTemplate>
            </GridColumn>
            <GridColumn Field="RequestTypeName" Width="5%" Title="Type" Sortable="true" OnCellRender="@( (GridCellRenderEventArgs e) => e.Class = "vertical-aligned-cell" )" >
                                <FilterMenuTemplate>
                    @foreach(var status in RequestList.DistinctBy(x => x.RequestTypeName).Select(x => x.RequestTypeName))
                    {
                        <div>
                            <TelerikCheckBox Value="@(IsCheckboxInCurrentFilter(context.FilterDescriptor, status.ToString()))"
                                             TValue="bool"
                                             ValueChanged="@((value) => FilterType(value, status.ToString(), context))"
                                             Id="@($"status_{status}")">
                            </TelerikCheckBox>
                            <label for="@($"status_{status}")">
                                @if (status == null) // part of handling nulls - show meaningful text for the end user
                                {
                                    <text>Empty</text>
                                }
                                else
                                {
                                    @status
                                }
                            </label>
                        </div>
                    }
                </FilterMenuTemplate>
            </GridColumn>
            <GridColumn Field="@(nameof(RequestDTO.Change))" Title="Change Description" OnCellRender="@( (GridCellRenderEventArgs e) => e.Class = "vertical-aligned-cell" )" >
            <Template>
                @(new MarkupString((context as RequestDTO).Change))
            </Template>
        </GridColumn>
     </GridColumns>
</TelerikGrid>

Accessibility

Grid

answered on 24 Nov 2023

1 answer

303 views

How can I add a placeholder for the Blazor TelerikEditor?

Is it possible to add placeholder for the Blazor TelerikEdit?

<TelerikEditor @bind-Value="@Description" Placeholder="Add a description please"/>

Or what I should to do for add my placeholder text to TelerikEditor ?

Editor

answered on 24 Nov 2023

2 answers

615 views

how to set the telerikgrid height relative to the browser

Hi,

I am using the telerikgrid in my web application.

I want the height of the grid should adjust by itself when user resizes the browser. The user should not get the scroll bar for the browser.

As of now I am using the following:

Size="Telerik.Blazor.ThemeConstants.Grid.Size.Medium" Resizable="true" Pageable="false" Height="50vh" ScrollMode="GridScrollMode.Scrollable"

Using this setting when the user is resizing the browser the scroll bar coming up for browser which we dont want.

Can you please help on this?

Thanks & regards,

Afreen

Grid

answered on 23 Nov 2023

1 answer

127 views

[Solved] Locked Multicolumn-Header breaks layout since version 4.6

Hi there,

when using a Grid with a multicolumn header which is locked, the layout breaks on horizontal scolling.

This behavior appears since Telerik UI Version 4.6 and also remains in 5.0.

See REPL sample below (just use horizontal scroll)

https://blazorrepl.telerik.com/wRPvclYX432myApT30

When switching to Version 4.5 the grid acts as expected.

One more interesting thing I observed is, if you resize the column at runtime (for the verions 4.6 and 5.0) the grid also acts as expected.

Feels like there is some refresh or initial rerendering of the component missing.

Any ideas on that?

Grid

answered on 22 Nov 2023

0 answers

186 views

Dropdown in TelerikForm stops the popup from loading. (Page stops responding)

Hello, I have a page where user could click a button to open a modal popup. Then create a name and state association. However, after clicking the button, popup doesn't show up and the page stops responding then I have to close the page. If remove the dropdown from the modal popup, everything works fine. Below is the sample razor code. I appreiate your help.

<TelerikDialog @bind-Visible="@ShowDialog" @ref="@DialogRef" Title="MyTelerikDialogTitle" Width="400px" >
<DialogContent>
<TelerikForm Id="MyTelerikForm"
Model="@MyModel"
OnValidSubmit="@OnOkSubmit"
OnUpdate="@OnFormUpdate"
@ref="@FormRef">
<FormValidation>
<DataAnnotationsValidator />
</FormValidation>
<FormItems>
<FormItem Field="@nameof(MyDto.Name)" LabelText="Name" /><FormItem Field="@nameof(MyDto.Address)" LabelText="Address" /> <FormItem Field="@nameof(MyDto.Zipcode)" LabelText="Zipcode" />
<FormItem Field="@nameof(MyDto.State)">
<Template>
<label for="StateName">State Name:</label>
<TelerikDropDownList @bind-Value="@MyItem"
DefaultText="Choose a state"
Data="@StateNameDropDown"
Id="StateName">
<DropDownListSettings>
<DropDownListPopupSettings Height="auto" />
</DropDownListSettings>
</TelerikDropDownList>
</Template>
</FormItem> ...

Dialog

DropDownList

Form

updated question on 22 Nov 2023