Questions on UI for Blazor Forum

2 answers

670 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

524 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

5 answers

573 views

Styles not coming accross when using libman.json

This is not working when getting styles from libman.json. It would appear that even though it says to use the "latest" it is not getting the latest. When using latest, it does not get the styles for the loader. I finally had to switch to using the files in _content

{

"library": "@progress/kendo-theme-default@latest",

"destination": "wwwroot/css/kendo-themes/default",

"files": [

"dist/all.css"

],

"provider": "unpkg"

},

{

"library": "@progress/kendo-theme-bootstrap@latest",

"destination": "wwwroot/css/kendo-themes/bootstrap",

"files": [

"dist/all.css"

],

"provider": "unpkg"

},

{

"library": "@progress/kendo-theme-material@latest",

"destination": "wwwroot/css/kendo-themes/material",

"files": [

"dist/all.css"

],

"provider": "unpkg"

},

Loader

answered on 01 Oct 2020

1 answer

438 views

EditorTemplate on TAB key press

Hello,

I'm using the EditorTemplate where I have TelerikNumericTextBox. When I press TAB key the NumercTextBox does not disappear, but there it would be something else that I would like to achieve, when I press TAB key the value of that input should be saved and the user should go to the next input. If the row ends then the user should go to the first editable input from the next row.

Is this possible to achieve somehow?

Thank you,

Cipri

TreeList

answered on 29 Sep 2020

1 answer

1.0K+ views

[Solved] TileLayout header text color

I am using the Sass Themebuilder and trying to change the color of the TileLayout header text. It doesn't seem to be affected by the "Header text" property but instead by the "Component text".

Is that by design? It seems wrong.

TileLayout

answered on 29 Sep 2020

1 answer

566 views

Access context in HeaderTemplate

Hello,

Is there any way to access the context in the HeaderTemplate as I want to set some dynamic content based on some values from the model?

Thank you.

Best regards,

Cipri

TreeList

answered on 29 Sep 2020

1 answer

1.2K+ views

validation on row edit

Hello

is there a way to add validation on inline edit mode ?

Grid

answered on 29 Sep 2020

3 answers

128 views

Did Cards drop off the roadmap?

I remember seeing Cards on the Blazor UI Roadmap. They were scheduled for sometime this fall I think. Now I don't see them on the roadmap. Have they been dropped? Was looking forward to using them since a lot of our apps lean in to material design.

General Discussions

answered on 29 Sep 2020

2 answers

625 views

[Solved] Dynamically create tileLayoutItem from collection.

I'm trying to use the TileLayout to create a photo list viewer similar to your example on the TileLayout overview page. My list of photos is coming from a collection so the number of TileLayoutItem is variable. How would I do this? Here is the code I've tried. Should i use your pager component?

<TelerikTileLayout Columns="5"
ColumnWidth="300px"
RowHeight="235px"
Reorderable="true">
<TileLayoutItems>
@foreach (var item in photoIdList)
{
<TileLayoutItem>
<content>
<div class="card">
<img card-img-top alt="Card image cap" src="https://myphotoapi/image/api/photo?pid=@item&w=167&h=125" />
</div>
</content>
</TileLayoutItem>
}
</TileLayoutItems>
</TelerikTileLayout>

I keep getting this error:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Object of type 'Telerik.Blazor.Components.TileLayoutItem' does not have a property matching the name 'ChildContent'.
System.InvalidOperationException: Object of type 'Telerik.Blazor.Components.TileLayoutItem' does not have a property matching the name 'ChildContent'.

TileLayout