Questions on UI for Blazor Forum

1 answer

2.7K+ views

Form using FluentValidation not validating

Hey, I am following the example from you site about how to use FluentValidation, but I am running into a problem where the validation doesn't appear to be firing or being captured by the form when submitted. I have a break point on my validation code, it is executes when the object is initiated, but not when submitted.

The only different between my code and the example is that i am binding to a MODEL vs the example, which uses EDITCONTEXT. Could that be impacting the functionality?

If no, would be possible to get a simple example of a page using FluentValidation, butbound to model.

Thanks in advance.

Form

answered on 03 May 2022

1 answer

345 views

Error in ipad

I'm getting the error:

Exception:
Microsoft.JSInterop.JSException: this.mediaQueryList.addEventListener is not a function. (In 'this.mediaQueryList.addEventListener("change",this.onMediaChange)', 'this.mediaQueryList.addEventListener' is undefined)
value

On ipad.

Is there a fix for it?

MediaQuery

answered on 03 May 2022

1 answer

140 views

DropDownList bind-Value with OnRead data load does not bind value selected from code

I have a TelerikGrid with inline edit and a GridColumn EditorTemplate with a DropDownList loaded with OnRead and binded to the grid row.

Now if the ReadCombo method handle read quickly the DropDownList selected item is binded correcty, but if it take some time (4, 5 seconds..) it not bind, this occurs because bind-Value evaluate before ReadCombo populate the DropDownList.

If i use the Data property to populate the DropDownList binding work fine, but i need to use OnRead callback to manage pagination, filters ecc..

Here a simple sample to reply the issue: https://blazorrepl.telerik.com/mQaymWlm40ccwDCE40

if you comment the line await Task.Delay(10000); all work fine.

There is a solution for this problem?

Thanks

DropDownList

Grid

answered on 03 May 2022

1 answer

190 views

How can I make the event handlers of the Upload component respect an ErrorBoundary?

I've discovered that exceptions raised within event-handlers of the Upload component do not respect the ErrorBoundaries above the Upload component itself. Instead, Blazor displays its out-of-the-box "unhandled exception" error.

Is there a reason for this? What can I do to make exceptions that are raised within the Upload event-handlers get detected by Error Boudaries?

Upload

answered on 02 May 2022

0 answers

232 views

Force Refresh TelerikEditor

Hi,

I am looking for a way to force TelerikEditor to be updated when the parent component change states without using 2 ways binding.

<TelerikEditor @ref="Editor" DebounceDelay="300" Value="@DefaultValue" EditMode="@EditorEditMode.Div" Height="650px" Width="1400px">
</TelerikEditor>

@code {
    
    private string? DefaultValue {get; set;}

    public TelerikEditor Editor { get; set; } = null!;

}

Currently, the value of the of Telerik Editor is bind with DefaultValue. Is there away to force Editor Value to refresh as soon as DefaultValue changes without using 2 ways binding?

Editor

asked on 29 Apr 2022

2 answers

1.5K+ views

Grid with inline edit: How to add new row and manage save / cancel request from code?

Hi,

I would like to implement a grid with inline edit, but i would like to have full control over insert / save / cancel events and not delegate this tasks to the embedded grid functionality.

So i need to manage my action buttons inside my page, instead of GridCommandButton.

How to raise the Add / Edit / Delete / Save / Cancel tasks from my buttons?

What methods i need to call?

Thanks

Grid

answered on 28 Apr 2022

1 answer

849 views

Blazor DatePicker Disable all days except Monday

Hi, I'm coming from a Kendo JQuery background and currently creating an app using Blazor UI.

I can see the datepicker can disable a range of dates but I need to configure it to disable all days which are not Mondays. Is this possible?

DatePicker

answered on 27 Apr 2022

2 answers

1.0K+ views

How provide json result in api form?

Hi,

I have in a serverside Blazor page a grid, which can paging, filtering and sorting.

In Kendo UI with Javascript the grid component provide a put request with filter, sort, page capabilities, i.e.

{
"sort": "Column1-desc",
"page": "1",
"pageSize": "10",
"group": "",
"filter": "Column2~eq~1~and~Column3~gt~10",
}

which return the data in json format.

Instead of showing the page with the grid I want create an url which returns the json data. Possible as GET Request with Parameter:
/api?sort=Column1-desc&page=1&pageSize=10&filter=Column2~eq~1~and~Column3~gt~10

But a PUT request with the paramter of Kendo UI is also possible.

Do you have an idea or example, how I can extend my Blazor web app?

Best regards,

Peter

Grid

updated answer on 26 Apr 2022

2 answers

1.0K+ views

GridValidationSettings along with ValidatorTemplate

Hello

