Questions on UI for Blazor Forum

1 answer

448 views

[Solved] 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

425 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

508 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

307 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

123 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

385 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

271 views

[Solved] 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

0 answers

377 views

Telerik Wizard

hi,

I've been working on creating a form using the Telerik Wizard component, allowing users to fill out information across different steps. I've been using the same model for binding data in several WizardSteps. I referred to the example here: https://demos.telerik.com/blazor-ui/wizard/overview . However, I've removed the confirmation page since it's not necessary for my use case.
In the model, I have a few required fields, but I don't want to prevent users from moving to the next page if the current page's input is invalid. Instead, I'd like to collect all the validation messages and display them in their entirety on the last step. To achieve this, I placed a <TelerikValidationSummary> component in the last step of the wizard.
However, it seems that the validation messages aren't being displayed. I've attached a screenshot of my Razor page for your reference. It's a blazor webassembly app.
If anyone could provide insights or guidance on how to make the validation summary work properly, I'd greatly appreciate it!

Thanks in advance for your help!

ValidationSummary

Wizard

asked on 23 Aug 2023

11 answers

8.2K+ views

Binding DropDownList Value to complex model

I'm wondering how I can two-way bind a TelerikDropDown selection to a complex model object rather than a primitive type such as an Id field. I'm trying to add a TelerikDropDownList to a page where the user can select a user-friendly name of an object and have that selection's value bound to the object itself rather than a primitive data type. For example:

<TelerikDropDownList Data="@DropDownItems" TextField="LabelField" ValueField="ValueField" @bind-Value="@SelectedItem"/>

@code {

public List<GenericDropDownModel<Item>> DropDownItems { get; set; }

public IEnumerable<Item> AllItems { get; set; }

public Item SelectedItem { get; set; }

protected override Task OnInitializedAsync()

{

AllItems = await DataService.LoadItems();

SelectedItem = AllItems.First();

}

private void SetDropDownItems()

{

List<GenericDropDownModel<Item>> dropDownItems = new List<GenericDropDownModel<Item>>();

if (AllItems != null)

{

foreach(var item in AllItems)

{

GenericDropDownModel<Item> dropDownItem = new GenericDropDownModel<Item>()

{

ValueField = item,

LabelField = item.Name

};

dropDownItems.Add(dropDownItem);

}

DropDownItemsItems = dropDownItems;

}

public class GenericDropDownModel<T>

{

public string LabelField { get; set; }

public T ValueField { get; set; }

}

public class Item

{

public string Name { get; set; }

public IModel Model { get; set; }

public IEnumerable<IOtherModel> OtherModels { get; set; }

}

public class Model

{

public int Id { get; set; }

public string Name { get; set; }

public string Info { get; set; }

public IAnotherModel MoreDetails { get; set; }

}

The drop-down is not allowing me to bind to non-primitive types nor specify a property of a property, i.e.:

<TelerikDropDownList Data="@AllItems" TextField="Name" ValueField="@Model.Info" @bind-Value="@SelectedInfo"/>

I get the following error with the first code snippet scenario:

System.InvalidOperationException: Telerik.Blazor.Components.TelerikDropDownList`2[GenericDropDownModel`1[Item],Item] does not support the type

'Item'.

at Telerik.Blazor.Components.Common.TelerikSelectBase`2.TryParseValueFromString(String value, TValue& result, String& validationErrorMessage)

at Telerik.Blazor.Components.Common.TelerikSelectBase`2.set_CurrentValueAsString(String value)

at Telerik.Blazor.Components.TelerikDropDownList`2.SelectItem(ListDataItem item)

at Telerik.Blazor.Components.TelerikDropDownList`2.OnParametersSetAsync()

at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

General Discussions

updated answer on 23 Aug 2023

1 answer

147 views

[Solved] Window: the tooltip to restore window after minimized shows "Minimize" instead of "Restore"

If I minimize a TelerikWindow, the tooltip that appears on the "Restore window" button shows "Minimize" instead of (say) "Restore".

Please see attached file.

Version is 4.4.0.

Thank you.

Window

answered on 23 Aug 2023