Questions on UI for Blazor Forum

1 answer

51 views

Grid - How to manage combined selected items of two child grids from two different parents as one selection list.

I have a hierarchal grid of two entities, one the parent and one the child through a detail template.

I would like to know how I can gather selected checkbox column items from a child grid of one parent and the selected checkbox column items from a child grid of a second parent in a "merged" collection.

Currently the @bind-selected property of a detail template child grid definition only applies to one child grid of a parent row.

How can I manage adding to the same collection, values of a child grid of the same type below a second parent row?

Do you/anyone have any examples on how to develop this solution?

Thanks, for any help!

Grid

answered on 29 Oct 2024

0 answers

184 views

pass a value from a page to Mainlayout or App.Blazor

hi
I want to create a session after the user clicks on the button and display this user's information such as UserName or UserID in a section of the MainLayout

In the MainLayout page, the currentUser_Id parameter value received from the session is displayed correctly in the paragraph, but this value is not passed to the paragraph inside the section.

In fact, I want to show the value of User _id which is created in the login page and in the session in a part of the page app .razor or mainLayout .razor as user information.

please help me

LoginPage.razor:

@page "/"
@using BlazorSessionApp.Layout
@layout LoginLayout
@inject NavigationManager NavigationManager
@inject ProtectedSessionStorage ProtectedSessionStore

<button class="btn btn-primary" @onclick="Submit">Enter</button>

@code
{
	private async Task Submit()
	{
		await ProtectedSessionStore.SetAsync("User_Id", 500);

		NavigationManager.NavigateTo("/Home", true);
	}
}

App.razor :

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<base href="/" />
	<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
	<link rel="stylesheet" href="app.css" />
	<link rel="stylesheet" href="BlazorSessionApp.styles.css" />
	<link rel="icon" type="image/png" href="favicon.png" />
	<HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
	<SectionOutlet SectionName="mysection" /> 

	<Routes @rendermode="InteractiveServer" />
	<script src="_framework/blazor.web.js"></script>

</body>
</html>

MainLayou.razor :

@inherits LayoutComponentBase
@inject ProtectedSessionStorage ProtectedSessionStore



<p>OutOf Section:@currentUser_Id</p>

<SectionContent SectionName="mysection">
	<p>into My Section:@currentUser_Id</p>
</SectionContent>




<div class="page">

	<div class="sidebar">
		<NavMenu />
	</div>

	<main>
		<div class="top-row px-4">
			<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
		</div>

		<article class="content px-4">
			@Body
		</article>
	</main>
</div>

@code {
	public int currentUser_Id;
	public bool isConnected;

	protected override async Task OnAfterRenderAsync(bool firstRender)
	{
		if (firstRender)
		{
			isConnected = true;
			await LoadStateAsync();
			StateHasChanged();
		}
	}
	private async Task LoadStateAsync()
	{
		var result = await ProtectedSessionStore.GetAsync<int>("User_Id");
		currentUser_Id = result.Success ? result.Value : 0;
	}
	private async Task IncrementUser_Id()
	{
		currentUser_Id++;
		await ProtectedSessionStore.SetAsync("User_Id", currentUser_Id);
	}
}

AppBar

General Discussions

Menu

Page Templates / Building Blocks

asked on 27 Oct 2024

1 answer

31 views

TreeList: Show ConfirmDialog during OnCreate

Dear Community!

I have the requirement to show a ConfirmDialog before actually saving objects to the database, because of some conditions that need to meet. Nevertheless my TreeList looks like follows and has the later OnCreate event defined:

 <TelerikTreeList Data="@Data"
                  IdField="Server"
                  ParentIdField="PreServer"
                  Pageable="true"
 Height="100%"
 EditMode="@TreeListEditMode.Inline"
                  OnCreate="@CreateServer"
                  OnUpdate="@UpdateServer"
                  OnDelete="@DeleteServer"
                  OnEdit="@(() => EditAction = !EditAction)"
                  OnAdd="@(() => AddAction = !AddAction)"
                  ConfirmDelete="true">
</TelerikTreeList>