I am using in the in-build grid edit popup form in the editmode. Each of the grid columns have editortemplate that has an associated TelerikValidationMessage control to show the inline validation messages. I am also using ValidatorTemplate to show the validation messages onces the save action is made and the error comes in the model state. My issue is I only want to show the inline validation message and not the default validation summary that comes with the editform. Is there a way to disable the validation summary on the editform. Below is my code and and image of what it is looks now, and what I am trying to accomplish.


//Editor Template for the Grid Column with Validation Message
<GridColumn Field="@(nameof(_defectObj.Name))" Title="Name" Width="200px" TextAlign="ColumnTextAlign.Left" FieldType="@(typeof(string))" FilterMenuType="Telerik.Blazor.FilterMenuType.Menu" >                       
                        <EditorTemplate>
                                @{                                    
                                    _defectEdit = (DefectModel)context;
                                    <TelerikTextBox @bind-Value="_defectEdit.Name" ></TelerikTextBox>
                                    <TelerikValidationMessage For="@(() => _defectEdit.Name)"></TelerikValidationMessage>
                                }
                        </EditorTemplate>
                    </GridColumn>    


<GridSettings>                    
<GridPopupEditSettings MaxWidth="700px" MaxHeight="600px" Width="500px" Height="600px" MinHeight="200px" MinWidth="300px"  Title="@(_isNewGridRow == true? "Add New Defect": "Edit " + _currentDefectName)">
                    </GridPopupEditSettings>
                    <GridPopupEditFormSettings Orientation="FormOrientation.Horizontal" ButtonsLayout="FormButtonsLayout.Center" Columns="1" ColumnSpacing="25">
</GridPopupEditFormSettings>  
<GridValidationSettings Enabled="true">
                        <ValidatorTemplate>
                            <DataAnnotationsValidator></DataAnnotationsValidator>
                            <ProblemDetailsValidator @ref="_customValidation"></ProblemDetailsValidator>
                        </ValidatorTemplate>                        
                    </GridValidationSettings>                       
                </GridSettings>

Image shows how both ValidationMessage display and ValidationSummary display. I would only like to show the Validation Message along the input textbox and not the validation summary. How can I accomplish this.

Thank you.

Beena.

Grid

answered on 26 Apr 2022

1 answer

181 views

TelerikToolbar ToolBarTemplateItem Class Not Working

We recently made the update from version 2.* to 3.1.0 and then 3.2.0. I'm unsure when and where the change occurred but we are now having problems with the items visual display.

Previously, we had 2 ToolBarTemplateItem's setup like so:

<TelerikToolBar Class="toolbar-size">

                        <ToolBarTemplateItem>
                            <TelerikMultiSelect 
                                    Class="font-size-12 ml-5 bg-light-transparent h-auto"
                                    Data="@Data"     
                                    Value="@ChosenModelNames"
                                    TextField="@nameof(TreeView.Text)"
                                    ValueField="@nameof(TreeView.Id)"
                                    Placeholder="Select Data"
                                    ValueChanged="@((List<string> args) => ChosenModelsChanged(args))"
                                    Width="auto"
                                    ItemHeight="25"
                                    FillMode="@ThemeConstants.DropDownList.FillMode.Outline"
                                    Rounded="@ThemeConstants.DropDownList.Rounded.Small"
                                    Size="@ThemeConstants.DropDownList.Size.Large"
                                    >
                                    <ItemTemplate>
                                        @{
                                            var ctx = context as TreeView;
                                        }
                                        @ctx.DisplayName @ctx.Name
                                    </ItemTemplate>
                            </TelerikMultiSelect>
                        </ToolBarTemplateItem>

                        <ToolBarTemplateItem>
                            <div class="mt-4 ml-2 w-100">
                            <TelerikRangeSlider 
                                    @bind-StartValue="@StartValue"
                                    @bind-EndValue="@EndValue"
                                    Min="0"
                                    Max="25"
                                    SmallStep="@SmallStep"
                                    LargeStep="@LargeStep"
                                    Width="95%" 
                                    OnChange="@(args => TimeUpdateHandler())"
                                    TickPosition="@SliderTickPosition.Before">
                                    <LabelTemplate>
                                        <div class="time-slider-text">
                                            @(GetRangeDate(context).ToString("htt"))
                                        </div>
                                </LabelTemplate>
                            </TelerikRangeSlider>
                            </div>

                        </ToolBarTemplateItem>

                    </TelerikToolBar>

This now adds div elements to the dom that I don't believe were there before. I then attempted to use <ToolBarTemplateItem Class="myClass"> but the class doesn't actually go into that div or anywhere else that I can see.

ToolBar

answered on 26 Apr 2022