Questions on UI for Blazor Forum

2 answers

2.3K+ views

Dropdownlist does not close after selection

The dropdownlist does not close after selecting a value from the list. It will close once it has lost focus.

I tested this is chrome and firefox and there no JavaScript errors in the thrown

does anyone have an idea?

DropDownList

answered on 12 Feb 2021

2 answers

2.3K+ views

TextBox loses focus after typing a letter

Hi,

I'm trying to create a custom EditForm component by i just can't get it working.
The TelerikTextBox loses focus after every keystroke and also never causes the EditContext to getb into a modified start.

My model look like:

public class MyModel

{

public string Code { get; set; }

public string Name { get; set; }

}

The EditForm is split into a razor and a razor.cs file:

@inherits MyEditFormBase

<EditForm EditContext="@MyEditContext">

<CascadingValue Name="EditContext" Value="@MyEditContext">

@ChildContent(MyEditContext)

</CascadingValue>

</EditForm>

<TelerikButton Title="Ok" OnClick="(() => Console.WriteLine(MyEditContext.IsModified()))" />

public class MyEditFormBase : ComponentBase

{

public EditContext MyEditContext;

[Parameter]

public RenderFragment<EditContext> ChildContent { get; set; }

[Parameter]

public MyModel Value { get; set; }

protected override Task OnParametersSetAsync()

{

MyEditContext = new EditContext(Value);

return base.OnParametersSetAsync();

}

And finally to apply the MyEditForm i'm using this:

<MyEditForm Value="@Value">

<TelerikTextBox Value="@Value.Code"

ValueExpression="@(() => Value.Code)"

ValueChanged="@((string s) => Value.Code = s)" />

</MyEditForm>

@code {

public MyModel Value { get; set; } = new MyModel();

}

It all looks relatively simple, but i can't figure out how to make it work properly.
Am i missing something, or am i trying to use the Telerik controls in a way they can't handle?

Regards,

Gerrit

TextBox

answered on 12 Feb 2021

14 answers

1.3K+ views

Adding and Removing Tabs at runtime

I would like to add and remove tabs at runtime and the contents of each tab will be a child component. I've seen the example on how to bind the tabstrip to a collection but it is not displaying the child component. I also need a close button on the tab itself. The use case is as follows:

The first tab is a grid of data (let's say cars for this example). When you click on a row, a new tab will be spawned with the car details (child component) shown and the title of the tab with be the car name. As you click on more cars, more tabs will open until the user closes the tabs.

Can this tabstrip control handle this use case?

Thanks,

Doug

TabStrip

answered on 12 Feb 2021

1 answer

2.6K+ views

more trouble

Hi,

I keep getting the error show below:

EditForm requires either a Model parameter, or an EditContext parameter, please provide one of these.

It happen when I click on a NON-root item to edit.

Any ideas?

<TelerikWindow Visible="@ShowComments" Modal="true" Width="55vw" Height="60vh">

<WindowTitle>

@CommentDlgTitle

</WindowTitle>

<WindowActions>

<WindowAction Name="Close" OnClick="@OnCloseFindComments"></WindowAction>

</WindowActions>

<WindowContent>

<div class="form-row justify-content-end ml-2">

<div class="col overflow-y:auto">

<br />

<TelerikTreeList Data="@CommentsData"

ItemsField="@(nameof(CommentItem.Children))"

@ref="CommenterTL"

Pageable="true"

Sortable="true"

FilterMode="@TreeListFilterMode.FilterMenu"

SelectionMode="@TreeListSelectionMode.Single"

Resizable="true"

Reorderable="true"

EditMode="@TreeListEditMode.Popup"

OnEdit="@EditComment"

OnCreate="@CreateComment"

OnUpdate="@UpdateComment"

OnDelete="@DeleteComment">

@*OnUpdate="@UpdateItem"*@

<TreeListToolBar>

<TreeListCommandButton Command="Add" Icon="add">Add</TreeListCommandButton>

</TreeListToolBar>

<TreeListColumns>

<TreeListColumn Title="Subject" Width="250px" Field="FindComment.Subject" Editable="true" Expandable="true">

<EditorTemplate Context="ctx">

@{

var item = (ctx as CommentItem);

//Enabled = "@(item.FindComment.ParentCommentId == null)"

if (item.FindComment == null)

{

item.FindComment = new FindComment();

}

item.FindComment.Subject = SelectedComment.FindComment.Subject;

//SelectedComment = item;

<TelerikTextBox @bind-Value="@SelectedComment.FindComment.Subject">

</TelerikTextBox>

}

</EditorTemplate>

</TreeListColumn>

<TreeListColumn Title="Comment" Resizable="false" Editable="true" Field="FindComment.Comment" Width="350px">

<EditorTemplate Context="ctx1">

@{

var item = (ctx1 as CommentItem);

if (item.FindComment == null)

item.FindComment = new FindComment();

SelectedComment = item;

//var c = (ctx1 as CommentItem);

//if (c.FindComment == null)

// c.FindComment = new FindComment();

<TelerikTextArea Width="260px" Class="TelerikTextAreaWidth"

@bind-Value="@SelectedComment.FindComment.Comment">

</TelerikTextArea>

}

</EditorTemplate>

</TreeListColumn>

<TreeListColumn Title="Name" Width="100px" Field="CommenterName" Context="ctx2" Editable="false">

</TreeListColumn>

<TreeListCommandColumn Width="150px">

@{

if (SelectedComment != null && SelectedComment.FindComment.Id == appData.AppUser.Id || appData.AppUser.RoleId == (int)ROLE_ENUM.SysAdmin)

{

<TreeListCommandButton Command="Add" OnClick="@OnAddCommentClick" Icon="add"></TreeListCommandButton>

<TreeListCommandButton Command="Edit" OnClick="@OnEditCommentClick" Icon="edit"></TreeListCommandButton>

<TreeListCommandButton Command="Delete" Icon="delete"></TreeListCommandButton>

<TreeListCommandButton Command="Save" Icon="save" ShowInEdit="true"></TreeListCommandButton>

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

}

else

{

<TreeListCommandButton Command="Add" Icon="add"></TreeListCommandButton>

<TreeListCommandButton Command="Save" Icon="save" ShowInEdit="true"></TreeListCommandButton>

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

}

</TreeListCommandColumn>

</TreeListColumns>

</TelerikTreeList>

</div>

<div class="form-row justify-content-end ">

<br />

<TelerikButton Class="mt-2" Icon="cancel" OnClick="@OnCloseFindComments" ButtonType="@Telerik.Blazor.ButtonType.Button">Close</TelerikButton>

</div>

<ConfirmWindow ConfirmTitle="Delete comment?"

ConfirmText=@("Are you sure you want to delete this comment? All sub comments will also be deleted.")

ButtonText="Confirm"

OnCancelConfirm="@OnCancelDeleteComment"

OnConfirm="@OnConfirmDeleteComment"

Icon="warning"

Visible="@ShowConfirmDeleteComment">

</ConfirmWindow>

</WindowContent>

</TelerikWindow>

TreeList

answered on 11 Feb 2021

1 answer

137 views

Style a row

Can I style a row while it is rendered based on the item?

I can only set a class but I'd like to set a background-color which isa property of the item.

Grid

answered on 10 Feb 2021

4 answers

623 views

Time zone for NOW button

With Blazor server, clicking the NOW button (obviously) sets the time to the time on the server since that's where the code is running. Is there a way to trap the NOW button click or somehow give it an offset or define the value that NOW means so NOW will mean the time that the user is sitting in?

DateTimePicker

answered on 08 Feb 2021

3 answers

2.1K+ views

Boolean Columns

Is it possible to show something else than "True/False" for a Boolean Column?

CheckBox, PNG of a checkmark, a light, etc...

Grid

answered on 08 Feb 2021

6 answers

2.1K+ views

Tooltip on the grid header

Hi,

how can I show a Tooltip on the grid headers to replace short column title with a long description?

In Kendo UI I use this Javascript code:

grid.thead.kendoTooltip({

filter: "th",

content: function (e: any) {

var text = e.target.text().trim();

switch (text) {

case "Länge":

return "Zuglänge";

case "Kateg.":

return "Zugkategorie";

case "Dauer":

return "Expositionsdauer T<sub>TEL</sub>";

case "Geschw.":

return "Geschwindigkeit";

case "LAmax":

case "LAFmax":

return "Maximalpegel";

case "LAeq":

case "TEL":

case "Vorbeifahrtpegel":

return "Vorbeifahrtexpositionspegel";

default:

return text;

}

});

Best regards,

Peter

Grid

answered on 07 Feb 2021

0 answers

138 views

Recommendations for UX Design tools

We've recently purchased Telerik Blazor UI components for our developers. Now, does anyone have a recommendation for a 'mock up' tool that uses similar/identical components to Telerik's Blazor UI components? I'd love to get the designers creating some mockups without having these non-technical users having to install Visual Studio.

General Discussions

asked on 05 Feb 2021

1 answer

104 views

Keyboard Delete or Backspace wipes out the whole date!

When using the DateTimePicker, if you type or select a date, and then press the keyboard backspace, or delete button, the whole date gets deleted, which is not a good user experience.

Can this behaviour be changed so that only the individual date component is blanked out, not the entire date?

Note: I posted this yesterday, but it seems to have been removed.

DateTimePicker

answered on 04 Feb 2021