Questions on UI for Blazor Forum

11 answers

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

804 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

890 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

405 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

520 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

489 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

5 answers

690 views

Breadcrumbs on the menu items

Posting it here since it is related to the menu items. Is there a way to show bread crumbs on the menu items?

Thanks.

Menu

answered on 02 Apr 2020

2 answers

3.3K+ views

display image stored in sql db

Hi,

Can someone share an example of how to get an image from a FileStream'ed table in sqlserver into a column on a grid?

Thanks … Ed

Grid

answered on 01 Apr 2020

2 answers

565 views

Is there a way to add html elements in the menu text?

I was hoping to put some icons in the Text section of the menu component.

On regular nav link I can do this.

<NavLink class="dropdown-item" href="settings/accountcategories">
<span class="oi oi-command" aria-hidden="true"></span> Account Categories
</NavLink>

Thanks.

Menu