Questions on UI for Blazor Forum

3,573 questions

3 answers

991 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

419 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.4K+ views

[Solved] 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

288 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

212 views

[Solved] 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

276 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