Questions on UI for Blazor Forum

1 answer

1.4K+ views

Grid Performance

We are looking to implement the grid to replace agGrid in a situation where the users are accustomed to some patterns. We are using server-side Blazor and have reports that may have 60k rows. Our preference is not to use paging, and since we have grouping, it seems that virtual scrolling is not an option.

Right now we struggle to load as many as 10k rows, even without grouping. I get an error: WebSocket closed with error 1006.

We are not doing any updates in the grid, so it would seem that if we could turn off anything to make it read only (we do filter and sort it, but don't update any cells) then that might lighten the load.

Any ideas about grid or column attributes we could set? Or any other ideas?

Grid

answered on 23 Oct 2021

7 answers

1.7K+ views

[Solved] Horizontal Orientation

Hi:

With the new Form component, when the orientation is set to horizontal, is that only for the FormItems?

I would like to arrange my form so that FormItems and FormButtons are all laid out horizontally. The attached screen shot is what I am looking to achieve.

Thanks

-marc

Form

answered on 22 Oct 2021

1 answer

618 views

Display FormsButtons at the Top of the Form

I would like to change the location of the formbuttons.

Instead of having them at the bottom of the form, I would like them to be at the top of the form.

How can I accomplish this? Regardless of where the <FormButtons> Element is placed, the buttons always display under the form.

Button

Form

answered on 22 Oct 2021

1 answer

979 views

Change Dialog button text

Can I change the dialog box 'OK' and 'Cancel' button text to 'Yes' and 'No'

Dialog

answered on 20 Oct 2021

2 answers

357 views

Predefine dialogs don't show buttons text

Hi all.
I've a simple confirm dialogue routine. I follow the examples in the documentation.

The code looks like:

        protected async void OnNHibernateLogsChange()
        {
            bool confirm = await ActivateFilterConfirm(); // ask about

            if (confirm || _showNHibernateLogs == false)
            {
                LoggerConfig.FilterNHibernateLogs = !_showNHibernateLogs;
                string msg = _showNHibernateLogs ? L10n["NM-SHOWNHIBLOGS"] : L10n["NM-HIDENHIBLOGS"];
                NotificationManager.ShowInfo(msg);
            }
            else
            {
                _showNHibernateLogs = !_showNHibernateLogs;
            }
        }

The problem is that the dialog box buttons don't have a text. It is not an styles issue. I've inspected and the generated div is empty.

Any ideas on what is going on?
Thanks.

Dialog

answered on 19 Oct 2021

1 answer

182 views

I Need Validation (Red Input Styles) To Show Up OnInitialized()

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>

Form

ValidationMessage

answered on 18 Oct 2021

1 answer

990 views

Programmatically set/reset columns to original definitions?

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

Grid

answered on 15 Oct 2021

1 answer

948 views

[Solved] Value Axis Label Rotation auto

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.3K+ views

[Solved] 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

683 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