Questions on UI for Blazor Forum

1 answer

840 views

How do I set the ChartValueAxisLabelsRotation Angle to auto? It has the same description as the ChartCategoryAxisLabelsRotation Angle, but instead of taking "@object" the ValueAxis takes "Double?"?

Description for both ChartCategoryAxisLabelsRotation and ChartValueAxisLabelsRotation Angle:

The rotation angle of the labels. By default the labels are not rotated. Can be set to "auto" if the axis is horizontal in which case the labels will be rotated only if the slot size is not sufficient for the entire labels.

Error:

Cannot convert string to double?

Code:

<TelerikChart>
    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Column" Name="Product 1" Data="@series1Data">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Column" Name="Product 2" Data="@series2Data">
        </ChartSeries>
    </ChartSeriesItems>

<ChartValueAxes>
        <ChartValueAxis>
            <ChartValueAxisLabels>
                <ChartValueAxisLabelsRotation Angle="@AutoLabelsRotation" />
            </ChartValueAxisLabels>
        </ChartValueAxis>
    </ChartValueAxes>

    <ChartCategoryAxes AxisCrossingValue="crossingPoints">
        <ChartCategoryAxis Categories="@xAxisItems">
            <ChartCategoryAxisLabels>
                <ChartCategoryAxisLabelsRotation Angle="@AutoLabelsRotation" />
            </ChartCategoryAxisLabels>
        </ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartTitle Text="Quarterly revenue per product"></ChartTitle>
</TelerikChart>

@code {
    string AutoLabelsRotation = "auto";

    public List<object> series1Data = new List<object>() { 10, 2, 5, 6, 8 };
    public List<object> series2Data = new List<object>() { 5, 8, 2, 7, 6 };
    public string[] xAxisItems = new string[5];

    protected override void OnInitialized()
    {
        for (int i = 0; i < 5; i++)
        {
            xAxisItems[i] = $"looooong label {i + 1}";
        }
        base.OnInitialized();
    }
}

Thanks
Regards,
Nikolas

Charts

answered on 15 Oct 2021

1 answer

1.2K+ views

Full FilePath from Upload

My customers currently have a tool where they identify documents used to support their conclusion. In it, they want to store a full file path. I am attempting to repurpose the Upload component, while I eagerly anticipate the FileSelect component in 2.30.0. I can get the file name. I have to assume that the component knows the original path, otherwise, how would it know where to grab the file from. Is there a way to get that full path?

Upload

answered on 14 Oct 2021

1 answer

608 views

Drag & Drop between grids doesn't work when one Grid Starts out Empty

I am not able to drag and drop between grids when one of the grids starts out with an empty list of data. I have used your code from the example and altered it to make one grid empty to start out with. When I try to drag a new item into that grid I just get the "not allowed" tooltip and nothing will drop.

@page "/DragDropTest" 
@layout AuthorizedMainLayout

@* Drag a row from one Grid and Drop it in the other *@ 

<TelerikGrid Data="@MyData" Height="400px"
             Pageable="true" Sortable="true"
             FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
             Resizable="true" Reorderable="true"
             @ref="@FirstGrid"
             RowDraggable="true"
             OnRowDrop="@((GridRowDropEventArgs<SampleData> args) => OnRowDropHandler(args))">
    <GridSettings>
        <GridRowDraggableSettings DragClueField="@nameof(SampleData.Name)"></GridRowDraggableSettings>
    </GridSettings>
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

<TelerikGrid Data="@MySecondGridData" Height="400px"
             Pageable="true"
             Resizable="true" 
             Reorderable="true"
             RowDraggable="true"
             OnRowDrop="@((GridRowDropEventArgs<SampleData> args) => OnSecondGridRowDropHandler(args))">
    <GridSettings>
        <GridRowDraggableSettings DragClueField="@nameof(SampleData.Name)"></GridRowDraggableSettings>
    </GridSettings>
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@code {
    TelerikGrid<SampleData> FirstGrid { get; set; }

    private void OnRowDropHandler(GridRowDropEventArgs<SampleData> args)
    {
        //The data manipulations in this example are to showcase a basic scenario.
        //In your application you should implement them as per the needs of the project.

        MyData.Remove(args.Item);
        InsertItem(args);
    }

    private void OnSecondGridRowDropHandler(GridRowDropEventArgs<SampleData> args)
    {
        //The data manipulations in this example are to showcase a basic scenario.
        //In your application you should implement them as per the needs of the project.

        MySecondGridData.Remove(args.Item);
        InsertItem(args);
    }

    private void InsertItem(GridRowDropEventArgs<SampleData> args)
    {
        var destinationData = args.DestinationGrid == FirstGrid ? MyData : MySecondGridData;

        var destinationIndex = 0;

        if (args.DestinationItem != null)
        {
            destinationIndex = destinationData.IndexOf(args.DestinationItem);
            if (args.DropPosition == GridRowDropPosition.After)
            {
                destinationIndex += 1;
            }
        }

        destinationData.InsertRange(destinationIndex, args.Items);
    }

    public List<SampleData> MySecondGridData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x + 2,
        Name = "name  " + x + 2,
        Team = "team " + x % 3,
        HireDate = DateTime.Now.AddDays(-x * 2).Date
    }).ToList();

    public List<SampleData> MyData = new(); // Enumerable.Range(1, 30).Select(x => new SampleData
    //{
    //    Id = x,
    //    Name = "name " + x,
    //    Team = "team " + x % 5,
    //    HireDate = DateTime.Now.AddDays(-x).Date
    //}).ToList();

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Grid

