Questions on UI for Blazor Forum

1 answer

697 views

<GridColumns>
@foreach (DataRow column in gridColumnData.Rows )
{
<GridColumn Field="@nameof(Person.Age)" Title="@column["columnname"].ToString()" />
}
</GridColumns>

how can i make Field properties also dynamic without creating object model
when i display values without creating model i cant use filter mode it throws unhandled exception?

Grid

answered on 29 Nov 2023

2 answers

217 views

Custom GIF in Blazor TelerikGrid

Can you point me at example code on how to set the busy indicator in the TelerikGrid to my GIF?

Grid

answered on 28 Nov 2023

1 answer

213 views

OnLoad or OnRendered events for Telerik Components?

I'm in need for an OnRendered event (or similar) for a TelerikWindow component. Actually, it would be nice to have for all Telerik blazor components. I this particular case I need to know when a specific <div> is avaible to the browser DOM so that I can call some javascript interop on it. In this case I need to show I leaflet map in the modal window.

I solved it for now, using a javascript timeout of 0.1 second, but that is bad coding.

General Discussions

Window

answered on 28 Nov 2023

1 answer

205 views

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

159 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

273 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

94 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

91 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

781 views

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

216 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