Questions on UI for Blazor Forum

1 answer

167 views

TelerikRootComponent - List of Components that depend on it?

Is there a list somewhere of the Telerik Blazor Components that depend or need the TelerikRootComponent... because a lot of them work without it... the TelerikButton for example can work without it... a definitive list would be nice, thanks in advance!

General Discussions

answered on 08 Dec 2023

1 answer

111 views

When will popup location be fixed?

Telerik + dotnet 8 is really annoying.

You cant mark a component as interactive, because that requires a telerikrootcomponent, and you cant put a telerikrootcomponent at the top level because then the specific component cant find the telerikrootcomponent.

And the docs https://docs.telerik.com/blazor-ui/troubleshooting/general-issues#wrong-popup-position provide no workaround at all.

General Discussions

answered on 07 Dec 2023

1 answer

168 views

Telerik UI Blazor demo

Does it work in .NET8? I just installed trial version and it show 5.01 version and do not create new Blazor server app.

General Discussions

answered on 07 Dec 2023

1 answer

167 views

Access nuget packages

I tried to install nuget packages in my new test application and set VS for accessing nuget.telerik.com. After several attempts I was prompt for credentials. Nothing happend, then in second try it works. After that I never entered list of telerik packages with comment Error 401. I tried everything, reset credentials in window credential manager. Even changed my mail trying to reset all but nothing happen. Obviously my credential to enter my telerik account is valid as I am logged in but nuget packages are not available to me.

General Discussions

answered on 07 Dec 2023

1 answer

92 views

DataGrid row removal causes re-initialization of cell controls

Hi,

I am trying to setup the ability for users to delete a row in a <TelerikGrid>

<TelerikGrid 
                Data="@(Results)"
                EnableLoaderContainer="true"
                Pageable="true"
                Sortable="true"
                Resizable="true"
                FilterMode="GridFilterMode.FilterMenu"
                PageSize="15"
                SelectionMode="GridSelectionMode.Multiple"
                SortMode="@SortMode.Single"
                Height="70vh"
                @ref="@GridRef"
            >

<GridColumn Title="Delete" Width="5vh">
                        <Template>
                            @if (context is MyModel model)
                            {
                            <div @key="@model.UniqueId">
                                <div class="icon-container" @onclick="@(() => HandleDeleteClicked(model))">
                                    <i class="far fa-trash font-icon-large"></i>
                                </div>
                            </div>
                            }
                        </Template>
                    </GridColumn>

private async Task HandleDeleteClicked(MyModel model)
    {
            Results.Remove(model);
    }

This part all works fine, it removes the row, and since 'Results' is an 'ObservableCollection<MyModel>' it updates the UI, perfect.

The problem is I can't seem to get it so that every cell is not re-rendering/re-created when the delete happens.

I have a column that has a sub-component inside it...

<GridColumn Title="MyCustomColumn" Field="@nameof(MyModel.MyField)">
                        <Template>
                            @{
                                @if (context is MyModel result)
                                {
                                    <div @key="@result.UniqueId">
                                        @{
                                                    <MyCustomComponent></MyCustomComponent>
                                            }
                                    </div>
                                }
                            }
                        </Template>
                    </GridColumn>

'MyCustomComponent' has an expensive API call in the 'OnParametersSetAsync' lifecycle method. Even though I have the @key attribute setup it seems to re-create the 'MyCustomComponent' for every row anytime a single row is deleted.

This gets called for every row:

// MyCustomComponent.razor.cs    
private Guid? ComponentInstanceId { get; set; } 

    protected override Task OnInitializedAsync()
    {
        ComponentInstanceId = Guid.NewGuid();
        return base.OnInitializedAsync();
    }

The Id I am using for the key I can confirm is not changing.

Is there a better way to help the grid know when it needs to re-create the cells?

Thanks!

General Discussions

Grid

answered on 07 Dec 2023

2 answers

317 views

How to display Form or Grid fields as invalid hen a button triggers an invalid Validator?

Hi,

This is my second Validation struggle this week.

I have a TelerikGrid displaying my Dtos.

This grid uses a FluentValidator.

I want to trigger the Validator for a specific DTO when the user clicks on a button on the row displaying the DTO.

The Validator rules are rather complex, let's say that if it is invalid when the user clicks the button, several grid columns from the row would need to turn red

My method bound to the button does trigger the validator correctly and I can see when it fails (the ValidationResult contains errors).

But none of the invalid controls are then displayed as having errors (red with errors).

Do I have to implement the logic manually?

I have to say that I do not have the slightest idea in which direction I should head.

My minimal current code looks like this:

