Questions on UI for Blazor Forum

1 answer

652 views

Grid OnRowClick event for middle mouse button click

Hi,

Any way to have an event callback when clicking a row in the TelerikGrid with middle mouse button?
Looks like the OnRowClick event is only triggered when using left mouse button.

KR,

Lennert

Grid

answered on 30 Jan 2024

1 answer

166 views

Change column order for generated columns

We're using a TelerikGrid with Row Drag & Drop and Hierarchy, which generate icon columns in the grid as shown below. Column 1 for drag & drop, column 2 for the hierarchy expansion.

However, we'd like to change the order of these columns around, for example we'd like to put a checkbox column in as the first column.

Is this possible?

Grid

answered on 29 Jan 2024

0 answers

146 views

No drop hint in ListBox?

During drag'n'drop, the Grid has a drop hint to indicate where a row will be placed. (See e.g. https://demos.telerik.com/blazor-ui/grid/drag-drop)
The ListBox does not have a drop hint, making it hard to guess in which position the dragged element will end up in. (See e.g. https://docs.telerik.com/blazor-ui/components/listbox/drag-drop)

Can you add the drop hint?

TYVM
Lukas

ListBox

asked on 29 Jan 2024

0 answers

179 views

Telerik .NET8 Server side application

How to start a Server Blazor Application with your tool? Visual Studio extension permits only WebApp for .NET8.

General Discussions

asked on 26 Jan 2024

0 answers

162 views

Nested Donut spacing

Is there a way to set the spacing between nested donuts? Multiple series.

Also, I would like to set the donut section stroke/border. I can do it in xaml but have no clue as to how in html. Actually I haven't much of clue in general since I'm a html/css rookie. Oh the pain... please make it stop.

Thanks guys.

Charts

asked on 26 Jan 2024

0 answers

206 views

How do I save the Value on Blur of a TelerikCombo-Box that uses the OnRead-Event?

I have a TelerikComboBox that uses the OnRead-Event inside of an EditForm. Binding the selected Value (an Id of type "long") using bindValue to my model in the Edit form is not the problem. However when the component loses focus the selected value resets and I can't submit the form. I guess this is just the default behavior. Using the ValueChanged-Event I realized that it fires not only on selection but also when the component loses focus, which is only the case when using the OnRead-Event. Is there a way for me to disable the firing of the ValueChanged-Event on Blur?

This is my ComboBox:

<EditForm Model="model" OnValidSubmit="HandleValidSubmitAsync">
                <FluentValidator></FluentValidator>
                <p>Selected Value: @model.UserId</p>
                <p>

                    <label class="required" for="...">@FieldsLoc["..."]</label>
                    <TelerikComboBox TItem="Model"
                                        TValue="long"
                                        OnRead="@ReadItems"
                                        @bind-Value="model.UserId"
                                        ValueField="Id"
                                        TextField="DisplayName"
                                        Filterable="true"
                                        FilterOperator="StringFilterOperator.Contains"
                                        Width="100%">
                    </TelerikComboBox>
                    <ValidationMessage For="@(() => model.UserId)"></ValidationMessage>
                </p>

                <TelerikButton OnClick=@(args=> createDialogOpen=false)>@AppLoc["Cancel"]</TelerikButton>
                <TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">@AppLoc["Save"]</TelerikButton>
            </EditForm>

ComboBox

asked on 26 Jan 2024

1 answer

564 views

Implement cursor pagination

hi, i would like to know if the grid support server side cursor pagination (keyset pagination) instead of the standard offset pagination who use page number to navigate through the pages, and an example to implement it.

Thanks

Grid

answered on 26 Jan 2024

1 answer

218 views

Encapsulating TelerikGrid and its components and context

Hello,

I have a custom razor component called MyGrid.razor which encapsulates the TelerikGrid component.

The goal of my doing is to achieve a result which looks like the following:

<MyGrid>
<MyGridColumn Title="Id" Width="200px" Field=@(nameof(MyDTO.Id))>
@{
@(MarkupString)MyService.FormatTitle(context.Title)
}
<MyGridColumn>
<MyGridColumn Title="Status" Width="200px" Field=@(nameof(MyDTO.Status))>
@{
@(MarkupString)MyService.FormatStatus(context.Status)
}
<MyGridColumn>
</MyGrid>

The component MyGridColumn should represent the GridColumn which is a Telerik component. So ultimately my goal is to encapsulate the TelerikGrid and also its components like the GridColums, GridColumn, so I do not have to copy-paste the same component with its settings from one razor page to another.

Is there any way I could achieve this without the need of using the RowTemplate and is this actually even possible?

Best regards,

Nikita

Grid

answered on 25 Jan 2024

0 answers

170 views

MenuItem is genric in code but not in the docs

Hi

I want to use the TelerikMenu so I'm trying to create a list of menu items to pass to the Data property

<TelerikMenu Data=menuItems>
    
</TelerikMenu>

List<MenuItem> menuItems;

and I'm getting an error: "Using the generic type 'MenuItem<TItem>' requires 1 type arguments"

but in the docs, I see it'd be used without a generic parameter: https://docs.telerik.com/blazor-ui/components/menu/overview

Thanks

Menu

asked on 25 Jan 2024

1 answer

245 views

Set default value from code behind

I have a listbox where I feed a default value into the class in the url. I am able to populate the bound SelectedItems value but it doesn't highlight the selected value in the control. How do I do this?

                            <TelerikListBox Data="@SessionOptionTemplates" Width="350px"
                                            SelectionMode="ListBoxSelectionMode.Single"
                                            TextField="@nameof(SessionOptionTemplate.Name)"
                                            OnReorder="@((ListBoxReorderEventArgs<SessionOptionTemplate> args) => OnReorderSessionOptionTemplates(args))"
                                            OnRemove="@((ListBoxRemoveEventArgs<SessionOptionTemplate> args) => OnRemoveSessionOptionTemplates(args))"
                                            SelectedItemsChanged="@((IEnumerable<SessionOptionTemplate> selectedTemplates) => OnSelectedSessionOptionTemplate(selectedTemplates))">
                                <ListBoxToolBarSettings>
                                    <ListBoxToolBar Visible="true">
                                        <ListBoxToolBarMoveUpTool />
                                        <ListBoxToolBarMoveDownTool />
                                        <ListBoxToolBarRemoveTool />
                                        <ListBoxToolBarCustomTool>
                                            <TelerikButton Icon="@SvgIcon.DetailSection"
                                                           Enabled="@( SelectedSessionOptionTemplate != null )"
                                                           OnClick="@ShowEditDialogSessionOptionTemplates" />
                                        </ListBoxToolBarCustomTool>
                                    </ListBoxToolBar>
                                </ListBoxToolBarSettings>
                            </TelerikListBox>

        public async Task OnSelectedSessionOptionItem(
            IEnumerable<SessionOptionItem> selectedItems)
        {
            if (selectedItems.Any())
            {
                SessionOptionItem selectedItem =
                    selectedItems.FirstOrDefault(x =>
                        x.Id == selectedItems.First().Id);

                if (selectedItem != null)
                {
                    SelectedSessionOptionItems =
                        new List<SessionOptionItem>()
                        {
                            selectedItem
                        };
                }
            }

            await Task.CompletedTask;
        }

        public async Task OnSelectedSessionOptionTemplate(
            IEnumerable<SessionOptionTemplate> selectedItems)
        {
            if (selectedItems.Any())
            {
                SessionOptionTemplate selectedItem =
                    selectedItems.FirstOrDefault(x =>
                        x.Id == selectedItems.First().Id);

                if (selectedItem != null)
                {
                    SelectedSessionOptionTemplates =
                        new List<SessionOptionTemplate>() { selectedItem };

                    SessionOptionItemClient.AccessToken = AccessToken;
                    SessionOptionItemClient.CustomerUniqueId = CustomerUniqueId;

                    var itemResponse =
                        await SessionOptionItemClient.GetBySessionOptionTemplateIdAsync(
                            selectedItem.Id);

                    if (itemResponse != null &&
                        itemResponse.IsSuccess &&
                        itemResponse.Result != null)
                    {
                        SessionOptionItems =
                            itemResponse.Result.OrderBy(x => x.Order).ToList();

                        if (SessionOptionItems.Any())
                        {
                            await OnSelectedSessionOptionItem(
                                new List<SessionOptionItem>() { SessionOptionItems.First() });
                        }
                    }
                    else
                    {
                        SessionOptionItems = null;
                    }
                }
            }
        }

        private IEnumerable<SessionOptionTemplate> SelectedSessionOptionTemplates { get; set; } =
            new List<SessionOptionTemplate>();

ListBox

answered on 25 Jan 2024