Questions on UI for Blazor Forum

1 answer

18 views

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

answered on 14 May 2024

1 answer

24 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.

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

answered on 14 May 2024

0 answers

20 views

Telerik Drawer - Expand / Close in Mini Mode with @onmouseenter / @onmouseleave ?

When using Mini Mode for the Telerik Drawer, is there a way to make the Telerik Drawer expand/close with the @onmouseenter and @onmouseleave events?

I have the following layout...

<TelerikDrawer Data="@DrawerItems"
			   MiniMode="true"
			   Mode="@DrawerMode.Push"
			   SelectedItemChanged="((DrawerItem item) => SelectedItemChangedHandler(item))"
			   @ref="@DrawerRef"
			   Class="my-drawer">
	<ItemTemplate Context="item">
		<span class="icon-container drawer-tooltip-target" title=@item.Text>
			<TelerikSvgIcon Icon="@item.Icon" Class="drawer-icon" />
		</span>
		<span class="k-item-text">@item.Text</span>
	</ItemTemplate>
	<DrawerContent>
		<div class="content">
			@Body
		</div>
	</DrawerContent>
</TelerikDrawer>

I tried the following...

<TelerikDrawer Data="@DrawerItems"
			   MiniMode="true"
			   Mode="@DrawerMode.Push"
			   SelectedItemChanged="((DrawerItem item) => SelectedItemChangedHandler(item))"
			   @ref="@DrawerRef"
			   Class="my-drawer">
	<ItemTemplate Context="item">
		<div @onmouseenter="() => DrawerRef.ExpandAsync()"
			 @onmouseleave="() => DrawerRef.CollapseAsync()">
			<span class="icon-container drawer-tooltip-target" title=@item.Text>
				<TelerikSvgIcon Icon="@item.Icon" Class="drawer-icon" />
			</span>
			<span class="k-item-text">@item.Text</span>
		</div>
	</ItemTemplate>
	<DrawerContent>
		<div class="content">
			@Body
		</div>
	</DrawerContent>
</TelerikDrawer>

But that affects the layout as shown below, and does not appear to fully wrap the Drawer which causes the expand/collapse to be bit twitchy.

It also appears that I'm unable to attach @onmouse events to the <ItemTemplate> tag ( I get an unrecognized attribute error).

Any ideas?

Drawer

updated question on 13 May 2024

1 answer

27 views

Changing the color / opacity of the legend label for a hidden chart series

I have a chart where clicking the legend for a series will toggle its visibility. However, when the series is hidden, the legend label gets becomes a very light grey, and some users struggle to see it

I can't find any particular property on any of the chart related elements that seems to be able to change the font/colour/opacity settings in that scenario.

Is there anything I've missed?

Charts

answered on 13 May 2024

1 answer

24 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

answered on 13 May 2024

0 answers

29 views

NumericTextBox setting to keep incrementing/decrementing when mouse held down on spin buttons

I'm looking at the demo for NumericTextBox, when I hold mouse button the number only increments once.

i/ is there any plans for a setting to allow the value to keep incrementing/decrementing when the mouse is held down? This would be more useful in some instances rather than clicking hundreds of times. I know you can type but some users want ability to only use mouse.

ii/ related, is there any plans for a setting to control acceleration of how quickly the value increments/decrements based on how long mouse is held for? Eg if mouse is held longer than say 5 seconds then value changes at faster rate.

NumericTextBox

asked on 13 May 2024

1 answer

29 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

answered on 13 May 2024

0 answers

31 views

Telerik Blazor Grid Inline Editing for the First Five Rows Triggered by External Button

Hello, I'm currently working on implementing inline editing for the first five rows of a Telerik Grid for blazor upon a button click. Is it possible to achieve this, and if so, could you please provide guidance on how to do it? The button triggering the inline editing functionality is placed outside the grid.

Thank you

Button

Grid

asked on 10 May 2024

1 answer

21 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

answered on 10 May 2024

0 answers

17 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