Questions on UI for Blazor Forum

3 answers

308 views

Hi,

Right now, when I click on a highlighted treeview item it only fires the onClick if I click directly on the text. How can I add some css to make the highlighted area clickable. By highlighted I mean:

div.k-treeview span.k-in:hover {

background-color: pink;

color: black;

}

TreeView

answered on 29 Nov 2019

1 answer

5.3K+ views

Grid row style

How to apply style to a row (for example background color) inside a Grid? I've tried RowTemplate but the contents of a RowTemplate must be <td> elemets. If I wrap <td> elements inside a <div> the layout breaks.

Grid

answered on 29 Nov 2019

1 answer

464 views

Row template with GridCheckboxColumn

Hi,

I'm trying to implementa a RowTemplate. My grid has a GridCheckboxColumn as a first column but I don't know what to put in the first <td> element.
I have tried putting <input type="checkbox" /> but context variable has no knowledge of a checked row.

Any help is appreciated.

Grid

answered on 29 Nov 2019

2 answers

179 views

causesvalidation = false?

How to do this with the Telerik button?

Thanks … Ed

Button

answered on 27 Nov 2019

3 answers

411 views

Is there a way to access grid from inside @code block?

once a grid is declared in markup, and for columns that are sortable, reorderable and resizable. I want to persist that settting from grid UI and later apply those settings back to grid, in @code section (some event handler handles save column setting, apply column settings)?

this requires @code block to be able to access the grid object and the columns inside it. it is possible?

Grid

answered on 26 Nov 2019

1 answer

4.7K+ views

Timeouts

There are times where my blazor application looses connection over the web sockets, generally sue to inactivity.

Example: a user might open a telerik window, enter some values in some text boxes, come back later and want to submit what they entered but unless they refresh the page no buttons work on the page.

I am going to give them a save status option to save current work if they have to leave for a bit but is there a setting I should be enabling somewhere to help with connection timeouts?

General Discussions

answered on 25 Nov 2019

2 answers

107 views

Frozen columns?

Hi,

Are there plans to incorporate frozen/locked columns?

Thanks … Ed

Grid

answered on 25 Nov 2019

5 answers

2.5K+ 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

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