Questions on UI for Blazor Forum

1 answer

264 views

Focus Rectangle for TextBox broken in Bootstrap

Starting with version 2.13 the focus rectangle is no longer resetting after the control loses focus. (See attached image)

I'm using the Telerik Bootstrap CSS style sheet:

<link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-bootstrap/all.css" rel="stylesheet" />

This reproduces the problem: It works with version 2.12 and before.

@page "/TextEditFocusPage"

<h3>Edit To Do Item</h3>

<EditForm Model="ToDoItem" OnInvalidSubmit="OnValidSubmit">

<DataAnnotationsValidator />

<div class="form">

<div class="form-group row">

<label for="activity" class="col-3 col-form-label">Activity</label>

<div class="col-9">

<TelerikTextBox Id="activity"

Class="form-control"

@bind-Value="@ToDoItem.Activity" />

</div>

<div class="form-group row">

<label for="description" class="col-3 col-form-label">Description</label>

<div class="col-9">

<TelerikTextBox Id="description"

Class="form-control"

@bind-Value="@ToDoItem.Description" />

</div>

<div class="form-group row">

<label for="status" class="col-3 col-form-label">Status</label>

<div class="col-9">

<TelerikDropDownList Id="status"

Data="@StatusTypes"

TextField="Description"

ValueField="StatusId"

@bind-Value="ToDoItem.Status" />

</div>

<div class="form-group row">

<label for="notes" class="col-3 col-form-label">Notes</label>

<div class="col-9">

<InputTextArea Id="notes"

class="k-textarea"

style="width: 100%;"

@bind-Value="@ToDoItem.Notes" />

</div>

<div class="form-group row">

<label for="duedate" class="col-3 col-form-label">Due</label>

<div class="col-9">

<TelerikDatePicker Id="duedate"

@bind-Value="@ToDoItem.DueDate"

PopupHeight="Auto"

PopupWidth="Auto"

Width="100%" />

</div>

</EditForm>

@code {

public ToDo ToDoItem { get; set; } = new ToDo();

public List<StatusType> StatusTypes { get; set; }

protected override void OnInitialized()

{

StatusTypes = GetStatusTypes();

ToDoItem.Status = 2;

ToDoItem.Activity = "Pick Up Food";

ToDoItem.Description = "Order will be ready at 5:00pm";

ToDoItem.DueDate = DateTime.Today;

base.OnInitialized();

}

private void OnValidSubmit()

{

}

List<StatusType> GetStatusTypes()

{

return new List<StatusType>()

{

new StatusType(){StatusId=1, Description="Urgent"},

new StatusType(){StatusId=2, Description="Normal"},

new StatusType(){StatusId=3, Description="Low"}

};

}

public class ToDo

{

public string Activity { get; set; }

public string Description { get; set; }

public int Status { get; set; }

public string Notes { get; set; }

public DateTime DueDate { get; set; }

}

public class StatusType

{

public int StatusId { get; set; }

public string Description { get; set; }

}

TextBox

answered on 27 May 2020

2 answers

1.9K+ views

Min Max Values

Hello:

Is there no way to limit the value of a NumericTextBox with a Type of Int32 (or anything other than a decimal value)?

NumericTextBox

answered on 25 May 2020

1 answer

2.9K+ views

Execute Method only on Enter for Text Box.

I want to be able to use either the enter key, or a button to search and I cant figure out a way to only call the search method on enter when using OnChange().

<div class="form-group">

<TelerikTextBox Id="look-up-value" @bind-Value="LookUpValue" Class="form-control" OnChange="(async () => { await LookUpShipment(); })"></TelerikTextBox>

</div>

<TelerikButton Class="btn" Primary="true" OnClick="LookUpShipment">@TranslationService[Label.Search]</TelerikButton>

TextBox

answered on 25 May 2020

7 answers

2.2K+ views

Grid validation

From my initial experiments and looking at the documentation it seems like the TelerikGrid component doesn't currently have features for performing data validation, is that correct? If so, are there plans to add validation for the grid, and if so what sort of timescale are we looking at for those?

General Discussions

answered on 24 May 2020

1 answer

141 views

Populate cells from object[][]

Hi,

I don't know how my data are organised, I can't create a class about it (this is CSV file import, any kind of file)

I want to display this is a grid.

<TelerikGrid Data="@datable.rows"

<GridColumns>

@{

for (int i = 0; i < datable.columns.Count; i++)

{

<GridColumn Field="@(i.ToString())">

<Template>

@(((QFLib.DataRow)context)[i].ToString()) // How to evaluate i here ?

</Template>

</GridColumn>

}

</GridColumns>

</TelerikGrid>

It doens't work because the template during code generation doesn't evaluate i

Is it possible ?

Another way of doing this ?

Sincerely,

Remi

Grid

answered on 22 May 2020

1 answer

1.4K+ views

Preview Image

Can I priview image in onselect event ?

Upload

answered on 21 May 2020

5 answers

1.2K+ views

Resizing the EditGridMode Popup?

Hello!

Is there a way to resize the modal window from Editable="EditGridMode.Popup" on a DataGrid?

I did find https://github.com/telerik/blazor-ui/tree/master/grid/custom-popup-form via another forum thread, but that seems like wild overkill just to change the size of the modal by like 50px.

Thanks,

Andrew

Grid