Questions on UI for Blazor Forum

4 answers

612 views

Labels

Hi,

You have those marvelous labels for textboxes. How can I do the same thing for other widgets like the dropdownlist for example?

Thanks … Ed

General Discussions

answered on 21 Oct 2019

6 answers

451 views

Popup behaving badly

Hi,

Check the attached screen shot. The markup is shown below.

Is this a bug on your side or am I doing something wrong?

Thanks … Ed

<TelerikWindow Visible="@(selectedUser != null)" Modal="true">

<WindowTitle>

@{

if (selectedUser.Id < 0)

{

<strong>Add Employee</strong>

}

else

{

<strong>Edit Employee</strong>

}

</WindowTitle>

<WindowContent>

<EditForm Model="@selectedUser" OnValidSubmit="@Save">

<DataAnnotationsValidator />

<div class="form-row">

<div class="col">

<TelerikTextBox @bind-Value="@selectedUser.FirstName" Label="First Name"></TelerikTextBox>

</div>

<div class="col">

<TelerikTextBox @bind-Value="@selectedUser.LastName" Label="Last Name"></TelerikTextBox>

</div>

@*<div class="form-row">

<div class="col">

<TelerikDropDownList Data="@lstRoles" @bind-Value=@SelectedRole PopupHeight="170px"

ValueField="Id" TextField="RoleName">

</TelerikDropDownList>

</div>

</div>*@

<div class="form-row">

<div class="col">

<TelerikTextBox @bind-Value="@selectedUser.Email" Label="Email"></TelerikTextBox>

</div>

<div class="col" >

<TelerikTextBox @bind-Value="@selectedUser.PhoneNumber" Label="Phone"></TelerikTextBox>

</div>

<div class="form-row">

<div class="col">

<TelerikTextBox @bind-Value="@selectedUser.Address1" Label="Address 1"></TelerikTextBox>

</div>

<div class="col">

<TelerikTextBox @bind-Value="@selectedUser.Address2" Label="Address 2"></TelerikTextBox>

</div>

<div class="form-row">

<div class="col">

<TelerikTextBox @bind-Value="@selectedUser.City" Label="City"></TelerikTextBox>

</div>

<div class="col">

<TelerikTextBox @bind-Value="@selectedUser.PostCode" Label="Post Code"></TelerikTextBox>

</div>

<div class="form-row">

<div class="col">

<div style="margin-top:20px;">

Is Active <InputCheckbox @bind-Value="@selectedUser.IsActive" />

</div>

<div class="col">

<span class="k-label" style="font-size:7pt">Role</span>

<TelerikDropDownList Data="@lstRoles" TextField="Name" ValueField="Id"

@bind-Value="selectedRole" Width="100">

</TelerikDropDownList>

</div>

<div class="form-row">

<br />

<ValidationSummary />

<TelerikButton Class="mt-2" Icon="save" Primary="true" ButtonType="@ButtonType.Submit">Save</TelerikButton>

<TelerikButton Class="mt-2" Icon="cancel" OnClick="@ClearSelection" ButtonType="@ButtonType.Button">Cancel</TelerikButton>

</div>

</EditForm>

</WindowContent>

</TelerikWindow>

Grid

answered on 21 Oct 2019

2 answers

634 views

Popup edit template

Does this beast exist yet?

I can't seem to find anything on it.

Thanks …. Ed

Grid

answered on 20 Oct 2019

1 answer

115 views

Blazor getting started - maybe add this note?

Our team has Devcraft UI now and Im pulling in the Blazor components, adding the requirements to a small existing project, where we are changing direction to use Blazor.

Seems like I was confused about the same thing when I was going through the initial steps using the Kendo UI angular components.

Anyway, on the "getting started" section
https://docs.telerik.com/blazor-ui/getting-started/server-blazor

Once I had the private Nuget feed setup, I started making the updates to the various project files.
That's when it wasn't exactly clear on these sections. Maybe use these notes to update this section to help others?
Im starting from new Blazor server app that I had created previously, and was integrating it within my solution.

In this "getting started" section, if one is creating a new project from ground zero, are the telerik components and settings somehow added to a new project via the project template? In other words, the docs make it appear that after you create a new project, you're done and ready to start using telerik components on a new page.

So then, in the section under "add to existing project"

(3) HTML
It wasn't clear what the names of the other themes were. Putting a link here or just listing the bootstrap and material theme names might help.
Also wasn't clear if one was to replace any existing css being used, eg. The bootstrap css file.

(4) HTML
Again, should one add this new script reference or replace the default?
So for ~/Pages/_Host.cshtml the end result is to be

this:
<script src="_content/telerik.ui.for.blazor/js/telerik-blazor.js" defer></script>

or this:
<script src="_framework/blazor.server.js"></script>
<script src="_content/telerik.ui.for.blazor/js/telerik-blazor.js" defer></script>

(5), (6) & (7) were straightforward

On a side-note, maybe it was just me, in the docs, it is after all saying to add these pieces, not to replace anything already there in an existing Blazor project.

General Discussions

answered on 19 Oct 2019

3 answers

182 views

Visible property removed

The AnimationContainer's Visible property is no longer available in version 2.2.0 which is a breaking change for us. Is there another way to initialize the AnimationContainer in a visible state without calling the Show() or Toggle() methods?

AnimationContainer

answered on 18 Oct 2019

3 answers

133 views

Grid Selection demo is missing bind attribute

The Grid Selection demo code is missing the @bind-SelectedItems attribute. The demo is on this page: https://demos.telerik.com/blazor-ui/grid/selection. The TelerikGrid element should contain the attribute:

@bind-SelectedItems="SelectedItems"

Grid

answered on 17 Oct 2019

1 answer

554 views

scroll

I am sure I am missing something easy.

Right now all columns get squished if the screen resolution is less than the grid width.

How do I set it that it includes a scroll bar instead of squishing?

Grid

answered on 17 Oct 2019

2 answers

762 views

Add new item and focus

Hi,

When I hit the add button on a grid, I notice that the focus does not go to the first cell of the newly added row for editing.

This is kind of annoying. How can I force this?

Thanks … Ed

     <TelerikGrid Data=@GridData
                         Pageable="true" Groupable="true" Sortable="true"
                         OnUpdate="@UpdateHandler" OnCreate="@CreateHandler" OnEdit="@EditHandler">
                <GridColumns>
                    <GridColumn Field="Name" />
                    <GridColumn Field="IsActive" Title="Is Active">

                    </GridColumn>
                    <GridCommandColumn Width="300px">
                        <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
                        <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
                        <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
                    </GridCommandColumn>
                </GridColumns>
                <GridToolBar>
                    <GridCommandButton Command="Add" Icon="add">Create Role</GridCommandButton>
                </GridToolBar>
            </TelerikGrid>

Grid

answered on 17 Oct 2019

3 answers

253 views

blazor telerik custom theme

hi, i was wondering to know if there is a way to give custom style to each telerik component individually i have already tried using class and id but some of components do not accept class or id i also tried this https://themebuilder.telerik.com/blazor-ui but unfortunately there is a very big problem with colors and sometimes they don't match and will result in an awkward component which most parts has same color

General Discussions

answered on 17 Oct 2019

3 answers

117 views

Some demos dont work in Firefox but most work in Chrome?

Anxious to get started with Blazor components, especially the grid. I was browsing the various demos and noticed some didnt seem to respond in Firefox. Opened them in Chorme and they worked.

The grid however works fine in Firefox 69.0.2 (64-bit), Windows 10

examples:
(1) Menu. Items wont drop down
https://demos.telerik.com/blazor-ui/menu/overview

(2) Dropdown list. Items wont drop down
https://demos.telerik.com/blazor-ui/dropdownlist/overview

There may be others, but both of the above worked ok in Chrome

General Discussions