Questions on UI for Blazor Forum

5 answers

2.6K+ views

How to Use Window and EditContext Together?

I would like to be able to use the Telerik window component within my forms... for example, a field where you select a person from a database - but finding that person is a complicated search - so instead of a dropdown, it's a display only field that has an ellipsis button next to it, and it would open a window, where they would find a person, select the person, and then pass back the selection to the main form.

But the telerik blazor window doesn't seem to render within the scope of the form that you nest it under, so the containing EditContext is not available, and I have tried everything I can think of to get the data back from the window and update the main form data behind the scenes, but the EditContext still doesn't know about the change.

Example Below (3 files)

FormTest.razor:

@page "/formtest/"

@using SMS5.BApp.Classes

<CascadingValue Value="@MyStuff">

<div class="sms-tab-content">

<EditForm EditContext="@StuffForm" @key="@("FormEditCtx1")">

<div>MAIN FORM:</div>

<div>

SomeStuff1: <InputText @bind-Value="@MyStuff.SomeStuff1"></InputText>

SomeStuff2: <InputText @bind-Value="@MyStuff.SomeStuff2"></InputText>

</div>

<div>Component Containing Window:</div>

<WindowTest2 OnChanged="@StuffGotUpdated"></WindowTest2>

</EditForm>

<div>

<div>Log of changes to form context:</div>

<textarea @bind="@Log" cols="150" rows="20"></textarea>

</div>

</CascadingValue>

