Questions on UI for Blazor Forum

1 answer

114 views

If sorting and/or filtering is applied to the grid, how do I access the resulting subset of items, i.e. the items currently displayed in the grid?

Grid

answered on 30 Aug 2023

1 answer

283 views

Is there a way to control the browser level auto complete on a numeric textbox?

I'm using custom formatting in my numeric text boxes for units (in, kg, cm, etc.). The issue is that we want the browser auto complete to function within the numeric textbox, but the options that come from the history of the input all include the formatting string, so when selected, the value disappears before the onchange event since it technically contains a string. Is there a workaround for this, or something else I may be missing? Thanks for any insight!

NumericTextBox

answered on 30 Aug 2023

1 answer

141 views

<TelerikButton Icon ="calendar" - calendar does not exist in the current context

<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<TelerikButton Icon="Calendar" Primary="true" OnClick="@(_ => DateRangeFilter(3))">3 Months</TelerikButton>

Icon="Calendar" Primary="true" - both of the properties tell it does not exist in the current context.

Button

answered on 30 Aug 2023

1 answer

319 views

Pass "Data" parameter for a TelerikGrid encapsulated in a component

Good morning. I've encapsulated a TelerikGrid in a component. I would like to pass to this component the "Data" parameter to be assigned to the encapsulated TelerikGrid. I haven't found which type to define for the parameter "Data" to be received.

