Questions on UI for Blazor Forum

11 answers

283 views

OnSuccess not being called when response body is large

I have implemented the upload control to allow user's to upload a new avatar to their profile. In my SaveUrl I convert their uploaded file to a base64 string and return that string as the body of the Request's response. The problem is that the OnSuccess action is never called when I come back. If i simply return a blank string (or something short like "Hello World", it is called just fine, so the problem appears to be that the base64 string is rather long. I have not figured out why this is happening. Any help would be appreciated.

[HttpPost("saveavatar")]

[DisableRequestSizeLimit]

public async Task<IActionResult> SaveAvatar(IFormFile avatar)

{

string returnString = null;

if (avatar != null)

{

using var stream = new MemoryStream();

await avatar.CopyToAsync(stream);

byte[] croppedImageBytes = imageHelper.ScaleImage(stream, 80, 100, ImageFormat.Png);

string avatarBase64 = Convert.ToBase64String(croppedImageBytes);

returnString = $"data:image/png;{avatarBase64}";

}

return Content(returnString);

}

private void OnAvatarSuccess(UploadSuccessEventArgs e)

{

string content = e.Request.ResponseText;

if (e.Operation == UploadOperationType.Upload)

{

staffMember.Avatar = content;

}

Upload

answered on 18 Nov 2020

6 answers

994 views

Bug? AutoComplete inside EditForm - infinite loop with OnParametersSet

Hi, I'm trialling the latest version at the moment (v2.15.0) with a WebAssembly project and I've encountered an odd issue.

Essentially, when I have a component with a Guid parameter, and a TelerikAutoComplete component inside an EditForm there's some kind of render loop happening on the page. The browser tools show the DOM being updated constantly and the OnParametersSet override is being called constantly. Tested in MS Edge 83.

Moving the AutoComplete outside the EditForm or changing the parameter to something else such as an Int32 causes the issue to no longer present itself.

Not sure if this is being caused by the Telerik component or a bug in Blazor itself, but I imagine it's a fairly common scenario.

Simple reproduction code below.

@page "/customers/test/{Parameter1:guid}"

@if (Model != null)

{

<EditForm Model="Model">

<TelerikAutoComplete Data="@Fruit"

Filterable="true"

@bind-Value="@Model.SelectedFruit"

ValueField="@(nameof(SimpleObject.DisplayName))" />

</EditForm>

}

@code {

[Parameter]

public Guid Parameter1 { get; set; }

public SimpleTestModel Model { get; set; }

public IEnumerable<SimpleObject> Fruit { get; set; }

protected override async Task OnInitializedAsync()

{

await Task.Delay(100);

this.Fruit = new SimpleObject[]

{

new SimpleObject(1, "Lemon"),

new SimpleObject(2, "Orange"),

new SimpleObject(3, "Kiwi")

};

}

protected override async Task OnParametersSetAsync()

{

Console.WriteLine("ParametersSet");

await Task.Delay(100);

this.Model = new SimpleTestModel();

}

public class SimpleTestModel

{

public string SelectedFruit { get; set; }

}

public class SimpleObject

{

public SimpleObject(int id, string name)

{

this.Id = id;

this.DisplayName = name;

}

public int Id { get; set; }

public string DisplayName { get; set; }

}

AutoComplete

answered on 17 Nov 2020

8 answers

978 views

Individual cell back color

Hi,

I'd like to be able to set the backcolor on a cell by cell basis. I think the way is to do this with a template, but I don't know how to get the <td> element to style.

Any pointers would be greatly appreciated.

Thanks .. Ed

Grid

answered on 16 Nov 2020

3 answers

249 views

Telerik Blazor Application Template JavaScript Error in Edge

I created a new project as follows:

Telerik C# Blazor Application, Hosting Model Type: Web Assembly, Target Framework .NET 5.0, CRUD, Form, Chart

Before making any changes, I tried to run it. It works in Chrome, but in Edge the page only shows:

Loading...

In the browser's Developer Tools I see:

Syntax error in blazor.webassembly.js

I'm using Visual Studio Community 2019 version 16.9.0 Preview 1.0.

Any idea how to resolve this?

Thanks,

Tim

General Discussions

answered on 16 Nov 2020

2 answers

94 views

UpdateHandler does not get triggered when entering first value in grid

Hi,

now I discovered another Problem depending on my last Thread: https://www.telerik.com/forums/avoid-multiple-calls-of-async-updatehandler-when-pressing-enter

Your solution works fine as long as I do not enter the very first value in my grid and it makes no difference which row is changed.
When I enter the first value then the UpdateHandler does not get triggered. Only my ChangeHandler.

Do you have an idea why this is happening?

Grid

answered on 15 Nov 2020

3 answers

2.0K+ views

Dropdowns within column template

What is the best way to handle dropdowns sitting in a grid within a column template?

@bind-Value doesn't work well because it sets the selected value of every dropdown in the grid.

I want to be able to send the class object from the current row in the grid to a method on dropdown change, and also know what the new value is of the dropdown.

DropDownList

answered on 13 Nov 2020

5 answers

1.0K+ views

avoid multiple calls of async UpdateHandler when pressing enter

Hi,

I have a problem that you described here: https://docs.telerik.com/blazor-ui/components/grid/editing/incell

Unfortunately your proposed solution doesn't work or am I missing something?

I am using an EditorTemplate with a method called ChangeHandler(). After clicking in another row everything works fine but if I leave the cell by pressing enter the UpdateHandler gets called more than two times and comparing args.Item with the GridItem doesn't help because the calls are asynchronous.

I implemented it like this:

public async Task ChangeHandler()

{

var state = Grid?.GetState();

if (state.EditItem != null)

{

await UpdateHandler(new GridCommandEventArgs()

{

Item = state.EditItem,

Field = state.EditField

});

}

state.OriginalEditItem = state.EditItem = default;

await Task.Delay(50); // let the grid re-render and close the cell if keyboard navigation is enabled

await Grid?.SetState(state);

}

public async Task UpdateHandler(GridCommandEventArgs args)

{

var viewModel = args.Item as ViewModel;

var index = GridItems.FindIndex(i => i.Id == viewModel.Id);

if (index != -1)

{

if (GridItems[index].Equals(viewModel))

return;

...some more code

//save data

UpdateGridMengen(viewModel);

...

StateHasChanged();

}

Grid

answered on 13 Nov 2020

1 answer

912 views

Set Width to TextArea

Since Width is not an option for TextArea, is there anyway to change the size of the TextArea? E.g. set it to 80% of the available div length etc?

thanks

Kevin

TextArea

answered on 13 Nov 2020

1 answer

183 views

Set titles by grid width

Hi,

how can I check the actual grid width to set abbreviated titles on small devices?

Regards,

Peter

Grid

answered on 13 Nov 2020

16 answers

1.9K+ views

Could not find 'initGrid' in 'window.TelerikBlazor'.

Hi, Marin.
Today I spotted some problem in console. My be it's appeared after new 1.6.0 version. Path to java script was not changed long time and this path was taken from
https://docs.telerik.com/blazor-ui/getting-started/client-blazor

<script src="_content/telerik.ui.for.blazor.trial/js/telerik-blazor.js" defer></script>

Grid

answered on 12 Nov 2020