Questions on UI for Blazor Forum

9 answers

2.0K+ views

File upload

Do you have a time table on a file upload component?

I put together a working file uploader with a file type input and Blazor.FileReader but a built in component would be nice.

Also a request from one of our staff here, they would prefer if the file upload was a drag and drop.

A file upload that supports file browser and drag and drop would be nice.

General Discussions

answered on 07 Apr 2020

3 answers

496 views

ToolTip position with width only set

When I set the ToolTip width only (no height), the position gets jacked up. If I add a height it is fine. I would like to not have to set the height but rather let the height adjust to the content.

Tooltip

answered on 07 Apr 2020

1 answer

1.6K+ views

Adjusting layout for Grid

What's the best way to adjust the margins, padding and alignment for the contents of a row using the Telerik Grid?

I'm using the Bootstrap theme if it matters.

Grid

answered on 07 Apr 2020

3 answers

130 views

MessageBoxService in Azure

Hi

I'm using your implementation of MessageBoxService in blazor-ui-master.

All works fine but........ when I deploy the webapp in Azure happen a strange issue

When one client open the messagebox all the other connected user, in different places connected to the same web app, can see the same windows opened.

I know: this is a very stupid question, but I do not know how to solve it.

I've tried to modify in startup from addscoped to addtransient..... but I obtain the same issue.

Tnx

Window

answered on 07 Apr 2020

11 answers

1.7K+ views

Add Tab Dynamically After Initialization?

Is there a way to add a tab to the tabstrip dynamically after the initial rendering, without reloading/disrupting the rest of the tabstrip?

I can't seem to figure it out. The only thing I can get to work is putting in a placeholder tab, then dropping the content in later, but I would like to be able to control the position, title, etc...

==============================

<TabStripTab Title="X1">
@DynamicX1
</TabStripTab>

...

@code {

Telerik.Blazor.Components.TelerikTabStrip personTabStrip;
public int ActiveTabIndex { get; set; } = 0;
private RenderFragment DynamicX1;
protected override void OnInitialized()
{
app.NewTabRequested += OpenNewTab;
}
private void OpenNewTab(RenderFragment fragment)
{
DynamicX1 = fragment;
ActiveTabIndex = 1;
StateHasChanged();
}

}

TabStrip

answered on 06 Apr 2020

2 answers

771 views

TreeView Problems

I have been testing the Treeview control and found some problems:

1. Lazy Loading doesnt work for more than first-level as in the sample, but if there are more sublevels it doesnt work. Can you explain or put demo how this work?

2. Lazy Loading even on level 0 nodes I expand and unexpand some nodes and it expands some times and others dont.

3. As on demand loading not working well I tried to load everything at first and with a large collection like a directory/subdirectory structure and it didnt work.

See attached data, when loading all data in tree not all treeitems are shown. No errors are given.

TreeView

answered on 06 Apr 2020

3 answers

839 views

Programmatic Filtering using "IsContainedIn" generates incorrect query string when calling ToODataString

I am setting filters programmatically using the "FilterRow" example from here. Everything worked perfectly until I needed to implement a filter using FilterOperator.IsContainedIn.

I have confirmed that calling GridReadEventArgs.Request.ToODataString() is rendering the query string incorrectly by placing single quotes around the FilterDescriptor Member.

The below is a working example I created using the OData Blazor demo found on the Telerik GitHub here. I did have to update Blazor-UI to v2.9 for this demo to work.

If you uncomment the line in ReadItems that removes the extra single quotes, you'll see that the page functions as it should. I've also included a couple of screenshots which have the requestUrl rendered in the browser to better visualize what I mean.

@page "/"

@inject HttpClient Http

@using Telerik.Blazor.ExtensionMethods

@using WasmApp.Shared

@using Telerik.DataSource

<TelerikGrid Data=@GridData

Height="460px"

RowHeight="60"

PageSize="10"

Pageable="true"

Sortable="true"

