Questions on UI for Blazor Forum

0 answers

2 views

Navigating TelerikWizard and child component loose its data

I added a TelerikWizard with five WizardSteps on a page. No child components, all code directly inside the different steps. Navigating back and forward between the steps works fine, all steps/controls keeps their user input data/state.

After a while I had so much content that I wanted refactor some of the steps into components. I made the first component and added it to one of the steps:

<WizardStep ...
<Content>
<TransferLocationTables @ref="refTransfer" LocationId="@VM.SelectedLocation.Id" />
</Content>
...

Now when I navigate to that specific step the component is always "reset" and I have to rearrange the data loaded from the DB again, which kind of defeats the whole idea with those steps and being able to go back and forth between them.

When I go one step back I can see in the debugger that the component still got all the internal data. As soon as I go forward to that step everything is empty again. Also noticed the components overriden OnParametersSet and OnInitializedAsync methods are called each time I navigate there so clearly the whole component is "reinitialized" and thus loosing the data.

So, is this changed behavior due to that when I had all code in the TelerikWizard everything behaved as a single component and thus all data persisted (didn't really leave it), but when I add child components they will automatically reinitialize everytime their step is rendered?

I guess I could persist the individual child components state by saving it to the DB and load it everytime I enter that step again, but I'm hoping there is a simpler soluton that I've overlooked (I'm fairly new with coding Blazor but coded .NET for a long time).

Wizard

asked on 09 May 2024

0 answers

1 view

Using Microsoft's Auto generated OData Connected Service -vs- Calling OData endpoints directly. Which is preferred? (Blazor &.Net 8)

I have a dozen OData Endpoints that provide all my data access. I am currently using the autogenerated OData Connected Service that uses the Microsoft OData Client to access the endpoints from services in my Blazor ServerSide app.

The Telerik Blazor components seem to be geared around using Telerik.DataSource & Telerik.DataSource.Extensions to access the OData Endpoints directly.

Is there a best practice or method for accessing OData Endpoints with Telerik components?

Thanks

General Discussions

Grid

asked on 09 May 2024

0 answers

1 view

[Notification] When the page jumps, the appearance position of the Notification component is reset.

Hi,

When the page jumps, the appearance position of the Notification component is reset.

Calling code：

await AlertController.ShowSuccessNotification("[Complete Work Task]:Success");
NavigationController.Navigate(new WorkViewParam());

Controller code：

public static class AlertController
{
    private static Notification NotificationReference { get; set; }

    public static async Task ShowSuccessNotification(string message = "Success",int closeAfter = 60000,object icon = null,AnimationType animationType = AnimationType.Fade,NotificationHorizontalPosition horizontalPosition = NotificationHorizontalPosition.Center, NotificationVerticalPosition verticalPosition = NotificationVerticalPosition.Top)
    {
        if (NotificationReference != null)
        {
            NotificationReference.Animation = animationType;
            NotificationReference.HorizontalPosition = horizontalPosition;
            NotificationReference.VerticalPosition = verticalPosition;
            NotificationReference.Text = message;
            NotificationReference.CloseAfter = closeAfter;
            NotificationReference.Icon = icon;
            await NotificationReference.ShowSuccess();
        }
    }

    internal static void SetNotificationReference(Notification notificationReference)
    {
        NotificationReference = notificationReference;
    }


}

Notification Component Code(.razor)：

@using Telerik.Blazor
@using Telerik.Blazor.Components

<style>
    .custom-notification-parent {
        position: fixed;
        left: 50%;
        top: 20px;
        transform: translateX(-50%);
        z-index: 99999999;
    }

    .custom-positioned-notifications {
        position: relative;
        flex-wrap: nowrap !important;
    }

    .k-notification {
        box-shadow: var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12));
        font-size: 16px;
    }
</style>

<div class="custom-notification-parent">
    <TelerikNotification @ref="@notification"
                         AnimationType="@Animation"
                         Class="custom-positioned-notifications"
                         VerticalPosition="@VerticalPosition"
                         HorizontalPosition="@HorizontalPosition">
    </TelerikNotification>
</div>

@code {

}

Notification Component Code(.razor.cs)：

