Questions on UI for Blazor Forum

3,477 questions

1 answer

1.2K+ views

Diagram control

Is there any plan to implement the Diagram control in Blazor?

General Discussions

answered on 08 Aug 2020

8 answers

2.3K+ views

Filterable="true" causing Object reference not set to an instance of an object

Everything is working fine in my Grid, except the Filterable="true".

When I set the property to true, the grid throws an exception:

Object reference not set to an instance of an object.
at Telerik.Blazor.Components.TelerikRootComponentFragmentBase.OnInitAsync()
at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

Any help?

Grid

answered on 07 Aug 2020

1 answer

229 views

How to use on an iPad

Hi,

I'm very happy to see, that we can now use the contextmenu.

I can use it on the desktop and on a surface (touch), but not on an ipad.

Is there any possibilty to make it usable?

ContextMenu

answered on 06 Aug 2020

7 answers

1.6K+ views

preventdefault on checkbox

Hi,

I want to set preventDefault to true on my checkbox, something like this:

<TelerikCheckBox Id="checkboxReader" @onclick:preventDefault="true" Class="checkbox-rbac" @bind-Value="isReader"></TelerikCheckBox>

But I get error:

Unhandled exception rendering component: Object of type 'Telerik.Blazor.Components.TelerikCheckBox`1[[System.Boolean, mscorlib, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]' does not have a property matching the name 'onclick'.

It works fine for normal input:

<input id="checkbox-rbac-azure-01" class="checkbox-rbac-azure" type="checkbox" @onclick:preventDefault="true" />

Checkbox

answered on 05 Aug 2020

3 answers

890 views

Grid Custom Filter Row

Hi everyone,

I've been testing the new features of the Telerik Grid and i've encountered a behavior that i can't quite understand.

My Custom Filter Row is applied but to the previous column as it shows in the attached screenshot.

Here is the entire code of my Grid :

<TelerikGrid Data="@listDemandes"

PageSize="10"

Pageable="true" Sortable="true" Groupable="false" Reorderable="false" Resizable="true"

FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"

OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler">

<DetailTemplate Context="ctxDemande">

@{

var demande = ctxDemande as WillyDemande;

<TelerikGrid Data="demande.WillyMachines" Pageable="false">

<DetailTemplate Context="ctxMachine">

@{

var machine = ctxMachine as WillyMachine;

<TelerikGrid Data="machine.WillyResults" Pageable="false">

<GridColumns>

<GridColumn Field=@nameof(WillyResult.Type) Title="Type" Filterable="true" Editable="false" />

<GridColumn Field=@nameof(WillyResult.Description) Title="Description" Filterable="true" Editable="false" />

</GridColumns>

</TelerikGrid>

}

</DetailTemplate>

<GridColumns>

<GridColumn Field=@nameof(WillyMachine.DocumentType) Title="Type" Filterable="true" Editable="false" />

<GridColumn Field=@nameof(WillyMachine.Statut) Title="Statut" Filterable="true" Editable="false" />

<GridColumn Field=@nameof(WillyMachine.DateDebut) Title="Debut" Filterable="true" Editable="false" />

<GridColumn Field=@nameof(WillyMachine.DateFin) Title="Fin" Filterable="true" Editable="false" />

<GridColumn Field=@nameof(WillyMachine.Performance) Title="Performance" Filterable="true" Editable="false" />

</GridColumns>

</TelerikGrid>

}

</DetailTemplate>

<GridColumns>

<GridColumn Field=@nameof(WillyDemande.DessinCommande) Title="Commande" Editable="false">

<Template>

@{

var ctx = context as WillyDemande;

<input type="checkbox" disabled @bind="ctx.DessinCommande" />

}

</Template>

</GridColumn>

<GridColumn Field=@nameof(WillyDemande.Username) Title="Usager" Editable="false">

<FilterCellTemplate>

@*<TelerikComboBox Data="@CurrentUsernames"

Value="@UserName"

Filterable="true"

ValueChanged="@(async (string val) =>

{

UserName = val;

var filter = context.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor;

filter.Value = UserName;

if (string.IsNullOrEmpty(UserName))

{

await context.ClearFilterAsync();

}

else

{

await context.FilterAsync();

}

})">

