Questions on UI for Blazor Forum

1 answer

234 views

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

182 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

95 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

415 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

376 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

453 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

1 answer

276 views

How to change the color of the separator in a menu

I have a menu I'd like to override the default style and am able to change the color of the text for the menu item but the separator between each text item doesn't change. How can I change the color of the separator.

Styling

answered on 25 Aug 2023

1 answer

101 views

Upload Control- register user clicking on existing file in Files list?

Hello,

Is there a way to fire an event (or listen to an existing one) for the Upload control when the user clicks on a file that has been added to the Files list of the Upload control? I'm populating the list of pre-existing files for records and I'd like to be able to let the user download them.

Thanks

Upload

answered on 25 Aug 2023

0 answers

335 views

Combo Box OnChange() fires on every keystroke

I have a Blazor form with five cascading combo boxes. The method to load the next combo box is called by the OnChange() event. I've put in breakpoints and seen it hit that method every keystroke and I can't figure out why.

Its also refreshing the page on each keystroke. On each keystroke, the page refreshes, the OnChange method is called and then the page refreshes again. I understand why it does after, because there was a change. But its the before that is confusing me.

Here is an example of the combo boxes.

        <div class="ms-section-header"> Change Details</div>
        <input type="text" hidden="true" @bind="ChangeDetails.ChangeDetailId" />
        <div>
            <TelerikFloatingLabel Text="Level 1">
                <TelerikComboBox @ref=cbl1 Class="justification" AllowCustom="true" Data="@L1" ClearButton="false" TextField="Name" ValueField="TaxonomyId" @bind-Value=@L1Value OnChange="@(() => GetNextLevel(L1Value, 1))"> </TelerikComboBox>
            </TelerikFloatingLabel>
        </div>

        @if (!String.IsNullOrEmpty(L1Value))
        {
            <div>
                <TelerikFloatingLabel Text="Level 2">
                    <TelerikComboBox @ref=cbl2 Class="justification" AllowCustom="true" Data="@L2" ClearButton="false" TextField="Name" ValueField="TaxonomyId" @bind-Value=@L2Value OnChange="@(() => GetNextLevel(L2Value, 2))"></TelerikComboBox>
                </TelerikFloatingLabel>
            </div>
        }

I attached a file that contains the whole page HTML and at the bottom is the OnChange method.

ComboBox

updated question on 24 Aug 2023

1 answer

222 views

TelerikAutoComplete Loader

Hi,

I am trying to implement a loading spinner with the <TelerikAutoComplete> control.

I have overriden the <NoDataTemplate>

<p>@IsLoading</p>
<TelerikAutoComplete
    @ref="@AutoCompleteControl"
    Data="ActiveDataSet"
    @bind-Value="SearchTerm"
    DebounceDelay="500"
    Placeholder="Search here..."
    FilterOperator="StringFilterOperator.Contains"
    ClearButton="true">
    <NoDataTemplate>
        @if (IsLoading)
        {
            <TelerikLoader Visible="true"
                           Size="@ThemeConstants.Loader.Size.Large"
                           ThemeColor="@ThemeConstants.Loader.ThemeColor.Tertiary"
                           Type="@LoaderType.ConvergingSpinner"/>
        }
        else
        {
            <p>No Data</p>
        }
    </NoDataTemplate>
</TelerikAutoComplete>

From the setter of SearchTerm I call 'Search'

where I'm getting the data and updating my 'IsLoading'

private async Task Search(string searchTerm)
{
    try
    {
        // Long running search that updates the data
    }
    finally
    {
        IsLoading = false;
        StateHasChanged();
        // AutoCompleteControl.Rebind(); // Without this the loading spinner never goes away
    }
    
}

If I don't include the AutoCompleteControl.Rebind(); the loading indicator never goes away, despite the Data being updated and IsLoading being set to false.

Is there something I'm missing about how to update the binding inside the <NoDataTemplate>?

Thanks!

AutoComplete

General Discussions

answered on 24 Aug 2023