Example of TelerikGrid encapsulated in the component, I would like to know what type must be the parameter "ReceivedDataParameter". (I've put ??? in the code to show the information I need). Thank you.

<TelerikGrid Data=@ReceivedDataParameter></TelerikGrid>

@code {
    [Parameter]
    public ??? ReceivedDataParameter { get; set; };
}

Grid

answered on 30 Aug 2023

1 answer

225 views

Posting sample code on GitHub

I have a sample C# Blazor app that uses the Telerik Map component. I have used the full license. What changes, if any, do I need to make to my code if it is to be published publically on GitHub. assuming users would in the main just install the 30 day trial of Telerik UI for Blazor. I have, in my instructions indicated they only need do steps 0, 2 and 4 at First Steps with Server-Side UI for Blazor.

Map

answered on 29 Aug 2023

1 answer

174 views

TelerkGridLayout not rendering

I had a problem with the TelerikGridLayout, in conjunction with a MediaQuery where on First render it was not rendering any of the objects.

After a lot of investigation I found an article that used an IEnumerable to bind to the grid and not a list. After using an IEnumerable, my objects rendered perfectly and were responsive.

Anyone having problems with the TelerikGridLayout, make sure to use an IEnumerable and not a List to bind to the grid.

GridLayout

MediaQuery

answered on 29 Aug 2023

1 answer

89 views

Can you stack series in a Range Column Chart?

Is it possible to stack a series in a Range Column Chart?

We have created a chart using an invisible baseline series to shunt our series upward. But the hover state of the invisible series cannot be configured. https://blazorrepl.telerik.com/GxkiGIvF15qirZPe20. Does anyone have any other ideas of chart types that may be more suitable?

Charts

answered on 29 Aug 2023

1 answer

400 views

Style <GridCommandColumn> title

How can I style the Title of the GridCommandColumn? I jsut want to make the text bold. I've tried using <HeaderTemplate> and <GridCommandColumn.TItleTemplate> neither have worked. And I can't seem to find anything in the docs about styling the title.

<GridCommandColumn Width="50px" Title="Actions">
                <GridCommandButton Command="Edit" Icon="@FontIcon.Pencil"></GridCommandButton>
                <GridCommandButton Command="Delete" Icon="@FontIcon.Trash" ThemeColor="error"></GridCommandButton></GridCommandColumn>
            <GridColumn Title="First Name" Field="@(nameof(SecurityAdminDto.firstName))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        First Name
                    </div>
                </HeaderTemplate>
            </GridColumn>
            <GridColumn Title="Last Name" Field="@(nameof(SecurityAdminDto.lastName))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        Last Name
                    </div>
                </HeaderTemplate>
            </GridColumn>
            <GridColumn Title="Email" Field="@(nameof(SecurityAdminDto.email))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        Email
                    </div>
                </HeaderTemplate>
            </GridColumn>
            <GridColumn Title="EmployeeId" Field="@(nameof(SecurityAdminDto.employeeId))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        EmployeeId
                    </div>
                </HeaderTemplate>
            </GridColumn>
            <GridColumn Title="NetworkId" Field="@(nameof(SecurityAdminDto.networkId))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        NetworkId
                    </div>
                </HeaderTemplate>
            </GridColumn>
            <GridColumn Title="Security Admin" Field="@(nameof(SecurityAdminDto.isSecurityAdmin))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        Security Admin
                    </div>
                </HeaderTemplate>
            </GridColumn>
            <GridColumn Title="FSO" Field="@(nameof(SecurityAdminDto.fsoCodes))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        FSO
                    </div>
                </HeaderTemplate>
                <Template>
                    @{
                        var cellValue = ((SecurityAdminDto)context).fsoCodes;
                        int i = 0;
                        @foreach(var fsoCode in cellValue)
                        {
                            if (i != 0)
                            {
                                <span>, </span>
                            }
                            <span>@fsoCode</span>
                            i++;
                        }
                    }
                </Template>
            </GridColumn>
            <GridColumn Title="FTC" Field="@(nameof(SecurityAdminDto.isFTC))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        FTC
                    </div>
                </HeaderTemplate>
            </GridColumn>
            <GridColumn Title="HR" Field="@(nameof(SecurityAdminDto.hrCodes))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        HR
                    </div>
                </HeaderTemplate>
                <Template>
                    @{
                        var cellValue = ((SecurityAdminDto)context).fsoCodes;
                        int i = 0;
                        @foreach (var hrCode in cellValue)
                        {
                            if (i != 0)
                            {
                                <span>, </span>
                            }
                            <span>@hrCode</span>
                            i++;
                        }
                    }
                </Template>
            </GridColumn>
            <GridColumn Title="Contracts" Field="@(nameof(SecurityAdminDto.contractsCodes))" Width="100px">
                <HeaderTemplate>
                    <div class="column-title">
                        Contracts
                    </div>
                </HeaderTemplate>
                <Template>
                    @{
                        var cellValue = ((SecurityAdminDto)context).contractsCodes;
                        int i = 0;
                        @foreach (var contractCode in cellValue)
                        {
                            if (i != 0)
                            {
                                <span>, </span>
                            }
                            <span>@contractCode</span>
                            i++;
                        }
                    }
                </Template>
            </GridColumn>
        </GridColumns>
    </TelerikGrid>

Grid

Styling

answered on 28 Aug 2023

1 answer

358 views

Telerik Editor Similar to MS-Word Editor

Hello Team,

I have a requirement where I need to use microsoft word editor in blazor front end application. I found the closest component to it is the TelerikEditor. But it has a lot of limitations (like pages, columns, mail merge fields, footers etc). So, I need to do some customizations in the telerik editor (https://blazorrepl.telerik.com/QRkMwdvc41pMT93w35).

On initial research, I found that there is a library, Blazor Dev Express (https://docs.devexpress.com/Blazor/401891/components/rich-text-editor) that offers an editor similar to that of ms-word.

Is there any similar editor in Telerik UI for Blazor or is anything similar coming up soon in future upgrades?

Editor

answered on 28 Aug 2023

2 answers

435 views

Dismiss tooltip by clicking on triggering element

Apologies if duplicate. It seems that when Tooltip's ShowEvent is set to Click, you can click anywhere in the browser window except on the element that triggers the tooltip to open. I think it would be better behavior to have the triggering element toggle the tooltip instead of only opening. Is there perhaps a workwround?

Tooltip

answered on 26 Aug 2023