Questions on UI for Blazor Forum

3 answers

226 views

Hi!

Is there a way to disable/hide the labels for start and end? I'm having issues fitting this control in another vendor's Form Layout.

DateRangePicker

answered on 15 Feb 2021

7 answers

660 views

Set indeterminate state by UI

Hi,

in the demo https://demos.telerik.com/blazor-ui/checkbox/overview the indeterminate state is set by code.

It is possible, that the user can toggle also the indeterminate state?

Now a user can not go back to the indeterminate state (or null in the bool? column) if the value is set to true or false.

Regards,

Peter

Checkbox

answered on 15 Feb 2021

5 answers

658 views

When bunit testing a form containing a TextArea that is hidden after submit, I get a Bunit.JSRuntimeUnhandledInvocationException

I have a EditForm containing a TelerikTextArea wrapped in an if statement that will hide the test area after submit. This works find in browser, but using bunit I get an exception. I assume this is due to the JS library not being loaded. Do you know how to fix this?

General Discussions

answered on 15 Feb 2021

12 answers

2.0K+ views

Keyboard Delete or Backspace wipes out the whole date!

When using the calendar/datepicker control, using the keyboard backspace or delete button deletes the entire date, rather than just the date component you're on (eg. year).

This keyboard behaviour does not translate to a good user experience as it effectively means you have to re-type the date out in its entirely.

Can this behavior be fixed/modified please?

Thanks,

Rod

DateInput

answered on 14 Feb 2021

5 answers

198 views

Is this a bug?

Hi,

I am having the wierdest problem. I have a treelist with 2 editable fields. One is templated with a textbox, the other with a textarea. I can type into the textbox with no problem. But when I type in the textarea, the first letter goes in, but after that, it somehow puts the focus back to the first textbox. I can only type on char at a time into the text area.

Any ideas?

Thanks ... Ed

<TelerikTreeList Data="@CommentsData"

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

@ref="CommenterTL"

Pageable="true"

Sortable="true"

FilterMode="@TreeListFilterMode.FilterMenu"

SelectionMode="@TreeListSelectionMode.Multiple"

Resizable="true"

Reorderable="true"

EditMode="@TreeListEditMode.Inline"

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);

if (item.FindComment == null)

item.FindComment = new FindComment();

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

</TelerikTextBox>

}

</EditorTemplate>

</TreeListColumn>

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

<EditorTemplate Context="ctx1">

@{

var c = (ctx1 as CommentItem);

if (c.FindComment == null)

c.FindComment = new FindComment();

<TelerikTextArea @bind-Value="@c.FindComment.Comment" Width="325px" Class="TelerikTextAreaWidth">

</TelerikTextArea>

}

</EditorTemplate>

</TreeListColumn>

<TreeListColumn Title="Name" Width="250px" Field="CommenterName" 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" Icon="add"></TreeListCommandButton>

<TreeListCommandButton Command="Edit" 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>

TreeList

answered on 13 Feb 2021

2 answers

2.5K+ views

[Solved] 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.4K+ views

[Solved] 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.4K+ views

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