@code {

protected EditContext StuffForm { get; set; }

public Stuff MyStuff = new Stuff() { SomeStuff1="foo", SomeStuff2="bar"};

public string Log { get; set; }

protected override void OnInitialized()

{

StuffForm = new EditContext(MyStuff);

StuffForm.OnFieldChanged += EditContext_OnFieldChanged;

}

private void EditContext_OnFieldChanged(object sender, FieldChangedEventArgs e)

{

// code to save goes here

var x = e.FieldIdentifier.FieldName;

Log += "--" + x +" changed.--";

StateHasChanged();

}

protected void StuffGotUpdated()

{

StateHasChanged();

}

WindowTest2.razor:

@using SMS5.BApp.Classes

<div>

<TelerikButton OnClick="@OpenWin">

Open Window

</TelerikButton>

</div>

<div>

<div>In window component, outside of window, from cascading parameter:</div>

Some Stuff 1:<InputText @bind-Value="@MyStuff.SomeStuff1"></InputText>

Some Stuff 2:<InputText @bind-Value="@MyStuff.SomeStuff2"></InputText>

</div>

<TelerikWindow Top="50px" Left="100px" Visible="@IsVisible">

<WindowTitle>

<strong>The Title</strong>

</WindowTitle>

<WindowActions>

<WindowAction Name="Minimize" />

<WindowAction Name="Maximize" />

<WindowAction Name="Close" />

</WindowActions>

<WindowContent>

<div>

<input @bind-value="@SomeStuff1Local" /> (local var copied to and back from SomeStuff1)

</div>

<div>

<input @bind-value="@MyStuff.SomeStuff2" /> (direct bind to MyStuff.SomeStuff2)

</div>

<TelerikButton OnClick="@CloseWin">

Close Window

</TelerikButton>

</WindowContent>

</TelerikWindow>

<TelerikButton OnClick="@InvokeCallback">

Refresh All

</TelerikButton>

@code {

[CascadingParameter] public Stuff MyStuff { get; set; }

[Parameter] public EventCallback<string> OnChanged { get; set; }

public bool IsVisible { get; set; } = false;

public string SomeStuff1Local { get; set; }

protected void OpenWin()

{

IsVisible = true;

SomeStuff1Local = MyStuff.SomeStuff1;

StateHasChanged();

}

protected void CloseWin()

{

IsVisible = false;

MyStuff.SomeStuff1 = SomeStuff1Local;

StateHasChanged();

}

protected void InvokeCallback()

{

OnChanged.InvokeAsync("blah");

}

protected override void OnInitialized()

{

}

Stuff.cs:

namespace SMS5.BApp.Classes

{

public class Stuff

{

public string SomeStuff1 { get; set; }

public string SomeStuff2 { get; set; }

}

p.s. I am still working of a reproducible example for the grid inline editing with EF proxy issue, it is going to take a little while to get that together.

Thanks

Portia

Window

answered on 25 Nov 2019

4 answers

676 views

Binding to an instance of the same type as the IEnumerable

Hi,

I guess this is a feature request! It would be good if I could set the bind-value to a property of the same type as the type of the IEnumerable used to populate the list.

At the moment I'm not sure if this is possible as it seems to insist on a Value Field, but I don't want to bind to a field I want to bind to the whole class. So instead of this:

<TelerikDropDownList Data="@NavSets" TItem="UiNavSet" TValue="Guid" Width="200px"

TextField="DisplayName"

ValueField="Id"

@bind-Value="@CurrentNavSetId" PopupHeight="100" />

@{

[Parameter]

public List<UiNavSet> NavSets { get; set; }

private Guid _currentNavSetId;

Guid CurrentNavSetId

{

get => _currentNavSetId;

set

{

if (_currentNavSetId != value)

{

_currentNavSetId = value;

ChangeNavSet(_currentNavSetId);

}

I want to do this:

<TelerikDropDownList Data="@NavSets" TItem="UiNavSet" TValue="UiNavSet" Width="200px"

TextField="DisplayName"

ValueField="?????"

@bind-Value="@CurrentNavSet" PopupHeight="100" />

@{

[Parameter]

public List<UiNavSet> NavSets { get; set; }

public UiNavSet CurrentNavSet { get; set; } // Bind to this

}

I'm not sure if this achievable, or what to put in ValueField??

Thanks.

DropDownList

answered on 22 Nov 2019

1 answer

3.7K+ views

System.Threading.Tasks.TaskCanceledException: A task was canceled

I think I found a bug in all components that use AnimationGroupBase.
How you can reproduce it...

Navigate to a page that has a component that uses AnimationGroupBase - in my case TreeView.

Hit refresh (F5) a couple of times

Wait about 60 seconds and you will get an exception from the title..

The problem is AnimationGroupBase. It has a async void Dispose method. Please fix it to be just void.

Here is a stack trace.

Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'uU2u6m_DXs2TW1iUNDEpwJB235BzcJVRHTXjF8kbbaU'.

System.Threading.Tasks.TaskCanceledException: A task was canceled.
   at Microsoft.JSInterop.JSRuntime.InvokeWithDefaultCancellation[T](String identifier, Object[] args)
   at Telerik.Blazor.Components.AnimationContainer.AnimationGroupBase.Dispose()
   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__139_0(Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource`1 completion, SendOrPostCallback d, Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.<>c.<.cctor>b__23_0(Object state)
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location where exception was thrown ---
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)

AnimationContainer

answered on 21 Nov 2019

1 answer

178 views

2.4 not visible in NuGet package manager under updates

Hi,

I have just updated to v2.3 but I dont see version 2.4 in my NuGet package manager. I have check "Include prerelease" but I get "No packages found". I have updated all my Microsoft.AspNetCore.* packages to 3.1.0.-preview3.19555.2

General Discussions

answered on 20 Nov 2019

2 answers

496 views

Error in 2.4

Upgraded to the latest and am getting these errors.

Project builds and so far seems to function regardless.

SeverityCodeDescriptionProjectFileLineSuppression State
ErrorCS0234The type or namespace name 'Shared' does not exist in the namespace 'PurchaseRequest' (are you missing an assembly reference?)PurchaseRequestC:\Users\rjd\source\repos\PurchaseRequest\PurchaseRequest\Pages\Index.razor1Active
ErrorCS0246The type or namespace name 'MainLayout' could not be found (are you missing a using directive or an assembly reference?)PurchaseRequestC:\Users\rjd\source\repos\PurchaseRequest\PurchaseRequest\Pages\Index.razor1Active
ErrorCS0234The type or namespace name 'Shared' does not exist in the namespace 'PurchaseRequest' (are you missing an assembly reference?)PurchaseRequestC:\Users\rjd\source\repos\PurchaseRequest\PurchaseRequest\Pages\Index.razor1Active

General Discussions

answered on 19 Nov 2019

1 answer

956 views

Change the command button content base on row value

I'm trying to change the content of a GridCommandButton based upon a value from the current row -

I was thinking it would be something like this:

<Template>
@{
var integrator = context as Integrator;
integrator.IsActive ? "Deactivate" : "Activate";
}
</Template>

</GridCommandButton>

Grid

answered on 18 Nov 2019

3 answers

118 views

Multiview

I've modified the calendar with a bit of js, months now above each calendar.

Calendar

answered on 18 Nov 2019

3 answers

281 views

Virtual Scrolling performance issue

Hi

I'm currently running a trial of Blazor UI, taking a look at the Grid and Virtual Scrolling. I've noticed a fairly heavy performance issue on chromium based browsers, bad enough that I wouldn't be able to release to production in it's current state. My project is Server Side Blazor and the performance issues seem related to mouse over/move, my grid currently only has a single item in it so no actual scrolling happening. I've tried with asp core 3.0 and 3.1 preview.

Firefox and MS Edge 44 runs the page just fine.

CPU usage for the Tab is very high during mouse movement and when taking a look at the browser tools Performance profiler a very long amount of time is spent Recalculating Styles and Updating the Layer Tree as attached.

Anyone had experience with similar issues or know of a fix?

Regards

Ben

Grid

answered on 11 Nov 2019

1 answer

721 views

Setting Field and Title in loop

Hi,

Here's what I want to do

@for (int i = 0; i < 14; i++)
{
<GridColumn Field="@CellDate + (i + 1).ToString()" Title="@SelectedStartDate.AddDays(i).ToShortDateString()" />
}

But I can't seem to get it to compile. It throws and error:

error RZ9986: Component attributes do not support complex content (mixed C# and markup).

So I get that it doesn't support complex content. I can easily put one line per field, but I don't know the title until runtime. How to set the title as desired?

Is there a way to throw this in a loop at all?

Thanks … Ed

Grid

answered on 11 Nov 2019

1 answer

319 views

backcolor of selected item

Hi,

Right now in my treeview the default behaviour seems to be that when the mouse goes over an item it is highlighted and when it leaves it's "unhighlighted".

I'd like to be able to have the highlighted state be sticky when a user selects/clicks/expands an item. This is to make it clear to the user which item is currently selected. Currently if the mouse leaves the item, it is no longer highlighted. I guess that would mean that when they move the mouse over other items that are NOT selected there would be 2 items highlighted: the one that is currently selected and the one that is hovered over. So if they clicked on the new item, the "old" selected item gets unhighlighted.

I'm certain there is some css gibberish that can do this, but I'm equally certain that my feeble mind can't quite figure it out.

Any help would be greatly appreciated.

Thanks … Ed

TreeView