Questions on UI for Blazor Forum

3 answers

684 views

[Solved] Bug with sorting columns in grid with detail template

1. Replace MainLayout with TelerikDrawer https://github.com/telerik/blazor-ui/tree/master/drawer/template
2. Place simple Grid with detail template https://docs.telerik.com/blazor-ui/components/grid/hierarchy
3. Bug - Latest column from parent grid becomes disabled for sorting.

<TelerikGrid Data="salesTeamMembers" @ref="Grid" Sortable="true" FilterMode=@GridFilterMode.FilterMenu Height="780px">
<DetailTemplate>
<span>Any template</span>
</DetailTemplate>
<GridColumns>
<GridColumn Field="Id"></GridColumn>
<GridColumn Field="Name" ></GridColumn>
<GridColumn Field="Order"></GridColumn>
</GridColumns>
</TelerikGrid>

If remove detail tempate, all columns becomes availavle for sorting as expected

Grid

answered on 08 Oct 2020

1 answer

260 views

ListViewCommandButton Title Problem

The Title attribute on the ListViewCommandButton does not appear to work.

I have a button defined like this:

<ListViewCommandButton Command="Edit" Enabled="@Ticket.Active" Class="float-right ml-1" Icon="@IconName.Edit" Title="Edit"></ListViewCommandButton>

When it renders, the title attribute is not being added to the button:

<button class="float-right mr-1 k-button telerik-blazor k-button-icon" tabindex="0" aria-disabled="false" type="button">

<span class="k-icon k-i-edit"></span>

</button>

ListView

answered on 07 Oct 2020

7 answers

5.1K+ views

[Solved] Links within Grid

Hey guys, I currently have a grid that outputs values from a database within a grid. This works well however I have one field that contains sets of Url's. This is currently output as text.

Is there anyway to make it a href/link or can you only output text within the grid?

Thanks,

Cameron

Grid

answered on 07 Oct 2020

1 answer

2.9K+ views

Phone Number Formatting

What's the best way to add a textbox in Blazor with phone number formatting?

For example the data is 1112223333 but you want it to appear as (111) 222-3333.

TextBox

answered on 06 Oct 2020

2 answers

580 views

Editor input class not changing to k-state-invalid

I have an editor which is in a component that is used in several different pages. The validation on the Editor seems to be working as when I try to submit my form, it does give me the validation summary saying the editor content is required, however when I view the html markup in dev tools, the class on the input still says 'k-state-valid'. I need to it to be k-state-invalid as I want to change the border color to red when it is invalid.

I have placed a simple editor on one of the pages and when I do that it seems to work just fine, so I think it has something to do with it being in a component. Below is the form that contains the component and the component itself.

Any help would be appreciated.

<EditForm Model="@newTicket" OnValidSubmit="@CreateTicket">

<div id="NewTicket" class="container-fluid">

<ValidationSummary />

<DataAnnotationsValidator />

<TicketHeader Ticket="@newTicket"></TicketHeader>

<div class="form-group row">

<div class="col">

<TelerikTextBox Class="defaultFocus" Id="subject" @bind-Value="@newTicket.Subject" Label="Subject"></TelerikTextBox>

</div>

<div class="form-group row">

<div class="col">

<AttachmentsUploader Attachments="@newTicket.Attachments"></AttachmentsUploader>

</div>

<div class="form-group row editor">

<div class="col">

<label for="Details" class="ticketLabel">Ticket Details</label><br />

<PostEditor @bind-Content="@newTicket.Detail" IsPublic="true" ShowPublicTool="false" EditorHeight="90%"></PostEditor>

</div>

<div class="form-group row">

<div class="col">

<TelerikButton ButtonType="ButtonType.Submit" Primary="true" Enabled="@(!loaderVisible)" Class="float-right ml-2">

<PleaseWait Type="PleaseWaitType.Button" Visible="@loaderVisible" ThemeColor="@ThemeColors.Light" />

@(loaderVisible ? "Saving" : "Save")

</TelerikButton>

<TelerikButton ButtonType="ButtonType.Button" @onclick="CancelButtonClick" Enabled="@(!loaderVisible)" Class="float-right">

Cancel

</TelerikButton>

</div>

</EditForm>

PostEditor.razor

@using Telerik.Blazor.Components.Editor

@inject IJSRuntime jSRuntime

<TelerikEditor @ref="editor" Id="Comment" Value="@Content" ValueChanged="ContentChanged" ValueExpression="@( () => Content )"

Tools="@tools" Width="100%" Height="@EditorHeight">

<EditorCustomTools>

<EditorCustomTool Name="Public">

<label class="k-label mr-1">Public</label>

<TelerikSwitch Value="@IsPublic" ValueChanged="IsPublicChanged" ValueExpression="@( () => IsPublic )"

OnLabel="Yes" OffLabel="No"></TelerikSwitch>

</EditorCustomTool>

<EditorCustomTool Name="ColorTools">

<TelerikButtonGroup>

