Questions on UI for Blazor Forum

0 answers

3 views

Can I get the X/Y Position of a mouse click on the chart area?

I am using a DateTime ChartSeries (ScatterLine). I would like to be able to click on the chart area at any point and get a XY position. Is there any way to do this?

Charts

asked on 15 May 2024

0 answers

4 views

Inline Grid Edit - Backspace Cancels Edit

When editing a text field on a Blazor Grid in inline edit mode, pressing the backspace key will cause the cell edit to cancel, similar to what the escape key does. To reproduce, enter edit mode and press the backspace key, or keep pressing the backspace key until the edit cancels.

This is usual behavior since the backspace key is very often used to clear the text before entering new text and it is unexpected when pressing the key causes the edit to suddenly cancel. It there a way to prevent this unwanted behaviour?

Bryan

Grid

asked on 15 May 2024

0 answers

4 views

Grid Clear filter button feature request

Could there be an option to NOT close the filter dropdown when the clear button is pressed?

I just got a request for this, and their thought is they will have a filter set, then want to click clear and then still pick new items to filter before leaving the dropdown.

Also, watching him on a touch device made it also especially painful.

Grid

asked on 15 May 2024

9 answers

3.4K+ views

Binding to nullable DateTime

Hi,

Is there any way of binding to a nullable DateTime or is there a recommended approach for handling null/empty values. I think this question could apply to any of the controls that bind to a struct or an in-built type like Int/Decimal.

Thanks,

Nick.

DatePicker

answered on 15 May 2024

1 answer

4 views

Add toolbar on bottom of the grid

Hi, the grid toolbar is default located on top of the grid, i would like to place it on bottom (without using a separate element).

This feature is described in documetation (https://docs.telerik.com/blazor-ui/knowledge-base/grid-pager-top-toolbar-bottom) as will be implemented in future version of the library.

Is this planned? there is a release date?

actually i solved with this css, can it be a good workaround?

.k-grid.bottom-toolbar {
    display: flex;
    flex-direction: column-reverse;
}


<TelerikGrid Class="bottom-toolbar" />

Thanks

Grid

answered on 15 May 2024

0 answers

2 views

The chart SVG or canvas suddenly disappears.

Issue: The chart SVG or canvas suddenly disappears.

Reproduction of the Problem

Use the Blazor UI from Telerik trial version.
Perform actions such as hiding the chart line or adding values.

Current Behavior

At seemingly random intervals, the chart SVG or canvas disappears. This occurs when performing actions like hiding the chart line or adding values. The issue does not occur consistently or under obvious conditions.

Expected/Desired Behavior

The chart should behave as expected and not disappear unexpectedly.

Environment

Telerik UI for Blazor version: 5.1.1 (Trial)
Browser: All
App Type: Server

Video: https://www.veed.io/view/7782882d-6522-4fa6-a9df-8413695486ed?panel=share

<div style="width: 1100px; height: 500px;" class="graphBorder shadow">
    <TelerikChart Height="95%" Transitions="false">   
        <ChartSeriesItems>
            @foreach(var item in ChartData)
            {
                <ChartSeries
                    Visible="@item.ShowLine"
                    Style="ChartSeriesStyle.Smooth"
                    Type="ChartSeriesType.ScatterLine"
                    Name="@item.LineName" Data="@item.Data"
                    Color="@item.Color"
                    XField="@nameof(Data.X)" YField="@nameof(Data.Y)">
                    <ChartSeriesMarkers Size="0"/>
                    <ChartSeriesTooltip Visible="true"/>
                </ChartSeries>
            }
        </ChartSeriesItems>

        <ChartTitle Text="TestChart"></ChartTitle>

        <ChartXAxes>
            <ChartXAxis Type="date"
                        BaseUnit="minutes"
                        MajorUnit="30"
                        Min="@(new TimeOnly(0,0,0))"
                        Max="@(new TimeOnly(3,0,0))">
                <ChartXAxisTitle Text="TestChart"></ChartXAxisTitle>
                <ChartXAxisLabels Format="{0:HH:mm}"></ChartXAxisLabels>
            </ChartXAxis>
        </ChartXAxes>

        <ChartYAxes >
            <ChartYAxis Max="@(100 + 5)" Min="0" MajorUnit="10">
                <ChartYAxisLabels/>
                <ChartYAxisTitle Text="TestChart"></ChartYAxisTitle>
            </ChartYAxis>
        </ChartYAxes>

        <ChartLegend Visible="false"/>

    </TelerikChart>
     <div class="Legend d-flex justify-content-sm-around flex-row">
            @foreach(var item in ChartData)
            {
                <div>
                    <TelerikCheckBox Id="myCheckBox" @bind-Value="@item.ShowLine"/>
                    <label for="myCheckBox">@item.LineName</label>
                </div>
            }
        </div>
</div>

@code {
    public List<GraphData> ChartData = new()
    {
        new GraphData
        {
            LineName = "Stroom 1",
            ShowLine = true,
            Color = "green",
            MinDate = new TimeOnly(0, 0),
            TimeBetweenMinAndMax = new TimeSpan(4, 0, 0),
            Data = new List<Data>
            {
                new() { X = new TimeOnly(0, 0), Y = 10 },
                new() { X = new TimeOnly(0, 15), Y = 20 },
                new() { X = new TimeOnly(0, 30), Y = 12 },
                new() { X = new TimeOnly(0, 45), Y = 3 },
                new() { X = new TimeOnly(1, 0), Y = 10 },
                new() { X = new TimeOnly(1, 15), Y = 12 },
                new() { X = new TimeOnly(1, 30), Y = 14 },
                new() { X = new TimeOnly(1, 45), Y = 15 },
                new() { X = new TimeOnly(2, 0), Y = 16 },
                new() { X = new TimeOnly(2, 15), Y = 40 }
            }
        }
    };
}

Charts

asked on 15 May 2024

1 answer

9 views

Donut chart and gap/spacing between items

I have a donut with 2 ChartSeries.

For the inner circle I have tried to separate the different data items with a empty space. But I have no idea how it works. Could somebody help?

<ChartSeries Type="ChartSeriesType.Donut" Data="@GridDataDonutProjectName"
             Field="@nameof(ProjectOverviewVm.Hours)" 
CategoryField="@nameof(ProjectOverviewVm.ProjectName)" Gap="0.8" Spacing="0.8" Margin="5" >

Because of the Margin there is some space between the 2 donuts series

But how can I add some empty space at the arrows in this picture. I have tried something with spacing and gap but I'm doing something wrong

Charts

answered on 15 May 2024

1 answer

12 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

answered on 14 May 2024

1 answer

7 views

Add Refresh icon on grid status bar

In Kendo UI for ASP.NET MVC / JQuery the Grid component has the option to show a refresh icon on bottom bar / pager.

In the blazor version i cannot see it.

Please add a builtin refresh icon on grid as done in other libraries.

Grid

answered on 14 May 2024

1 answer

6 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