</TelerikComboBox>*@

</FilterCellTemplate>

</GridColumn>

<GridColumn Field=@nameof(WillyDemande.SendingComputer) Title="Poste" Editable="false">

<FilterCellTemplate>

<TelerikComboBox Data="@CurrentSendingComputers"

Value="@SendingComputer"

Filterable="true"

ValueChanged="@(async (string val) =>

{

SendingComputer = val;

var filter = context.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor;

filter.Value = SendingComputer;

if (string.IsNullOrEmpty(SendingComputer))

{

await context.ClearFilterAsync();

}

else

{

await context.FilterAsync();

}

})">

</TelerikComboBox>

</FilterCellTemplate>

</GridColumn>

<GridColumn Field="IdPartNavigation.Name" Title="Configuration" Editable="false" />

<GridColumn Field="IdPartNavigation.Revision" Title="Révision" Editable="false" />

<GridColumn Field=@nameof(WillyDemande.Eco) Title="ECO" Editable="false">

<FilterCellTemplate>

<TelerikComboBox Data="@CurrentECOs"

Value="@ECO"

Filterable="true"

ValueChanged="@(async (string val) =>

{

ECO = val;

var filter = context.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor;

filter.Value = ECO;

if (string.IsNullOrEmpty(ECO))

{

await context.ClearFilterAsync();

}

else

{

await context.FilterAsync();

}

})">

</TelerikComboBox>

</FilterCellTemplate>

</GridColumn>

<GridColumn Field=@nameof(WillyDemande.ProjectName) Title="Projet" Editable="false" />

<GridColumn Field=@nameof(WillyDemande.WilmaRbre) Title="RBRE" Editable="false">

<Template>

@{

var ctx = context as WillyDemande;

<input type="checkbox" disabled @bind="ctx.WilmaRbre" />

}

</Template>

</GridColumn>

<GridColumn Field=@nameof(WillyDemande.WilmaRbtk) Title="RBTK" Editable="false">

<Template>

@{

var ctx = context as WillyDemande;

<input type="checkbox" disabled @bind="ctx.WilmaRbtk" />

}

</Template>

</GridColumn>

<GridColumn Field=@nameof(WillyDemande.WilmaTls) Title="RBLK" Editable="false">

<Template>

@{

var ctx = context as WillyDemande;

<input type="checkbox" disabled @bind="ctx.WilmaTls" />

}

</Template>

</GridColumn>

<GridColumn Field=@nameof(WillyDemande.WilmaTq) Title="TQUE" Editable="false">

<Template>

@{

var ctx = context as WillyDemande;

<input type="checkbox" disabled @bind="ctx.WilmaTq" />

}

</Template>

</GridColumn>

<GridColumn Field=@nameof(WillyDemande.WilmaTc) Title="TCON" Editable="false">

<Template>

@{

var ctx = context as WillyDemande;

<input type="checkbox" disabled @bind="ctx.WilmaTc" />

}

</Template>

</GridColumn>

<GridColumn Field=@nameof(WillyDemande.PdfOnly) Title="PDF Only" Editable="false">

<Template>

@{

var ctx = context as WillyDemande;

<input type="checkbox" disabled @bind="ctx.PdfOnly" />

}

</Template>

</GridColumn>

<GridColumn Field=@nameof(WillyDemande.DateProduite) Title="Produite" Editable="false" />

<GridColumn Field=@nameof(WillyDemande.Priority) Title="Priorité" Editable="false">

<FilterCellTemplate>

<TelerikComboBox Data="@CurrentPriorities"

Value="@Priority"

Filterable="true"

ValueChanged="@(async (string val) =>

{

Priority = val;

var filter = context.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor;

filter.Value = Priority;

if (string.IsNullOrEmpty(Priority))

{

await context.ClearFilterAsync();

}

else

{

await context.FilterAsync();

}

})">

</TelerikComboBox>

</FilterCellTemplate>

</GridColumn>

<GridColumn Field=@nameof(WillyDemande.Statut) Title="Statut" Editable="false">

<FilterCellTemplate>

<TelerikComboBox Data="@CurrentStatuts"

Value="@Statut"

Filterable="true"