publicpartialclassNotification
{
    private TelerikNotification notification { get; set; }
    public NotificationHorizontalPosition HorizontalPosition { get; set; } = NotificationHorizontalPosition.Center;
    public NotificationVerticalPosition VerticalPosition { get; set; } = NotificationVerticalPosition.Top;
    public AnimationType Animation { get; set; }
    publicstring Text { get; set; }
    publicint CloseAfter { get; set; }
    publicobject Icon { get; set; } = null;

    public async Task ShowSuccess()
    {
        notification.Show(new NotificationModel
        {
            Text = Text,
            ThemeColor = ThemeConstants.Notification.ThemeColor.Success,
            CloseAfter = CloseAfter,
            Icon = Icon
        });
    }protected override async Task OnInitializedAsync()
    {
        awaitbase.OnInitializedAsync();
        AlertController.SetNotificationReference(this);
    }
}

Notification

asked on 09 May 2024

0 answers

0 views

[Notification] When the page jumps, the appearance position of the Notification component is reset.

Hi,

When the page jumps, the appearance position of the Notification component is reset.

My project code：

public static async Task ShowSuccessNotification(string message = "Success",int closeAfter = 60000,object icon = null,AnimationType animationType = AnimationType.Fade,NotificationHorizontalPosition horizontalPosition = NotificationHorizontalPosition.Center, NotificationVerticalPosition verticalPosition = NotificationVerticalPosition.Top)
{
    if (NotificationReference != null)
    {
        NotificationReference.Animation = animationType;
        NotificationReference.HorizontalPosition = horizontalPosition;
        NotificationReference.VerticalPosition = verticalPosition;
        NotificationReference.Text = message;
        NotificationReference.CloseAfter = closeAfter;
        NotificationReference.Icon = icon;
        await NotificationReference.ShowSuccess();
    }
}

Notification Component Code(.razor)：

@using Telerik.Blazor
@using Telerik.Blazor.Components

<style>
    .custom-notification-parent {
        position: fixed;
        left: 50%;
        top: 20px;
        transform: translateX(-50%);
        z-index: 99999999;
    }

    .custom-positioned-notifications {
        position: relative;
        flex-wrap: nowrap !important;
    }

    .k-notification {
        box-shadow: var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12));
        font-size: 16px;
    }
</style>

<div class="custom-notification-parent">
    <TelerikNotification @ref="@notification"
                         AnimationType="@Animation"
                         Class="custom-positioned-notifications"
                         VerticalPosition="@VerticalPosition"
                         HorizontalPosition="@HorizontalPosition">
    </TelerikNotification>
</div>

@code {

}

Notification Component Code(.razor.cs)：

public partial class Notification
    {
        private TelerikNotification notification { get; set; }
        public NotificationHorizontalPosition HorizontalPosition { get; set; } = NotificationHorizontalPosition.Center;
        public NotificationVerticalPosition VerticalPosition { get; set; } = NotificationVerticalPosition.Top;
        public AnimationType Animation { get; set; }
        public string Text { get; set; }
        public int CloseAfter { get; set; }
        public object Icon { get; set; } = null;

        public async Task ShowSuccess()
        {
            notification.Show(new NotificationModel
            {
                Text = Text,
                ThemeColor = ThemeConstants.Notification.ThemeColor.Success,
                CloseAfter = CloseAfter,
                Icon = Icon
            });
        }

        public async Task ShowError()
        {
            notification.Show(new NotificationModel
            {
                Text = Text,
                ThemeColor = ThemeConstants.Notification.ThemeColor.Error,
                CloseAfter = CloseAfter,
                Icon = Icon
            });
        }

        public async Task ShowWarning()
        {
            notification.Show(new NotificationModel
            {
                Text = Text,
                ThemeColor = ThemeConstants.Notification.ThemeColor.Warning,
                CloseAfter = CloseAfter,
                Icon = Icon
            });
        }

        public async Task ShowInfo()
        {
            notification.Show(new NotificationModel
            {
                Text = Text,
                ThemeColor = ThemeConstants.Notification.ThemeColor.Info,
                CloseAfter = CloseAfter,
                Icon = Icon
            });
        }

        protected override async Task OnInitializedAsync()
        {
            await base.OnInitializedAsync();
            AlertController.SetNotificationReference(this);
        }
    }

Calling code：

try
{
    var response = await CoreDataSource.Request(bulkRequest);

    await AlertController.ShowSuccessNotification("[Complete Work Task]:Success");
    NavigationController.Navigate(new WorkViewParam());
}
catch (Exception e)
{
    await AlertController.ShowWarningNotification("[Complete Work Task]:" + e.Message);
}

Notification

asked on 09 May 2024

0 answers

5 views

Grid : Default filter on CheckBoxList