<TelerikGrid @ref="@_gridRef"
             TItem="MyDto"
             OnRead="@ReadItems">

  <GridSettings>
        <GridValidationSettings>
          <ValidatorTemplate>
            <FluentValidationValidator Validator=@Validator />
          </ValidatorTemplate>
        </GridValidationSettings>
      
  </GridSettings>

  <GridToolBarTemplate>  [...] </GridToolBarTemplate>

 <DetailTemplate Context="ctx">
 [...] /* We will talk about how to flag this DetailTemplate's fields as arror later*/
 </DetailTemplate>


  <GridColumns>
 
    <GridColumn Field="@(nameof(MyDto.MyProp))" Title="..."/>

    <GridColumn Field="@(nameof(MyDto.MyProp2))" Title="..."/>

    <GridColumn Field="@(nameof(MyDto.MyProp3))" Title="..."/>

    <GridColumn Title="Action"
      <Template>
        <TelerikButton  OnClick="@(() => Update(context as MyDto))" Title="Title" />
      </Template>
    </GridColumn>

[...]
  </GridColumns>

</TelerikGrid>

In this case I would like let's say GridColumn 2 and 3 to be displayed as invalid.

My button Method code is as follows:

  private async Task Update(MyDto myDto)
  {
    ValidationResult result = Validator.Validate(myDto);
    if (!result.Errors.Any())
    {
      await myService.Update(myDto);

      await RefreshTable();
    }
    //else
    //{
    //  await Task.Delay(50);
    //  StateHasChanged();
    //}
  }

Thx in advance foy your assistance.

Grid

answered on 06 Dec 2023

1 answer

205 views

Ability to Invert the Y-axis of Charts

Hi

I believe this is a basic functionality especially for line, bar, column, and area charts but unfortunately it seems to not yet be supported. I can see that Kendo already supports inverting of the axis on some charts, but Blazor doesn't seem to have this feature stated in the documentation yet.

yAxis.reverse - API Reference - Kendo UI Chart - Kendo UI for jQuery (telerik.com)

Is there any plan to support this anytime soon?

Thanks

Charles

Charts

answered on 06 Dec 2023

2 answers

122 views

Update beyond version 3.7 causes bootstrap layout to fail

Upgrading the version of Telerik.Blazor.UI used beyond 3.7 causes all pages to change the layout order.

See the attached screenshots.

I am only using bootstrap for the row and column layout.

It seems to put full width controls at the top and then controls that should be partial width. But it also makes those controls full width.

I've tried bringing everything up to date in terms of the Theme, bootstrap css etc. but still no joy.

I don't have the time to rewrite all the layouts in this app to use just Telerik controls.

Suggestions welcome.

Thanks

Richard

Form

answered on 06 Dec 2023

1 answer

425 views

Styling for TabStrip Content

I'm trying to add styling to a specific tabstrip content (e.g. removing the padding). But I can't seem to figure out a way to select the specific tabstrip content.

This code:

<TelerikTabStrip>

    <TabStripTab Title="General Info" Class="tab-pane-general-info">
         <div class="general-info"></div>
    </TabStripTab>

    <TabStripTab Title="Summary" Class="tab-pane-product-list">
        <div class="product-list"></div>
     </TabStripTab>

</TelerikTabStrip>

Results in the following HTML:

I don't have a way to identify the different tab contents.

I know I can select on the div I created (.general-info), but I want to remove the padding from the k-tabstrip-content for a specific tab.

Any ideas?

TabStrip

answered on 05 Dec 2023

1 answer

186 views

bUnit test a component that has a TelerikDropZone

Hi,

I am trying to test a component that has a 'TelerikDropZone' inside, I don't need to do any interaction with the drop zone but when I try to render my component (using bUnit)

var myCmp = RenderComponent<MyComponent>();

It gives an error

System.NullReferenceException: Object reference not set to an instance of an object.

System.NullReferenceException
Object reference not set to an instance of an object.
   at Telerik.Blazor.Components.TelerikDropZone..ctor()
   at System.RuntimeType.CreateInstanceDefaultCtor(Boolean publicOnly, Boolean wrapExceptions)

As best I can tell looking at it, it seems to be coming up from the 'BaseComponent.Localizer'

[Parameter]
    public string HintText { get; set; } = BaseComponent.Localizer["DropZone_Hint"];

And if I just comment out the TelerikDropZone my tests run fine.

DropZone definition if it helps -

<TelerikDropZone Id="myDz">
                <Template>
                    <div class="hint">
                        <i class="far fa-file-plus me-2"></i>
                        <span>
                            Drag and drop file here
                        </span>
                    </div>
                </Template>
            </TelerikDropZone>

Is there some extra setup I need to do here in order to get it to work?

Thanks!

DropZone

General Discussions

answered on 05 Dec 2023