Questions on UI for Blazor Forum

7 answers

5.0K+ views

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

560 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

506 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.8K+ 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

785 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

171 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

2 answers

660 views

ValueChanged example does not work

I am following the example for the ValueChanged event with setting an initial value and it does not work.

I get the error that ValueExpression is required. I try putting that in, but now when I click on the numeric textbox,

Below is the code in your documentation for the example

from the handler: @result

<br />

from model: @theTbValue

<br />

<TelerikNumericTextBox Value="@theTbValue" ValueChanged="@( (decimal v) => MyValueChangeHandler(v) )"></TelerikNumericTextBox>

@code {

string result;

decimal theTbValue { get; set; } = 1.2345m;

private void MyValueChangeHandler(decimal theUserInput)

{

result = string.Format("The user entered: {0}", theUserInput);

//you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value

theTbValue = theUserInput;

}

NumericTextBox

answered on 01 Oct 2020

2 answers

510 views

Validation in ListView editing Problem

I am following the example for Validation in ListView Editing but I am having a problem.

The problem is that after I Save and Update to the ListView, it is calling CleanUpValidation but then is getting back into the code in EditTemplate and is therefore setting the currEditItem and currEditContext again to the Model that I just updated.

This is causing problems if I try to add a new item after the update it thinks the new item is valid when it isn't because the currEditContext's model still has the item I just updated.

I can not figure out why it is getting back into the EditTemplate after Updating?

<EditTemplate>

@{

currEditItem = context;

if (currEditItem.Id == Guid.Empty)

{

currEditItem.Id = Guid.NewGuid();

currEditItem.UserId = userId;

currEditItem.FullName = GetUserName();

currEditItem.DateWorked = DateTime.Today;

currEditItem.TicketId = Ticket.Id;

}

if (currEditContext == null)

{

currEditContext = new EditContext(currEditItem);

}

<EditForm EditContext="@currEditContext" Context="formContext">

<DataAnnotationsValidator />

<ValidationSummary />

<div class="container-fluid editTimeEntry">

<div class="row">

<div class="col">

<ListViewCommandButton Command="Save" Class="float-right mr-1" Icon="@IconName.Save" Title="Save"></ListViewCommandButton>

<ListViewCommandButton Command="Cancel" Class="float-right" Icon="@IconName.Cancel" Title="Cancel"></ListViewCommandButton>

</div>

<div class="row">

<label for="Staff" class="font-weight-bold col-1">Staff</label>

<div class="col">

@if (isAdmin)

{

<TelerikDropDownList @bind-Value="@currEditItem.UserId" Data="@staff" Id="Staff"

ValueField="Id" TextField="FullName">

</TelerikDropDownList>

}

else

{

<span>@currEditItem.FullName</span>

}

</div>

<div class="row">

<label for="DateWorked" class="font-weight-bold col-1">Work Date</label>

<div class="col">

<TelerikDatePicker Id="DateWorked" @bind-Value="currEditItem.DateWorked" Format="M/d/yyyy" Max="DateTime.Today"></TelerikDatePicker>

</div>

<div class="row">

<label class="font-weight-bold col-1">Time spent</label>

<div class="col-2">

<label for="TimeWorked" class="mr-1">Time Worked</label>

<span @ref="timeWorked" @onfocusin="(() => SelectOnFocus(timeWorked))">

<TelerikNumericTextBox Id="TimeWorked" Value="@currEditItem.TimeWorked"

Format="#0.00 hr" Decimals="2" Step=".25"

ValueChanged="@( (double v) => TimeWorkedChangeHandler(v) )"

ValueExpression="@( () => currEditItem.TimeWorked )">

</TelerikNumericTextBox>

</span>

</div>

<div class="col-2">

<label for="BillabeTime" class="mr-1">Billable Time</label>

<span @ref="billableTime" @onfocusin="(() => SelectOnFocus(billableTime))">

<TelerikNumericTextBox Id="BillabeTime" Value="@currEditItem.BillableTimeWorked"

Format="#0.00 hr" Decimals="2" Step=".25"

ValueChanged="@( (double v) => BillableTimeWorkedChangeHandler(v) )"

ValueExpression="@( () => currEditItem.BillableTimeWorked )">

</TelerikNumericTextBox>

</span>

</div>

<div class="col"></div>

</div>

<div class="row">

<label for="Comments" class="font-weight-bold col-1">Comments</label>

<div class="col">

<InputTextArea @bind-Value="currEditItem.Comments" />

</div>

</EditForm>

}

</EditTemplate>

private async Task UpdateTimeEntryHandler(ListViewCommandEventArgs args)

{

var timeEntry = (TimeEntryViewModel)args.Item;

if (!currEditContext.Validate())

{

args.IsCancelled = true;

return;

}

var dbTimeEntry = mapper.Map<TimeEntryViewModel, TimeEntry>(timeEntry);

var result = await ticketRepository.SaveTimeEntry(dbTimeEntry);

if (result)

{

int index = Ticket.TimeEntries.FindIndex(te => te.Id == timeEntry.Id);

if (index > -1)

{

Ticket.TimeEntries[index] = mapper.Map<TimeEntry, TimeEntryViewModel>(dbTimeEntry);

}

UpdateTotals();

}

CleanUpValidation();

}

private void CleanUpValidation()

{

currEditContext = null;

currEditItem = null;

}

ListView

answered on 01 Oct 2020