Questions on UI for Blazor Forum

6 answers

1.1K+ views

Clear FilterCellTemplate TelerikComboBox value on Button click

I have a Blazor Telerik Grid with FilterCellTemplate and a TelerikComboBox inside it, I would like to clear the selected value inside the ComboBox on button click

I am trying to create functionality to clear all the filters for a Telerik Grid on a button click event.

TelerikGrid has GridColumn that has FilterCellTemplate which is contains a TelerikComboBox.

Grid

answered on 23 Apr 2021

1 answer

603 views

GridColumn Template with AutoComplete

Hi,

Trying to use AutoComplete within the Grid as the option to fill data on a column - with EditTemplate, however, when open to Add a new item, the list of values is not presented.

Changing from AutoComplete to DropDownList, works as expected.

Could you please indicate on the snippet below what is wrong?

<GridColumn Field="@(nameof(ItemRateio.Projeto))" Title="Projeto" Width="150px">

<EditorTemplate>

@{

var ItemToEdit = context as ItemRateio;

<TelerikAutoComplete Data="@Projects"

Placeholder="Selecione Projeto"

@bind-Value="@ItemToEdit.Projeto"

>

</TelerikAutoComplete>

}

</EditorTemplate>

</GridColumn>

Projects is a List<string> and ItemRateio.Projeto is also a string.

Thanks

Grid

answered on 23 Apr 2021

1 answer

624 views

Is the Field attribute of FormItem needed?

If I am using templates for all my FieldItems, does each FieldItem need to have the Field attribute to associate the fielditem with the corresponding field in the data model?

See the sample markup below.

Thanks

<TelerikForm EditContext="@EditContext"

Columns="2"

ColumnSpacing="20px"

Orientation="FormOrientation.Vertical"

OnValidSubmit="OnValidSubmit">

<FormValidation>

<FluentValidationValidator />

</FormValidation>

<FormItems>

<FormGroup LabelText="Set options">

<FormItem>

<Template>

<label class="k-label k-form-label" for="setName">Set Name</label>

<TelerikTextBox Id="setName" @bind-Value="@model.SetName"></TelerikTextBox>

</Template>

</FormItem>

<FormItem>

<Template>

<TelerikDateRangePicker @bind-StartValue="@model.StartDate"

@bind-EndValue="@model.EndDate"

Min="@ViewModel.MinStartDate"

StartId="startDate"

EndId="endDate"

DisabledDates="@ViewModel.DisabledDates">

</TelerikDateRangePicker>

</Template>

</FormItem>

<FormGroup Columns="2">

<FormItem>

<Template>

<label class="k-label k-form-label" for="allowAutoFill">Allow Auto Fill</label>

<TelerikCheckBox Id="allowAutoFill" @bind-Value="@model.AllowAutoFill"></TelerikCheckBox>

</Template>

</FormItem>

<FormItem Field="@nameof(model.RequiredRecsToExpire)">

<Template>

<label class="k-label k-form-label">Required Recs to Expire</label>

<TelerikSlider @bind-Value="@model.RequiredRecsToExpire"

Min="0"

Max="20"

SmallStep="1"

LargeStep="5"

ShowButtons="false" />

</Template>

</FormItem>

</FormGroup>

<FormGroup LabelText="Initial starting point">

<FormItem LabelText="existingSets">

<Template>

<label class="k-label k-form-label" for="existingSets">From existing recommendation sets</label>

<RecSetSelector AvailableSets="@ViewModel.AvailableSets"

IsNew="true"

SelectedSetId="@ViewModel.SelectedSetId"

OnSetSelected="@OnSetSelected" />

</Template>

</FormItem>

<FormItem>

<Template>

<label class="k-label k-form-label" for="eanList">From a list of EANs</label>

<TelerikTextArea Id="eanList"

@bind-Value="@ViewModel.EanList"

AutoSize="true">

</TelerikTextArea>

</Template>

</FormItem>

</FormGroup>

<FormItem ColSpan="2">

<Template>

@*<br />*@

<label class="k-label k-form-label" for="comment">Comments</label>

<TelerikTextArea Id="comment"

@bind-Value="@model.Comment"

AutoSize="true">

</TelerikTextArea>

</Template>

</FormItem>

<ValidationSummary />

</FormItems>

<FormButtons>

<TelerikButton ButtonType="ButtonType.Button" OnClick="OnCancel">Cancel</TelerikButton>