FilterMode="@GridFilterMode.FilterRow"

OnRead=@ReadItems

TotalCount=@Total

OnStateInit="@((GridStateEventArgs<ODataProduct> args) => OnStateInit(args))">

<GridColumns>

<GridColumn Field="ProductID" />

<GridColumn Field="ProductName" />

<GridColumn Field="Discontinued" />

</GridColumns>

</TelerikGrid>

<h4>@appStatus</h4>

@code{

public List<ODataProduct> GridData { get; set; } = new List<ODataProduct>();

public int Total { get; set; } = 0;

public string appStatus { get; set; }

protected void OnStateInit(GridStateEventArgs<ODataProduct> args)

{

GridState<ODataProduct> gridState = new GridState<ODataProduct>()

{

FilterDescriptors = new List<FilterDescriptorBase>()

{

new FilterDescriptor() {Member = "ProductName", Operator = FilterOperator.IsContainedIn, Value = "Chai,Chang", MemberType = typeof(string)}

}

};

args.GridState = gridState;

}

protected async Task ReadItems(GridReadEventArgs args)

{

var baseUrl = "https://demos.telerik.com/kendo-ui/service-v4/odata/Products?";

var requestUrl = $"{baseUrl}{args.Request.ToODataString()}";

//requestUrl = requestUrl.Replace("%27ProductName%27", "ProductName");

appStatus = requestUrl;

Console.WriteLine(appStatus);

ODataResponseOrders response = await Http.GetJsonAsync<ODataResponseOrders>(requestUrl);

GridData = response.Products;

Total = response.Total;

}

Grid

answered on 06 Apr 2020

1 answer

386 views

Iconfield in ItemTemplate

Based on this thread: https://www.telerik.com/forums/bind-style-based-on-selected-node I am able to get a selected node. Demos shown treeview bindings without ItemTemplate.

I use:

<TreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" TextField="Text" HasChildrenField="HasChildren" IconField="Icon" UrlField="Url" />

This results in a treeview with icons. How can I have the same result using an ItemTemplate?

TreeView

answered on 03 Apr 2020

2 answers

497 views

Http Error 415 when trying to remove an uploaded file

I get the following error when attempting to remove an uploaded file. I'm using the example code from the Upload Overview Document https://docs.telerik.com/blazor-ui/components/upload/overview?_ga=2.20672573.407168315.1585784320-1941347284.1557871324

VS 2019 Output Window.

Failed to load resource: the server responded with a status of 415 () [https://localhost:44326/api/upload/remove]

Microsoft.AspNetCore.Routing.EndpointMiddleware: Information: Executed endpoint 'TestUpload.Controllers.UploadController.Remove (TestUpload)'
Microsoft.AspNetCore.Hosting.Diagnostics: Information: Request finished in 69.8482ms 415 application/problem+json; charset=utf-8

Browser Console.

telerik-blazor.js:39 POST https://localhost:44326/api/upload/remove 415
value @ telerik-blazor.js:39
value @ telerik-blazor.js:39
value @ telerik-blazor.js:39
value @ telerik-blazor.js:39
value @ telerik-blazor.js:39
u @ telerik-blazor.js:1
(anonymous) @ blazor.server.js:8
beginInvokeJSFromDotNet @ blazor.server.js:8
(anonymous) @ blazor.server.js:1
e.invokeClientMethod @ blazor.server.js:1
e.processIncomingData @ blazor.server.js:1
connection.onreceive @ blazor.server.js:1
i.onmessage @ blazor.server.js:1

Upload

answered on 03 Apr 2020

1 answer

472 views

Multi-column sort?

Hi,

Our company is evaluating Telerik's Blazor grid for our project, and it's looking like Telerik has just about all the features we need. One thing we would very much like is multi-column sort, but I didn't see that as an option currently.

Is multi-column sorting something that is available but not documented? Or is it on the roadmap? If it's on the roadmap, that would be awesome.

Grid

answered on 03 Apr 2020