Questions on UI for Blazor Forum

1 answer

391 views

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

168 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

154 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

167 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

287 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

164 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

189 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

0 answers

62 views

Dynamic Telerik filter property error

Hello Telerik Team,

When i tried to bound Grid to a ExpandoObject or DataTable I can't use filter properties .It throws unhandling Exception error. How to sort out this issue.

asked on 30 Nov 2023

0 answers

165 views

TelerikDatePicker automatically changes to current year

I am trying to perform the following in a Blazor app. Default value = DateTime.Now. When a user enters a MMddyy or MMddyyyy I want to automatically format the date to MM/dd/yyyy. But I'm having an issue where the control automatically formats back to the default date value. Below is my layout for the DatePicker. I've tried different variations based on the demos Telerik provides but no luck. Hope someone can help. Thanks!

DateTimePicker

asked on 29 Nov 2023

1 answer

203 views

Null reference creating a folder in TelerikFileManager

I'm getting the following error:

Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
      Unhandled exception rendering component: 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.TelerikFileManager`1.ConvertToFileEntry(Object dataItem)

After I click the create folder button in the TelerikFileManager. I've confirmed that it does reach the OnModelInit() method which does not return null, but never reaches the OnCreate() method. Any ideas what might be causing this?

FileManager

answered on 29 Nov 2023