Questions on UI for Blazor Forum

1 answer

204 views

Would be fine if when you click on a filterable combobox the whole text in it will be selected, so you can click and start digit new text filter without delete the old text before.

ComboBox

answered on 09 Oct 2020

3 answers

2.0K+ views

Export to Excel Programmatically

How can I programmatically export the grid to excel? I have a right click context menu that has an option for "export". When I click this item I need to perform the export.

Grid

answered on 09 Oct 2020

1 answer

258 views

Gantt Chart?

Any plans for a Gantt Chart?

Any ideas how I can use the Ajax Gantt Control in a Blazor app / page?

thx again

Charts

answered on 08 Oct 2020

3 answers

597 views

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

217 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

4.6K+ views

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.6K+ 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

495 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

476 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