Questions on UI for Blazor Forum

1 answer

1.3K+ views

Is there a way to apply more styles to the GridCommandButton's? I would like the icons and labels to be differentiated a little more like the following...

https://codepen.io/danielmariveles/pen/jPrwxv

Thanks,

Rob

Grid

answered on 09 Apr 2020

2 answers

957 views

Inline Form Controls Width Problem

I'm having a problem getting the Telerik controls to set their widths properly when there is more than one Telerik control in the same form-group row.

Short of setting the width to something fixed, the controls are not using to the proper space based on the bootstrap grid definitions. Rows in which there are only one Telerik control seem fine. I've experimented with a number of approaches but haven't been able to fix it. Any help would be appreciated.

@page "/formrowtest"

@if (showForm)

{

<div class="container">

<form class="form">

<div class="form-group row">

<label for="person" class="col-12 col-sm-2 col-form-label">Person</label>

<div class="col-12 col-sm-10">

<div class="input-group">

<TelerikTextBox Id="person"

Class="form-control" />

<div class="input-group-append">

<TelerikButton ButtonType="ButtonType.Button"

Icon="@IconName.Reset" />

</div>

<div class="form-group row">

<label for="organization" class="col-12 col-sm-2 col-form-label">Organization</label>

<div class="col-12 col-sm-10">

<div class="input-group">

<TelerikTextBox Id="organization"

Class="form-control" />

<div class="input-group-append">

<TelerikButton ButtonType="ButtonType.Button"

Icon="@IconName.Reset" />

</div>

<div class="form-group row">

<div class="col-sm-12 col-md-4">

<label class="sr-only" for="communicationtype">Type</label>

<TelerikDropDownList Id="communicationtype"

Data="@CommunicationTypes"

TextField="Description"

ValueField="TypeId"

PopupHeight="Auto"

PopupWidth="Auto"

@bind-Value="SelectedTypeId" />

</div>

<div class="col-sm-12 col-md-4">

<label class="sr-only" for="commdescription">Description</label>

<TelerikTextBox Id="commdescription"

Width="100%" />

</div>

<div class="col-12 col-sm-4">

<div class="input-group">

<TelerikTextBox Id="comminstructions" />

<div class="input-group-append">

<TelerikButton ButtonType="ButtonType.Button"

Icon="@IconName.Zoom" />

</div>

</form>

</div>

}

@code {

private bool showForm = false;

private class CommunicationType

{

public int TypeId { get; set; }

public string Description { get; set; }

}

List<CommunicationType> CommunicationTypes { get; set; } = new List<CommunicationType>();

public int SelectedTypeId { get; set; }

protected override async Task OnInitializedAsync()

{

CommunicationTypes.Add(new CommunicationType() { TypeId = 0, Description = "Unknown" });

CommunicationTypes.Add(new CommunicationType() { TypeId = 1, Description = "Office" });

CommunicationTypes.Add(new CommunicationType() { TypeId = 2, Description = "Direct" });

CommunicationTypes.Add(new CommunicationType() { TypeId = 3, Description = "Fax" });

CommunicationTypes.Add(new CommunicationType() { TypeId = 4, Description = "Cell" });

CommunicationTypes.Add(new CommunicationType() { TypeId = 5, Description = "Home" });

SelectedTypeId = 1;

showForm = true;

}

General Discussions

answered on 08 Apr 2020

9 answers

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

588 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.7K+ 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

152 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

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

868 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

999 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

430 views

[Solved] 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