Questions on UI for Blazor Forum

3 answers

961 views

Drawer Separator

Hi,

I'm trying to add a Separator to a TelerikDrawer but it doesn't work as is expected: no separator is added. Instead, an common item is shown that when clicked, an exception is thrown.

I'm using the default DrawerItem class definition. Here is my code:

public class DrawerItem

{

public string Text { get; set; }

public string Url { get; set; }

public string Icon { get; set; }

public bool IsSeparator { get; set; }

}

/* Items */

public List<DrawerItem> NavigablePages { get; set; } = new List<DrawerItem>

{

new DrawerItem { Text = "System Overview", Url = Constants.Navigation.HOME, Icon = "toggle-full-screen-mode" },

new DrawerItem { IsSeparator = true, Url = string.Empty }, // --> don't work

new DrawerItem { Text = "Add Container", Url = Constants.Navigation.CONTAINERFORM, Icon = "plus-outline" },

new DrawerItem { Text = "Show App Logs", Url = Constants.Navigation.LOGMONITOR, Icon = "paste-plain-text"},

new DrawerItem { Text = "Options", Url = Constants.Navigation.OPTIONS, Icon = "gear"}

};

/* Drawer component definition */

<TelerikDrawer Data="@NavigablePages" @bind-Expanded="@DrawerExpanded" MiniMode="true" Mode="@DrawerMode.Push"

@ref="@DrawerRef" @bind-SelectedItem="@SelectedItem" Width="auto">

<Template>

<div class="k-drawer-items">

<ul>

@foreach (var item in NavigablePages)

{

@* stop the propagation of the onclick event to prevent the drawer from collapsing *@

@* Use onclick to handle manual item selection and toggle the selected class *@

<li @onclick:stopPropagation

@onclick="@(() => SelectAndNavigate(item))"

class="k-drawer-item @GetSelectedItemClass(item)"

style="white-space:nowrap">

<span class="k-icon k-i-@item.Icon" style="margin-right: 8px;"></span>

@if (DrawerExpanded)

{

<span class="k-item-text">@item.Text</span>

}

</li>

}

</ul>

</div>

</Template>

<Content>

@Body

</Content>

</TelerikDrawer>

Any suggestion on what's going on?

Thanks.
Twain.

Drawer

answered on 18 Feb 2021

3 answers

389 views

[Solved] Padding chart line area

Hello!
Please help with border padding for chart area.
Min and Max for X-axe getting automatically by code.
Need some padding to correct display first and last x-values

Charts

answered on 18 Feb 2021

4 answers

699 views

DropDownList OnButtonClick Event

Hi.
I want to populate a DropDownList (or a Combobox) everytime the associated button is pressed. I've tried with combobox "OnRead" event but it fires only the first time after the component is created. Any suggestion how to acchieve this?
Thanks.

Twain.

PD: it's a shame that the components have so few events exposed. This implies constantly looking for hacks and workarounds to reach the expected result.

DropDownList

answered on 17 Feb 2021

6 answers

528 views

Grid grouping not working in Chrome

I have a grid with multiple columns and grouping works fine in full screen mode in both Firefox and Chrome.

But when I open my application in Chrome and use the Chrome DevTools to set the window size to that of an iPad for example, I can't drag the columns to the grouping area anymore. So no grouping possible anymore.

Is that a known issue? I couldn't find similar threads for this issue with blazor.

Thanks in advance!

Grid

answered on 17 Feb 2021

1 answer

176 views

Set grid's groupable status

On my own machine in visual studio this works, but it only works sometimes on the web server.

Essentially when the grid loads the first time, I set it as non groupable because the items in the grid at that time do not need to be grouped, there are only ever a few items at this stage.

Depending on other events that happen, the amount of data in the grid changes and I change it to groupable.

I do this with a Boolean such as in the attached file.

Depending on the boolean, I change it to true or false.

This is working fine on my own machine in Visual Studio, and it seems to work fine on the web server on the first load when the web app wakes up for the first time, but doing a page refresh then it doesn't work anymore. Seems like having a slight delay allows it to set some stuff maybe, but on refresh it's too quick?

I get the drag and drop bar but I can't drag any fields, it's like all fields have been set to non groupable.

Maybe I am trying to be too fancy changing up the grouping ability?

Grid

answered on 17 Feb 2021

2 answers

1.0K+ views

Alternate column color

Hi,

How could I get alternate COLUMN colors? Note, not alternate ROW colors.

In actual fact, I don't just want alternating column colors, I want column 1 and 2 to have the same color, 3 and 4 a different color, then 5 and 6 the same as 1 and 2 and so on. Also, I want a cell to be completely filled with the particular color so I figure I have to work on the <td> level.

I thought I had it by hooking the OnCellRender event but my logic falls apart when you start clicking on the grid! None of the properties on the GridCellRenderEventArgs object tells you which column's cell is being rendered. The Item property contains the entire row context. Unfortunately the cell value does not contain any information either in my case to identify the column of it's index.

Thanks,

Gerhard

Grid

answered on 17 Feb 2021

5 answers

101 views

[Solved] Allow Selecting AM/PM by pressing A or B on keyboard

When typing in time in the timepicker (enter hours,enter mins, arrow up/down for AM/PM) it would be nice if I could select AM or PM by pressing A or P on the keyboard also.

Is there anyway this can be added?

TimePicker

answered on 16 Feb 2021

1 answer

161 views

Grid inside a component, selection event issue

Hi there, I would put a grid inside a component and fire a component's EventCallback when a row of the grid is selected, however seems that there is an issue when you try to call an EventCallback (async) from the grid onselecteditemchanged event (sync) as noted here:
https://docs.telerik.com/blazor-ui/components/grid/selection/single

"// note: an async operation here can break the selection and may not even render its results in the view// for async operations, use the OnRowClick event"

How could I achieve that?

Grid