Hello,

I have a grid filterable with one column with FilterMenuType.CheckBoxList.

I initialize a defaut filter with OnStateInit which work fine. But when I change the filter by selecting "Select all", nothing is return. It only work when I clear the filter first.

I reproduce the issue here : https://blazorrepl.telerik.com/GokJaiFR56kNGYBW07

Am I doing something wrong with the default filter or is it a bug? I can't find anything related.

Thanks in advance

Checkbox

Filter

Grid

updated question on 08 May 2024

0 answers

5 views

Filtering after a partial Guid value not working on TelerikGrid

We are using a TelerikGrid which allows to filter various properties.

One of our properties is a name of Id, which is of Guid type.

Of course when we give a full Guid Id into the filter, the filter works, but as soon as we put a partial Guid value the filter breaks, because as expected, it cannot parse the given value.

Error: System.FormatException: Unrecognized Guid format.
at System.Guid.GuidResult.SetFailure(ParseFailure failureKind)
at System.Guid.TryParseGuid(ReadOnlySpan`1 guidString, GuidResult& result)
at System.Guid..ctor(String g)

We have tried to convert guid value into string and then pass it into the filter, but it expects a Guid data type.

Is there a way to internally let the guid filter know, that he should expect a string value instead of Guid? Filtering after Guid doesn't really make sense, since user will most of the time just type a part of the full guid Id value.

Thank you for assistence!

Grid

ListView

asked on 08 May 2024

0 answers

5 views

Svg icons in html markup

Hello,

Until recently, I was using font icons in html markup (k-icon, k-i-imagename), but with a recent update to Telerik for Blazor 5.1.1, these do not work anymore. For components which have a Icon property, I simply replace the FontIcon references with SvgIcon.

However, for icons referenced in markup, I'm not able to get the icons to display, as suggested in Changes in Icon Rendering.

Please advise.

Thank you.

General Discussions

asked on 07 May 2024

1 answer

5 views

Customize the expander in TelerikTreeView using TelerikToggleButton

How can I replace the default carat expander of the TelerikTreeView with a customized expander using a TelerikToggleButton? I'd like to toggle between two ISvgIcons as my expand and collapse.

What I'm trying to accomplish is very similar to what's being done in this example with RadTreeView and ToggleButton https://docs.telerik.com/devtools/wpf/controls/radtreeview/styles-and-templates/styling-and-appearance-styling-expander.

ToggleButton

TreeView

answered on 07 May 2024

1 answer

6 views

How to get the rendered dates from a scheduler view

I need to know how I can get all the rendered dates from the scheduler for the current view? I know that I have the data that I provide to the scheduler, but I am really concerned with recurring events. For a recurring appointment that is provided to the scheduler data, it could render up to six unique events. I am trying to get a list of those event.

I tried the OnCellRender event which iterates thru all the days on the scheduler, but there is nothing in the event data to identify if an appointment was rendered on that day or not.

I tried the OnItemRender event which iterates thru the appointments on the view, but for the recurring events it always gives the date in the defined appointment not the actual date that it was rendered.

For a use case, I want to use a Calendar to show a minified version of active days in a month. Since some of the events are recurring, I cannot just use the appointment data. I would like to give it to the scheduler and let the scheduler tell me what days are rendered as a result of the provided appointments.

For this appointment list, I should get the following dates returned:
5/2, 5/9, 5/16, 5/23, 5/30, 6/6, 5/25, 5/26

new SchedulerAppointment
{
	Title = "Vet visit",
	Description = "The cat needs vaccinations and her teeth checked.",
	Start = new DateTime(2024, 5, 2, 11, 30, 0),
	End = new DateTime(2024, 5, 2, 12, 0, 0),
	IsAllDay = false,
	RecurrenceExceptions = new List<DateTime>(),
	RecurrenceId = Guid.NewGuid(),
	RecurrenceRule = "FREQ=WEEKLY;BYDAY=TH"
}

new SchedulerAppointment
{
	Title = "Planning meeting",
	Description = "Kick off the new project.",
	Start = new DateTime(2024, 5, 25, 9, 30, 0),
	End = new DateTime(2024, 5, 25, 12, 45, 0)
}

new SchedulerAppointment
{
	Title = "Vet visit",
	Description = "The cat needs vaccinations and her teeth checked.",
	Start = new DateTime(2024, 5, 26, 11, 30, 0),
	End = new DateTime(2024, 5, 26, 12, 0, 0)
}