Questions on UI for Blazor Forum

1 answer

196 views

Group, sort and filter on whole dataset

Hi,

It seems as though these things only work on the current page. Is there a way to do these things at teh dataset level?

Any guidance would be great!

Thanks …. Ed

Grid

answered on 13 Apr 2020

1 answer

1.0K+ views

How can I add an icon to a TextBox?

I would like to add a icon in the TextBox, like a search icon, or email or phone. (see attached file) Is this possible?

TextBox

answered on 13 Apr 2020

8 answers

1.9K+ views

'Addon' buttons with Telerik TextBox

Is there anyway to do an 'addon' button with the TelerikTextBox?

I've tried the following but it puts the button on it's own line:

<div class="col-11 col-md-8">

<div class="input-group">

<TelerikTextBox Width="100%" Class="form-control" Id="personname"

ValueChanged="@((string s) => PersonName_OnValueChanged(s))"

Value="@logItem.PersonName"

ValueExpression="@(() => logItem.PersonName)" />

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

<button class="btn btn-outline-primary" type="button" id="clearpersonname">X</button>

</div>

In this case I want to add a way for the user to clear the contents of the TextBox. Another way would be to add an 'X' to the right side of the textbox, but I don't see any documentation to support that method either. Any suggestions?

TextBox

answered on 13 Apr 2020

1 answer

483 views

Customize Edit Appointments

Hi

Is their anyway to make the Edit Appointments - ReadOnly - and remove the Save button.

What about removing or changing the labels?

thx in advance

Scheduler

answered on 13 Apr 2020

1 answer

1.2K+ views

Styling Command Button's

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

907 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.1K+ 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

526 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