Questions on UI for Blazor Forum

1 answer

196 views

Data source uses ling query

Hi

Can anyone help with this please?

The following HTML produces a satisfactory result in that all columns are populated:

if (purchaseOrders == null)

{

<p><em>Loading...</em></p>

}

else

{

<table class="table">

<thead>

<tr>

<th>PO No.</th>

<th>PO Date</th>

</tr>

</thead>

<tbody>

@foreach (var purchaseOrder in purchaseOrders)

{

<tr>

<td>@purchaseOrder.PurchaseOrderId</td>

<td>@purchaseOrder.PurchaseOrderDate.ToShortDateString()</td>

<td>@purchaseOrder.Supplier.SupplierName</td>

</tr>

}

</tbody>

</table>

}

There is a linq query in a service file which retrieves data across the FK between "Purchase Order" and "Supplier". However the SupplierName column remains blank in the Telerik grid with the following code:

<TelerikGrid Data="purchaseOrders" Height="800px"

Pageable="true" PageSize=@PageSize Sortable="true" Groupable="true"

FilterMode="Telerik.Blazor.GridFilterMode.FilterRow">

<GridColumns>

<GridColumn Field="@(nameof(PurchaseOrder.PurchaseOrderId))" Title="PO No." Groupable="false" />

<GridColumn Field="@(nameof(PurchaseOrder.PurchaseOrderDate))" Title="PO Date" />

<GridColumn Field="@(nameof(PurchaseOrder.Supplier.SupplierName))" Title="Supplier" />

</GridColumns>

</TelerikGrid>

The HTML and Telerik grids use the same data source and models. Many thanks

The

Grid

answered on 22 Oct 2019

4 answers

655 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

497 views

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

665 views

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

174 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

207 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

151 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

584 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

813 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

284 views

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