Telerik Forums
UI for Blazor Forum
1 answer
7 views

Hi,

I'm implementing "Reset to Default" functionality that needs to reset any moved/resized columns to the original blazor code.

I create my columns/grid using

<TelerikGrid @ref="TelerikGridInstance" Data="@GridItems" TotalCount="@GridItems.Count" @bind-SelectedItems="@SelectedItems"
                Reorderable="@Resetting" PageSize="30" Height="@Height" RowHeight="28" Resizable="true" 
                OnStateChanged="OnStateChangedHandler"
                SelectionMode="GridSelectionMode.Multiple" OnRowDoubleClick="OnRowDoubleClick" OnRowClick="OnRowClick"
                ScrollMode="@(VirtualMode ? GridScrollMode.Virtual : GridScrollMode.Scrollable)"
                OnRowContextMenu="OnRowContextMenu">
    <GridColumns>
        @foreach (var c in Columns)
        {
            if(ColumnVisible(c) == false){
                continue;
            }
            <GridColumn Width="@width" Title="@c.Label">
                <HeaderTemplate>....</HeaderTemplate>
            </GridColumn>
            <Template>
                ....
            </Template>
        }
    </GridColumns>
</TelerikGrid>

 

I tried temporarily settings columns to nothing and then rerendering, but they get restored in the previous state.   I could go down the path of destroying the component completely and then having to recreate everything but thats a pretty expensive task and my hope is there is a better way to do this.

Or a way to set the column order/widths in code? Since I do know the original order/widths

 

TIA

Hristian Stefanov
Telerik team
 answered on 15 Oct 2021
1 answer
5 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

Stamo Gochev
Telerik team
 answered on 15 Oct 2021
1 answer
10 views
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?
Dimo
Telerik team
 answered on 14 Oct 2021
0 answers
2 views

When the component is intialized, I need the inputs to display with the red (invalid) classes and such.

The validation is in place as when I start to enter, then backspace back to empty it TURNS red, but I need it to be red by default when the form initializes.

How do I do this using <TerlerikForm>

billy
Top achievements
Rank 1
 asked on 14 Oct 2021
1 answer
14 views

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; }
    }
}

Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
 updated answer on 14 Oct 2021
0 answers
2 views

I have an EditForm with a DropDownList (among other things) and when my OnValidSubmit fires I do what I need to do and then I want to clear the controls so the user can select different values and submit again. The problem is the drop down doesn't clear when I set the selected value to null. I wrote a test app to demonstrate it. When the app loads nothing is selected. If you select the item in the drop down and then click the "clear selection" button it doesn't clear. What do I need to do to make that work?

 

@page "/"

<br />

<TelerikButton OnClick="@ClearSelection">Clear selection</TelerikButton>
<TelerikDropDownList Data="@data" @bind-Value="selectedValue" />

@code {
    List<string> data = new() { "selection" };
    string selectedValue;

    void ClearSelection()
    {
        // This does not cause the drop down to deselect the selected item
        selectedValue = null;
        StateHasChanged();
    }
}
Doug
Top achievements
Rank 1
Iron
Veteran
 asked on 13 Oct 2021
1 answer
7 views

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

 

Svetoslav Dimitrov
Telerik team
 answered on 13 Oct 2021
4 answers
12 views

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

 

Emil
Top achievements
Rank 1
Iron
 answered on 13 Oct 2021
0 answers
5 views

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


 

 

 

 

Claudio
Top achievements
Rank 1
Iron
Veteran
Iron
 updated question on 12 Oct 2021
0 answers
6 views

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

 

 

W.
Top achievements
Rank 1
 updated question on 12 Oct 2021
Top users last month
JG
Top achievements
Rank 2
Iron
ixen
Top achievements
Rank 1
Iron
Iron
Iron
Jana
Top achievements
Rank 2
Iron
Iron
Iron
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Roland
Top achievements
Rank 1
Veteran
Iron