<ButtonGroupButton OnClick="ShowFontColor" Title="Font Color">

<i class="fas fa-font" style="color: @fontColor"></i>

</ButtonGroupButton>

<ButtonGroupButton OnClick="ShowBackColor" Title="Text Highlight Color">

<i class="fas fa-highlighter"></i>

</ButtonGroupButton>

<ButtonGroupButton OnClick="ExecuteCleanFormatting" Icon="@IconName.ClearCss" Title="Clean Formatting">

</ButtonGroupButton>

</TelerikButtonGroup>

<input type="color" id="fontColor" name="fontColor" @bind="@FontColorSelected" />

<input type="color" id="backColor" name="backColor" @bind="@BackColorSelected" />

</EditorCustomTool>

</EditorCustomTools>

</TelerikEditor>

@code {

[Parameter]

public string Content { get; set; }

[Parameter]

public EventCallback<string> ContentChanged { get; set; }

[Parameter]

public bool IsPublic { get; set; }

[Parameter]

public EventCallback<bool> IsPublicChanged { get; set; }

[Parameter]

public bool ShowPublicTool { get; set; }

[Parameter]

public string EditorHeight { get; set; }

private string fontColor = "#000000";

private string FontColorSelected

{

get

{

return fontColor;

}

set

{

var changeEventArgs = new ChangeEventArgs();

changeEventArgs.Value = value;

Task.Run(() => ExecuteForeColor(changeEventArgs));

}

private string backColor = "#FFFFFF";

private string BackColorSelected

{

get

{

return backColor;

}

set

{

var changeEventArgs = new ChangeEventArgs();

changeEventArgs.Value = value;

Task.Run(() => ExecuteBackColor(changeEventArgs));

}

private TelerikEditor editor;

private List<IEditorTool> tools =

new List<IEditorTool>

{

new EditorButtonGroup(new Bold(), new Italic(), new Underline()),

new EditorButtonGroup(new AlignLeft(), new AlignCenter(), new AlignRight()),

new CustomTool("ColorTools"),

new UnorderedList(),

new InsertTable(),

new EditorButtonGroup(new AddRowBefore(), new AddRowAfter(), new MergeCells(), new SplitCell()),

new Format(),

new FontSize(),

new FontFamily()

};

protected override void OnInitialized()

{

if (ShowPublicTool)

{

tools.Add(new CustomTool("Public"));

}

base.OnInitialized();

}

private async Task ExecuteBackColor(ChangeEventArgs e)

{

backColor = e.Value.ToString();

await editor.ExecuteAsync(new FormatCommandArgs("backColor", backColor));

}

private async Task ExecuteCleanFormatting()

{

await editor.ExecuteAsync(new ToolCommandArgs("cleanFormatting"));

fontColor = "#000000";

backColor = "#ffffff";

}

private async Task ExecuteForeColor(ChangeEventArgs e)

{

fontColor = e.Value.ToString();

await editor.ExecuteAsync(new FormatCommandArgs("foreColor", fontColor));

}

private async Task ShowBackColor()

{

await jSRuntime.InvokeVoidAsync("showBackColor");

}

private async Task ShowFontColor()

{

await jSRuntime.InvokeVoidAsync("showFontColor");

}

Editor

answered on 06 Oct 2020

2 answers

1.2K+ views

Drag and Drop

Hello,
i was wondering if you are currently working on drag and drop ability or you have it in mind

General Discussions

answered on 06 Oct 2020

2 answers

513 views

Sort rows wit drag and drop

Hi,

Is it possible to sort rows in a grid dragging and dropping a row?

I see there is support for the jquery version of telerik, but I can't find anything for the blazor version

Grid

answered on 06 Oct 2020

7 answers

1.9K+ views

TelerikDatePicker in blazor

Hi,

i want to bind a DateTimeOffset typed property to TelerikDatePicker
is there any way to convert type in bind event ?
i just want to pick date if i bind it to TelerikDateTimePicker it would work but i dont want to select time

General Discussions

answered on 06 Oct 2020

5 answers

796 views

DateTimePicker not getting the offset

Hello,
this is my code

`
<TelerikDateTimePicker Format="dd MMM yyyy HH:mm:ss" @bind-Value="DatePickerValue"></TelerikDateTimePicker>

DateTimeOffset DatePickerValue { get; set; } = DateTimeOffset.Now;

`
and the odd thing is its just giving me the time without offset like it's giving me 14:50 while it's 19:20

DateTimePicker

answered on 06 Oct 2020

3 answers

174 views

FooterTemplate throws error

When attempting to implement a Footer Template on a Grid Column, I am getting the following runtime errors: "Unhandled exception rendering component: Value cannot be null" and "Unhandled exception rendering component: Object reference not set to an instance of an object". I have tried something as simple as

Test

</FooterTemplate>

And I still get that error, otherwise I get no errors on rendering the page without the FooterTemplate tags within the Grid Column.

Grid

answered on 02 Oct 2020