Questions on UI for Blazor Forum

1 answer

170 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

171 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

306 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

174 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

195 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

63 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

171 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

216 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

0 answers

242 views

Grid In-cell edit row selection and end of list new entry focus

I have 2 questions on how to do something with the grid component.

Setup

Here are the options I have set for the grid component.

        <TelerikGrid @ref="Grid"
                        Data="Entries"
                        TItem="ProductEntryModel"
                        Class="font-size mb-1"
                        Sortable="true"
                        SortMode="@Telerik.Blazor.SortMode.Multiple"
                        FilterMode="@GridFilterMode.FilterMenu"
                        FilterMenuType="@FilterMenuType.CheckBoxList"
                        ScrollMode="@GridScrollMode.Virtual"
                        SelectionMode="@GridSelectionMode.Single"
                        Height="570px"
                        Width="100%"
                        RowHeight="40"
                        PageSize="@PageSize"
                        EditMode="@GridEditMode.Incell"
                        EnableLoaderContainer="@IsLoading"
                        @bind-SelectedItems="SelectedItems"                        
                        OnEdit="OnEditEventHandler"
                        OnUpdate="OnUpdateEventHandler"
                        Navigable="true"
                        Size="sm">

For Context the first cell is a TemplateColumn with a TelerikCombobox Component in it.

On Load

It loads all the entries for the day selected.

It adds a new line automatically at the bottom for adding more. But if the rows are longer than the height the new row will not fully show its whole height and I want it to start in edit of the first cell. The image shows that it is selected but not in edit.

This image is right after load. You can see the row is selected but not in edit and half off-screen. If the rows are further than the height it will not bring it into view either.

I would like it to start in view and the first cell in edit, how to accomplish that?

In Edit

This method below allows the user to keep adding rows to the grid after the PO NU... field loses focus. It works great as long as the grids next row is not out of view. Once it is out of view it will add the line, select it, and bring it to view, but the first cell is now out of edit and the user has to click in to the cell to start entry.

Similar to above, how do I set the focus in the first cell? Some of this code is different attempts to get it to work.

    private async Task AddNewRecord(ProductEntryModel? entry = null)
    {
        if (Entries.Any(x => x.ProductId == 0)) return;
        var newLine = new ProductEntryModel
        {
            EntryDate = EntryDate,
            PoNumber = entry != null ? entry.PoNumber : "", // Carry down
            Sublet = entry != null && !string.IsNullOrWhiteSpace(entry.PoNumber) ? entry.Sublet : "", // Carry down            
        };
        Entries.Add(newLine); // Add A new line
        PageSize = Entries.Count > 15 ? Entries.Count : 15; // increase page size
        SelectedItems = new List<ProductEntryModel>() {newLine};  // Select new line
        await Task.Delay(100); // Wait for the grid to update - Doesn't help select the next entry
        await ProjectCombobox.FocusAsync();  // New Attempt and doesn't work
        //Grid.Rebind();

    }

Grid

asked on 29 Nov 2023

1 answer

216 views

Dialog position

Is there a way to open a dialog/window next to the button that opened it?

Dialog

Window

updated answer on 29 Nov 2023