Questions on UI for Blazor Forum

1 answer

293 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

104 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

95 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

824 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

236 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

507 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

2 answers

576 views

How to automatically load a PDF with 'fitToPage' activated

The subject says it...

       <TelerikPdfViewer @ref="@PdfViewerRef"
            Width="100%"
            Height="100%"
            OnDownload="@OnPdfDownload"
            OnError="@OnPdfError"
            OnOpen="@OnPdfOpen"
            Zoom="@PdfZoom"
            ZoomChanged="@OnPdfZoomChanged"
            EnableLoaderContainer="true"
            Data="@PdfData">

            <PdfViewerToolBar>
                <PdfViewerToolBarCustomTool>
                    <TelerikButton OnClick="@PreviousPage">Vorige pagina</TelerikButton>
                    <TelerikButton OnClick="@NextPage">Volgende pagina</TelerikButton>
                </PdfViewerToolBarCustomTool>
                <PdfViewerToolBarZoomTool />
                <PdfViewerToolBarSelectionTool />
                <PdfViewerToolBarSearchTool />
            </PdfViewerToolBar>


        </TelerikPdfViewer>

PDFViewer

answered on 23 Nov 2023

1 answer

90 views

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

125 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

1 answer

220 views

Is there a way to filter a column based on how the data is rendered by a template?

I am using a Telerik DataGrid in Blazor to display entity data. In this grid, one column's Field represents a one-many data relationship. The Field type is an int, however in this column we use both a <Template> and a <EditorTemplate> to display string values associated with the backing Ints, which serves as an ID for this data. This string data is not stored in this application, but rather retrieved via a webAPI from another application that manages it.

Is it possible to filter the column based on how the data is rendered in the display Template, which is a string? At present, any filtering at all Below is the code for the data grid. The column on which we would like to filter based on the string rendered in the template is bolded:

<TelerikGrid Data="@BranchList"
FilterMode="@GridFilterMode.FilterMenu"
EditMode="GridEditMode.Inline"
OnUpdate="@UpdateHandler"
OnCreate="@CreateHandler"
Resizable="true"
Sortable="true"
SortMode="SortMode.Single">
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add New OB Branch</GridCommandButton>
</GridToolBar>

<GridColumns>
<GridCommandColumn Width="100px">
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Save</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>

<GridColumn Field="Id" FieldType="@typeof(int)" Editable="false" Visible="false" />
<GridColumn Field="Name" FieldType="@typeof(string)" Editable="true" Title="Branch Name" Width="200px"/>
<GridColumn Field="GroupId" FieldType="@typeof(int)" Editable="true" Visible="true" Title="Group" Sortable="true" Filterable="true" Context="context" Width="100px">
<Template Context="ctx">
@{
var b = ctx as OptimalBlueBranch;
<span>@(Groups.Where(g=>g.Id == b.GroupId).Select(g=>g.Name).FirstOrDefault())</span>
}
</Template>
<EditorTemplate Context="ctx">
@{
var b = ctx as OptimalBlueBranch;
<TelerikComboBox Data="@Groups" TextField="Name" ValueField="Id" @bind-Value="@b.GroupId"
Placeholder="Add a group" ClearButton="true" Filterable="true">
</TelerikComboBox>
}
</EditorTemplate>
</GridColumn>
<GridColumn Field="Active" Title="Active" FieldType="@typeof(bool)" Editable="true" Width="100px">
<Template Context="ctx">
@{
var b = ctx as OptimalBlueBranch;
<input type="checkbox" checked="@b.Active" disabled />
}
</Template>

</GridColumn>
<GridColumn Field="Mappings" Title="Oasys Branch Mappings" Filterable="true" Width="250px">
<Template Context="ctx">
@{
var b = (ctx as OptimalBlueBranch).Mappings;

var mapped = b.Any();
var styleClass = SetBranchBlockStyle(b);

<span class="@styleClass fill-cell">

@if (b != null && b.Count > 0)
{
foreach (var mapping in b)
{

<span>@GetOasysBranchName(mapping), </span>
}
}
else
{
<span>No Oasys branches mapped</span>

}
</span>

}
</Template>

<EditorTemplate Context="ctx">
@{
var b = ctx as OptimalBlueBranch;

<TelerikMultiSelect Data="@OasysBranches" @bind-Value="@b.Mappings"
TextField="Name" ValueField="Code" Placeholder="Add relevant branches" AutoClose="false"> </TelerikMultiSelect>
}

</EditorTemplate>
</GridColumn>
</GridColumns>

</TelerikGrid>

Filter

Grid

answered on 21 Nov 2023