My approach was simply to hook into the OnCreate event, place a Dialogs.ConfirmAsync and await the result before continuing. In fact, the confirm dialog shows up, but gets overlayed by a transparent container that has a higher z-index and prevents the confirm dialog to be clicked. Furthermore a loading spinner appears and the app gets stuck. I also tried to add a Task.Delay(1) but it didn't work out.

    async Task CreateServer(TreeListCommandEventArgs args)
    {
        await Task.Delay(1);

        CancelCreate = await Dialogs.ConfirmAsync("Please confirm.", "Confirmation");

        if(CancelCreate){
        ServerViewModel server = (ServerViewModel)args.Item;

        if (server != null)
        {
            server.PreServer = ((ServerViewModel)args.ParentItem)?.Server;
            var result = await _sdService.CreateServer(server);

            if (result)
            {
                NotificationComponent?.Show("Server created!", NotificationTheme.Success);

                await FetchData();
            }
            else
            {
                NotificationComponent?.Show("An error occurred!", NotificationTheme.Error);
            }
        }
        }
    }

Any help would be much appreciated.
Many thanks!

TreeList

answered on 24 Oct 2024

1 answer

47 views

Toggle Scheduler Grouping

I want to toggle grouping for a given scheduler resource and took the following approach in the SelectedChanged hander for a ToggleButton.

Are there pitfalls to this approach? Are built-in group toggles on the roadmap?

    <ToolBarToggleButton Title="@(Grouped ? "Ungroup" : "Group")"
                         Icon="@(Grouped ? SvgIcon.Ungroup : SvgIcon.Group)"
                         SelectedChanged="@GroupedSelectedChanged">@Grouped
    </ToolBarToggleButton>


    public bool Grouped { get; set; } = false;
...

    List<string> GroupingResources = ["Rooms"];

...

    void GroupedSelectedChanged(bool newGrouped)
    {
        if (newGrouped)
        {
            SchedulerRef.GroupSettings = new SchedulerGroupSettings
            {
                Resources = GroupingResources,
                Orientation = SchedulerGroupOrientation.Vertical
            };
        }
        else
        {
            SchedulerRef.GroupSettings = null;
        }
        
        SchedulerRef.Rebind();

        Grouped = newGrouped;
    }

Scheduler

ToggleButton

answered on 24 Oct 2024

1 answer

86 views

Scheduler - Edit custom appointements single and recurring

Hello,
I am using the Scheduler, and I need to go quite far in its usage.

The events I need to display in the Scheduler follow creation constraints that require me to have control over the creation form.

So, I naturally followed the guide to create a 'custom edit form' found here: https://github.com/telerik/blazor-ui/tree/master/scheduler/custom-edit-form. However, I am facing an issue where I am unable to retrieve the user's choice from the popup. (cf 2024-10-21-11h47_41.png)"

I implemented the JS hack on the double-click:

function clickSchedulerPromptButton(btnIndex) {
    setTimeout(function () {
        var buttons = document.querySelectorAll(".k-window-content .text-right button");
        if (buttons && buttons.length >= btnIndex) {
            var chosenButton = buttons[btnIndex];
            chosenButton.click();
        }
    }, 50);
}

This allows me to handle the choice in my own edit popup (which, by the way, reduces the number of windows opened, improving the user experience), and it works.

However, if the Scheduler is configured with AllowUpdate = true, another way to modify a series becomes available: resizing appointments with the mouse. In this specific case, the EditItem event is not triggered; instead, the OnUpdate event is triggered, but only after the choice popup has been displayed. Since it's not possible to retrieve the user's choice, the entire series is always modified (and the event arguments do not carry the targeted occurrence date anyway).

I believe this is a BUG, as it makes the Scheduler difficult to use in its current state.

Can you help me to solve this bug :

Trigger the EditItem event, even during a drag-and-drop of an appointment.
Add the user's choice information in the arguments of SchedulerUpdateEventArgs and SchedulerEditEventArgs.
Avoid displaying this choice popup (which is unnecessary); it should be integrated into the appointment form.
Include information related to the targeted occurrence in the event arguments (currently, only SchedulerEditEventArgs provides this detail)."

Thank you in advance for your response, which I hope will be constructive.

Scheduler