ValueChanged="@(async (string val) =>

{

Statut = val;

var filter = context.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor;

filter.Value = Statut;

if (string.IsNullOrEmpty(Statut))

{

await context.ClearFilterAsync();

}

else

{

await context.FilterAsync();

}

})">

</TelerikComboBox>

</FilterCellTemplate>

</GridColumn>

<GridColumn Field=@nameof(WillyDemande.StatutSyteline) Title="Importé" Editable="false">

<Template>

@{

var ctx = context as WillyDemande;

<input type="checkbox" disabled @bind="ctx.StatutSyteline" />

}

</Template>

</GridColumn>

<GridColumn Field=@nameof(WillyDemande.DateSyteline) Title="Importation" Editable="false" />

<GridColumn Field=@nameof(WillyDemande.ServerName) Title="Serveur" Editable="false">

<FilterCellTemplate>

<TelerikComboBox Data="@CurrentServerNames"

Value="@ServerName"

Filterable="true"

ValueChanged="@(async (string val) =>

{

ServerName = val;

var filter = context.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor;

filter.Value = ServerName;

if (string.IsNullOrEmpty(ServerName))

{

await context.ClearFilterAsync();

}

else

{

await context.FilterAsync();

}

})">

</TelerikComboBox>

</FilterCellTemplate>

</GridColumn>

<GridColumn Field=@nameof(WillyDemande.DateDebut) Title="Début" Editable="false"/>

<GridColumn Field=@nameof(WillyDemande.DateFin) Title="Fin" Editable="false"/>

<GridColumn Field=@nameof(WillyDemande.Performance) Title="Performance" Editable="false"/>

<GridColumn Field=@nameof(WillyDemande.PathModel) Title="Emplacement" Editable="false"/>

<GridColumn Field=@nameof(WillyDemande.MailAddress) Title="Courriel" Editable="false"/>

<GridCommandColumn>

<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Mettre à jour</GridCommandButton>

<GridCommandButton Command="Delete" Icon="delete">Supprimer</GridCommandButton>

<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>

</GridCommandColumn>

</GridColumns>

</TelerikGrid>

Grid

answered on 05 Aug 2020

4 answers

367 views

The inline DatePicker has huge left padding

See the attached image.

How do I suppress the padding/margin/whatever?

I can't see the classes used because the picker disapperas as soon as you click outside the cell.

Grid

answered on 05 Aug 2020

2 answers

2.3K+ views

DropDownList DefaultText is empty

Hi,

I created a DropDownList in my blazor app. With defaultText property. When DropDownList is rendered it does not show any text

Unfortunately I can't paste the print screen.

Labrary: Telerik.UI.for.Blazor 2.15.0

Thanks,

Artem

Code

<TelerikDropDownList Data="@Activities"

@bind-Value="@SelectedActivitiesIds"

TextField="@nameof(Activity.ActivityId)"

ValueField="@nameof(Activity.Code)"

DefaultText="Select Activity"

Width="200px"

Id="ddlActivity">

</TelerikDropDownList>

DropDownList

answered on 05 Aug 2020

1 answer

211 views

Chart tooltips sometimes show outside of browser window

I have a chart which is essentially 100% of the browser window.
Tooltips are standard code like:

<ChartTooltip Visible="true" Shared="true" />

When the user hovers at the bottom of the chart item then the tooltip goes off screen and is cut off.

Charts

answered on 05 Aug 2020

1 answer

184 views

OnCancel does not fire when escaping out of Inline Editing

A grid with Navigable=true allows me to

start editing a newly added record right away, no Command Buttons needed, just some fiddling with grid State
stop editing by pressing Escape

However, when using Escape no event is fired. Which is fine when I am editing an existing record, because any modifications are just discarded. But when the user is escaping out of a newly added row, I want to dispose of that row and underlying item immediately.

Without an event to detect the cancel I don't now how to do that.

Any suggestions?

Grid

answered on 04 Aug 2020

3 answers

252 views

Too wide MultiSelect

The MultiSelect needlesly bumps up the width when 2 chips don't fit on the same line.
After the wrap the width stays too large. See the attached image.

MultiSelect

answered on 31 Jul 2020

Top users last month