Questions on UI for Blazor Forum

2 answers

333 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

212 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

130 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

452 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

200 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

1 answer

183 views

How to remove padding around HeatMap chart?

I have a heatmap chart where I'm showing the X axis' labels on top of the chart. In the attached screenshot, you can see that the padding below the chart is bigger than the padding on the sides, how can I remove this extra padding?

Charts

answered on 04 Dec 2023

3 answers

176 views

Blazor 8: How to replace standard controls in Register.razor?

Hi,

I tried to replace the standard controls in Register.razor (Identity page) with Telerik controls (TextBox). But the behaviour of your controls seems to be different.

Working code with standard and Telerik controls:

@page "/Account/Register"

<PageTitle>@_IdentityLocalizer["TitleRegister"]</PageTitle>

<h1>@_IdentityLocalizer["TitleRegister"]</h1>

<div class="row">
    <div class="col-md-4">

        <StatusMessage Message="@Message" />
        <EditForm Model="@Input" asp-route-returnUrl="@ReturnUrl" method="post" OnValidSubmit="RegisterUser" FormName="register">
            <DataAnnotationsValidator />
            <ValidationSummary />
            <h2>Create a new account.</h2>
            <hr />

            <div class="k-form-field">
                <label id="textBoxEmail">@_IdentityLocalizer["LabelEmail"]</label>
                <TelerikTextBox @bind-Value="@Input.Email" Id="textBoxEmail" />
                <TelerikValidationMessage For="@(() => Input.Email)" />
            </div>

            <div class="k-form-field">
                <label id="textBoxPassword">@_IdentityLocalizer["LabelPassword"]</label>
                <TelerikTextBox @bind-Value="@Input.Password" Password Id="textBoxPassword" />
                <TelerikValidationMessage For="@(() => Input.Password)" />
             </div>

             <div class="k-form-field">
                <label id="textBoxConfirmPassword">@_IdentityLocalizer["LabelConfirmPassword"]</label>
                <InputText id="textBoxConfirmPassword" type="password" @bind-Value="Input.ConfirmPassword" />
                <TelerikValidationMessage For="@(() => Input.ConfirmPassword)" />
             </div>

             <div class="k-form-field">
                <TelerikButton ButtonType="ButtonType.Submit">@_IdentityLocalizer["ButtonRegister"]</TelerikButton>
             </div>

        </EditForm>

    </div>
    <div class="col-md-6 col-md-offset-2">
        <section>
           
        </section>
    </div>
</div>

After clicking the submit button the result seems correct:

After replacing the last input control with Telerik control the code looks like this:

<div class="k-form-field">
   <label id="textBoxConfirmPassword">@_IdentityLocalizer["LabelConfirmPassword"]</label>
   <TelerikTextBox @bind-Value="@Input.ConfirmPassword" Password Id="textBoxConfirmPassword" />
   <TelerikValidationMessage For="@(() => Input.ConfirmPassword)" />
</div>

Now I get the following exception when trying to submit (nothing entered):

It seems that the model instance (Input) is null after trying to submit the (empty) form. For me it is not understandable why the behaviour of your controls are so different to standard controls.

Is there a chance to use Telerik controls in Identity pages?

Regards, Stefan

TextBox

answered on 04 Dec 2023

1 answer

317 views

LoaderContainer

I have the following TelerikLoaderContainer definition with a custom GIF:

        <TelerikLoaderContainer Visible="@IsBusy">
            <Template>
                <div style="background:white;color:black;padding:1em;">

                    <img src="/images/IsBusyV1.gif"
                         width="100" height="100" alt="loading animation" />

                </div>
            </Template>
        </TelerikLoaderContainer>

When the value IsBusy runs, I see my gif inside a small white box. Instead, I'd like to change the "gray" color that, I assume, is defined by changing the zindex layer's transparency value to a lesser value.

How do I change this to show just the IsBusy.gif? E.g. I don't want the background to be "gray" or I want to change it to a different "light gray" value when it runs.

LoaderContainer

answered on 04 Dec 2023

1 answer

183 views

BUnit unit test involving TelerikFileSelect

Hi,

I am trying to setup a unit test around a component that involves a <TelerikFileSelect>

<TelerikFileSelect
                   Id="fileSelect"
                   AllowedExtensions="@AllowedExtensions"
                   MaxFileSize="@MaxFileSize"
                   OnSelect="@ImportHandler"
                   Multiple="false"
                   DropZoneId="dz"
                   OnRemove="@ImportRemove"
                   @ref="FileSelectRef">
                   <SelectFilesButtonTemplate>
                        <i class="fas fa-upload"></i>
                        Upload Excel Spreadsheet
                   </SelectFilesButtonTemplate>
</TelerikFileSelect>

I am not sure how to setup the `FileSelectEventArgs` in order to test our response to the uploaded file

var fileSelect = myComponent.FindComponent<TelerikFileSelect>();


await myComponent.InvokeAsync(async () => await fileSelect.Instance.OnSelect.InvokeAsync(new FileSelectEventArgs
        {
            Files = new List<FileSelectFileInfo>(new []{new FileSelectFileInfo
                {
                    Id = null,
                    Name = null,
                    Size = 0,
                    Extension = null,
                    InvalidExtension = false,
                    InvalidMinFileSize = false,
                    InvalidMaxFileSize = false,
                    Stream = null
                }
            }),
            IsCancelled = false
        }));

It seems like 'Stream' is expecting a 'FileInfoStream' which in turn is expecting a 'FileSelectFileInfo', which is expecting a 'FileInfoStream' and so on

How do I properly setup the FileSelectEventArgs to provide my test file?

Not sure if it matters but I am using ClosedXML to generate a memory stream that contains the excel file, so just want to pass that to the TelerikFileSelect

    public MemoryStream MockImportExcelFile_HappyPath()
    {
        var workbook = new XLWorkbook();
        var ws = workbook.Worksheets.Add("Sheet 1");
        ws.Cell("A1").Value = "Header1";
        ws.Cell("A2").Value = "asdfasdf";

        var stream = new MemoryStream();
        workbook.SaveAs(stream);
        stream.Seek(0, SeekOrigin.Begin);
        return stream;
    }

Thanks!

FileSelect

General Discussions

answered on 04 Dec 2023

1 answer

200 views

HOw can I get the Scheduler TimeLineView SchedulerSlotTemplateContext Start and End times?

In the Blazor Scheduler, the TimeLineView SchedulerSlotTemplateContext Start and End times are always 00:00:00. All of the other views have the correct data.

I notice the docs mention being sure the SlotTemplate adds class !k-pos-absolute (which mine does) but that didn't seem to help.

Can someone please provide some guidance here?

Scheduler

updated answer on 02 Dec 2023