<TelerikButton ButtonType="ButtonType.Submit" Primary="true">Save</TelerikButton>

</FormButtons>

</TelerikForm>

Form

answered on 23 Apr 2021

2 answers

733 views

Bind Value After Creating a surrounding component on top of drop down list or combo box

I am trying to create a reusable component which binds to a data service where I pass the binded value to the parent and get the data from the Telerik Drop List / Combo box, etc. What am I missing in regards to getting this data back up the the parent model? When I submit, it provides a value of null. #StillLearning

Code example concept:

Razor:

@inherits ActiveProviderTypeDropDownListBase

<TelerikComboBox Data="@ProviderTypes"
OnRead="@OnReadAsync"
TValue="string"
TItem="string"
AllowCustom="true"
@bind-Value="@BindValue"
Width="100%" />

Base:

public class ActiveProviderTypeDropDownListBase : ComponentBase
{
[Inject] ProviderDataService ProviderDataService { get; set; }
[Parameter] public string Width { get; set; }
[Parameter] public string BindValue { get;set; }

public List<string> ProviderTypes { get; set; }

public async Task OnReadAsync()
{
ProviderTypes = await ProviderDataService.GetActiveProviderTypesAsync();
}
}

Reusable Component For Elsewhere Elsewhere:

<ActiveProviderTypeDropDownList Width="100%"
BindValue="DialogBaseService.ValueToCreate.ProviderTypeName"

DropDownList

answered on 23 Apr 2021

2 answers

329 views

No chips show

Hello,

Is it possible to not show the selection at all on multiselect component. I mean, I don't want to show the chips. Just the current user input or placeholder text.

Thanks!

MultiSelect

answered on 22 Apr 2021

3 answers

2.5K+ views

I need to disable the check box

hello,

I need to disable checkboxes when a button is pressed in a grid (GridCheckboxColumn), I tried with a template row but I couldn't find how to persist the selection between the column and the checkboxes created on the template

if anyone could help me please, it would be appreciated

MultiSelect

answered on 22 Apr 2021

3 answers

833 views

Fit Column Width to Content

V2.23 includes the ability to fit column width to content. I can't see how to enable it. Does anyone know?

Regards,

Gerhard

Grid

answered on 22 Apr 2021

1 answer

674 views

DropDownList with nested complex model data

Hi,

Can the DropDownList TextField property access fields on nested objects?

For example:

01.<TelerikDropDownList

02. TItem="PersonModel"

03. TValue="int"

04. Data="@Data"

05. ValueField="@nameof(PersonModel.PersonId)"

06. TextField="@nameof(PersonModel.Person.DisplayName)">

07.</TelerikDropDownList>

08.@code {

09. private IEnumerable<PersonModel> Data { get; set; }

10.

11. protected override Task OnInitializedAsync()

12. {

13. Data = new PersonModel[]

14. {

15. new() { PersonId = 1, Person = new Person { FirstName = "A", LastName = "B"}},

16. new() { PersonId = 2, Person = new Person { FirstName = "C", LastName = "D"}},

17. new() { PersonId = 3, Person = new Person { FirstName = "E", LastName = "F"}}

18. };

19.

20. return base.OnInitializedAsync();

21. }

22.

23. private class PersonModel

24. {

25. public int PersonId { get; init; }

26.

27. public Person Person { get; init; }

28. }

29.

30. private class Person

31. {

32. public string FirstName { get; init; }

33.

34. public string LastName { get; init; }

35.

36. public string DisplayName => $"{FirstName} {LastName}";

37. }

38.}

DropDownList

answered on 21 Apr 2021

1 answer

114 views

Visually indicate validation error e.g. mandatory file

Hi all.

I am just wondering if anyone has any ideas for making it possible to visually indicate failed validation on an Upload control?

To be clear, I have the validation working, it's just that there is no visual clue to the problem - the upload control is not highlighted like other controls are.

I looked at the example at https://github.com/telerik/blazor-ui/tree/master/upload/form-validation but even on there, you can see the issue - name and email address are highlighted but CV is not.

Any thoughts for a workaround?

Thanks,

Dean

Upload

answered on 21 Apr 2021

1 answer

111 views

calendar appointment

hallo,

I wanna make appointment in calendar.

how I can do this?

Calendar

answered on 21 Apr 2021