Questions on UI for Blazor Forum

1 answer

100 views

How to put bart chart labels on top.

We have a design where bar chart labels are on top. See the attached image.

Charts

answered on 25 Oct 2023

1 answer

268 views

Removing borders on Stacked Chart

Hello I have a stacked chart: https://blazorrepl.telerik.com/mdapkbvq40X63oHt59

Is it possible to remove the strokes on the colored boxes in the chart so it looks more like the image attached?

I can remove them with a css selector, but it looks like this and obviously isn't a great selector

svg g > g > g > g > g > g > g path {
stroke: none;
}

Also, is it possible to put a border-radius around the whole column?

Charts

Styling

answered on 25 Oct 2023

1 answer

96 views

Clearing Timepicker leaves "AM" and borders control in red

When clearing a nullable DateTime-bound TimePicker control (by highlighting the value and hitting delete), why does the control leave the "AM" and also border itself in red?

Is there a way configure the TimePicker control so it doesn't do this?

TimePicker

answered on 24 Oct 2023

0 answers

86 views

TelerikSplitter elements getting tabindex="-1" attribute while loading

In a TelerikSplitter when I click a button that causes data to load, every element at that level and lower gets the attribute tabindex="-1" for a split second and then the property is removed. Is there any function of the Splitter or Loader/LoaderContainer that would do this? This causes explicitly set tabindex attributes to be completely removed.

Update/Solution:

I determined that this was the result of an intermediate Blazor component calling some JavaScript to disable tabbing on load. This issue is unrelated to the Telerik LoaderContainer.

updated question on 23 Oct 2023

1 answer

578 views

How to disable and hide the Select Files and Drag and Drop part of the PDFViewer component?

Hi,

I want to disable and hide the marked part of the PDFViewer component.

How can i do that?

Thanks,

Ben

FileSelect

PDFViewer

answered on 23 Oct 2023

1 answer

104 views

Are there any options to customise ChartSeries visuals?

Hi

Are there any options to customise ChartSeries visuals beyond colour? Our use-case involves charts rendered with series from multiple sources. We would like to differentiate the sources at a glance. We would prefer not to add more text-based labels.

Things we have tried:

ChartSeriesOverlay does not create much visual impact for our colour scheme.
linear-gradient etc in the Colour parameter causes a black coloured series
SVG patterns see REPL

Thank you

Mark

Charts

answered on 23 Oct 2023

1 answer

197 views

Histogram with Blazor Charts

Hi,

I would like to create a Histogram Chart with components for Blazor like illustrated below :

Then Stacked like that as next step

I tried Column Chart but I do not find a way to stick the graduation with the start and end of every bar like it was possible with wpf :

WPF ChartView - Histogram - Telerik UI for WPF

Thanks

Charts

answered on 20 Oct 2023

0 answers

163 views

Can you add target markers to a column ChartSeries?

Hi

Can you add target markers to a column ChartSeries? Something a bit like this:

Bar Chart Target Markers - Excel University

We have been able to use a 0 width line series and their markers in some instances, REPL. But this can quickly breakdown with multiple columns per category or grouped series.
We have been able to hijack a chart series label. But this breaks down on stacked series.

Thanks

Mark

Charts

asked on 20 Oct 2023

1 answer

186 views

Error Header Gridcolumn on click

I have a problem in the Grid, I have created a calculated field that for the example is the calculated date, this field does not belong to the TelerikGrid Data model, when clicking on the column header of said field an error occurs. It is very necessary to perform calculations and display them in a column, the data in my project is generated from a dbcontext, so I do not want to alter the SQL tables that I have been managing. There is a way to avoid this error, the error occurs even when removing the filter from the column, please, if someone has a solution it would help me out of trouble.

https://blazorrepl.telerik.com/GRPYFhvp14M25Tft34

@page "/Grid"

@using Telerik.Blazor.Services
@using Telerik.FontIcons;
@using Telerik.Blazor.Components.Grid

<TelerikGrid Data="@GridData" Height="550px" FilterMode="@GridFilterMode.FilterMenu"
                         Sortable="true" Pageable="true" PageSize="20" Groupable="true" Resizable="true" Reorderable="true">
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" Title="Name"/>
        <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
        <GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:D}" />
        <GridColumn Field="@nameof(Product.Discontinued)" />
        <GridColumn Field="Date Calculated (NO PRESENT IN MODEL)" Width="220px" DisplayFormat="{0:dddd, dd MMM yyyy}">
                        <Template>
                            @{
                                var fecha = (Product)context;
                                double FechaCalculada;
                                TimeSpan diferencia = DateTime.Today - fecha.Released;
                                double difDouble = 5+diferencia.TotalDays / 365.25; // considerando años bisiestos
                                FechaCalculada = Math.Round(difDouble, 2);
                            }
                            <TelerikNumericTextBox Decimals="2" @bind-Value=@FechaCalculada DebounceDelay="200" Enabled=false Arrows="false" />
                        </Template>
                    </GridColumn>
    </GridColumns>                    
</TelerikGrid>



@code {
    private List<Product> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = new List<Product>();

        var rnd = new Random();

        for (int i = 1; i <= 30; i++)
        {
            GridData.Add(new Product
                {
                    Id = i,
                    Name = "Product name " + i,
                    Price = (decimal)(rnd.Next(1, 50) * 3.14),
                    Released = DateTime.Now.AddDays(-rnd.Next(1, 365)).AddYears(-rnd.Next(1, 10)).Date,
                    Discontinued = i % 5 == 0
                });

        }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
        public DateTime Released { get; set; }
        public bool Discontinued { get; set; }
    }
}