updated answer on 14 Oct 2021

1 answer

1.2K+ views

Specific TelerikGrid Header alignment: how to?

I have a TelerikGrid component with some columns.

I need to center the header text for one of these.

I read some solutions adding css, but it apply to all columns, or it select the column by position.

I need to apply the align style only for specific columns and not reference it by position.

It is possible?

I also tried HeaderTemplate but to center align a column i need to access the parent element with .k-link and the header template is nested inside it.

How to solve?

Thanks

Grid

answered on 13 Oct 2021

4 answers

231 views

ColorField on Candlestick

Hello,

Is there a way to make the candlestick chart always use the colorfield even if the value is down?

In my solution it dont matter if the value is up or down, if the colorfield is defined it should always us that.

I can't use the Color and DownColor, since the colorfield can be different throughout the series.

As displayed below all the "Down" values are displayed as black, when it should be pink.

Best Regards,

Emil

Charts

answered on 13 Oct 2021

0 answers

156 views

Grid column width not respected if grid contains hidden columns

In the documentation is stated:

When only some column widths are set and the cumulative width of columns with set widths is less than the available Grid width, the widths of the columns with a set width are respected and the remaining width is distributed evenly between the other columns.

https://docs.telerik.com/blazor-ui/components/grid/columns/width

This behaviour work well if the columns in the grid are all visibles.

If there are some invisible columns (property Visible="false") the remaining width is NOT distributed between the other columns (columns without Width property).

Example1:

Col1 Width="10px"

Col2 Width="10px"

Col3 (without width property)

Col4 Width="10px"

in this situation Col3 is sized correctly based on the remaing width.

Example2:

Col1 Width="10px"

Col2 Width="10px" Visible="false"

Col3 (without width property)

Col4 Width="10px"

in this situation Col3 is sized based on the remaing width BUT also Col4 width is changed!

Any suggestion?

Thanks

Grid

updated question on 12 Oct 2021

0 answers

170 views

Allow Empty Emailaddress

SOLVED

Hi,

i've a grid where my email field isn't shown (must not be) , when editting the popup cannot be save due an error of a invalid EmailAddress.

Field isn't requierd, so an empty field should possible , i thought.

Model:

[MaxLength(150)]
[EmailAddress]
public string emailaddress { get; set; }

i used : https://demos.telerik.com/blazor-ui/grid/custom-editor as starting point

database wasn't correct

Grid

ValidationMessage

ValidationSummary

updated question on 12 Oct 2021

4 answers

707 views

Checkbox selection not working every time

Hello!

In my example grids, the checkbox selection does not work every time.

- If i click in a row directly on a checkbox, the checkbox is not checked - only on the second click
- after the checkbox is onced checked, a new click directly changes the state instead of having a second required click
- row clicks sometimes are not changing the checkbox state, sometimes they do

It behaves very strange and not like on your demos pages.
My grids are not having anything fancy (like jo, the GridCheckboxColumn and the SelectionMode)

Anything that i can try to solve it? ...
Niklas

Grid

answered on 11 Oct 2021

0 answers

81 views

GridCommandButton to have same set of properties as TelerikButton

like Hidden (but not just Enabled)

Grid

asked on 11 Oct 2021

2 answers

276 views

TelerikNumericTextBox trailing zeros decimal numbers

Hello, how can I remove the trailing zeros from the editor? Is possible to use the same format (###,##0.00###) when editing the value? right now when the value of the field is read from the database (is a decimal 18,5) and the value is for example 1,00000 (just one with 5 zero after decimal separator) then the textbox is formatted right (1,00) but when editing it is 1,00000. I hope the question was clear, sorry.

thank you

<TelerikNumericTextBox Width="100%" @bind-Value="docum.rigadoc.prezzo" Class="rightAlign" Decimals="5" Format="###,##0.00### €" Min="0" Max="99999999"></TelerikNumericTextBox>

NumericTextBox

answered on 10 Oct 2021