answered on 24 Oct 2024

0 answers

46 views

Resize Carousel when Window is maximized

Is it possible to get the carousel to maximize when you maximize the window?

Currently, the carousel retains its actual size when the window is maximized.

<TelerikWindow @ref="ImageWindow" Class="demo-window" Width="fit-content" Height="fit-content" Centered="true" Modal="true"
        @bind-Visible="@IsImageWindowVisible" FooterLayoutAlign="@WindowFooterLayoutAlign.Start">
    <WindowTitle>
        <strong>View Image</strong>
    </WindowTitle>
    <WindowActions>
        <WindowAction Name="Close"></WindowAction>
    </WindowActions>
    <WindowContent>
        <TelerikCarousel Data="@ListViewData" Width="@(CarouselWidth + "vw")"
                         Height="@("calc(" + CarouselWidth + "vw * .75)")"
                         Pageable="false" LoopPages="false" AutomaticPageChange="false"
                         @bind-Page="@CarouselPageIndex">
            <Template>
                <div class="image-with-text">
                    <p>@(context.Description)</p>
                    <img src="@(context.FileUrl)" alt="ReportImage" />
                </div>
            </Template>
        </TelerikCarousel>
    </WindowContent>
</TelerikWindow>

Carousel

asked on 22 Oct 2024

1 answer

115 views

Basic blazor editor editing problems

There are several very annoying bugs that have been reported multiple times by our end users that are using it on a daily basis for editing:

Selection is not kept when formatting (https://feedback.telerik.com/blazor/1623035-keep-selection-and-cursor-placement-after-block-operations)

State of formatting button is invalid (https://feedback.telerik.com/blazor/1602216-the-state-of-the-text-formatting-buttons-is-wrong-when-moving-the-cursor-from-one-formatted-text-to-a-differently-formatted-text)

Copy/Paste buttons are missing (https://feedback.telerik.com/blazor/1589151-toolbar-buttons-for-cut-copy-and-paste)

Even if read-only, it can still be edited (https://feedback.telerik.com/blazor/1545579-disabled-or-readonly-editor-is-still-focusable-and-editable)

If opening a toolbar dropdown (for example color picker), it does not always close if clicking beside it in the editor.

Do you plan fixing such basic editing bugs in the next release?

Editor

answered on 22 Oct 2024

1 answer

39 views

How to set the Enter key as a shortcut for the Filter button?

Hi,
As mentioned, is there any related reference material?

Filter

General Discussions

answered on 22 Oct 2024

1 answer

36 views

Filterable="true" being ignored

Hi, are there any restrictions on when Filterable="true" will be respected on a grid column? I have a grid where I can't filter on one particular column - the Id. Anything it could be?

Grid

answered on 22 Oct 2024

1 answer

73 views

Refreshing dynamically created charts

Hi,

I have chart that is created dynamically. How to refresh all of the dynamically created charts.

   @foreach (var item in popData)
   {
    <TelerikChart Width="100%" Height="600px" @ref="PopChart">
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Bar" Data="@item.chartData" Color="@item.borderColor"
                         Field="@nameof(Classes.PopulationChartClass.count)" CategoryField="@nameof(Classes.PopulationChartClass.ageGroup)">
            @*    <ChartSeriesLabels Template="#=value# " Visible="@LabelVisable"></ChartSeriesLabels> *@
            <ChartSeriesTooltip Visible="true">
                <Template>
             
                   
                </Template>
            </ChartSeriesTooltip>
        </ChartSeries>
    </ChartSeriesItems>
    <ChartValueAxes>
        <ChartValueAxis Color="black">
            <ChartValueAxisTitle Text="Population" />
            <ChartValueAxisLabels Format="{0:N0}"></ChartValueAxisLabels>
        </ChartValueAxis>
    </ChartValueAxes>
    <ChartCategoryAxes>
        <ChartCategoryAxis>
            <ChartCategoryAxisLabels>
                <ChartCategoryAxisLabelsRotation Angle="315" />
            </ChartCategoryAxisLabels>
        </ChartCategoryAxis>
    </ChartCategoryAxes>

</TelerikChart>

}

Charts

answered on 21 Oct 2024