Questions on UI for Blazor Forum

1 answer

1.4K+ views

Fixed Row Height

Hello!
I have set the grids row height with the given property to 65.
The problem is, that the row height will change dynamically, I guess the row height property is some sort of max height.
Is there a way to change the row height to a fixed value of e.g. 65?

Thank you & best regards
Nico

Grid

answered on 05 Jan 2021

1 answer

610 views

Show Scrollbar on top and bottom

Hello!
Currently the horizontal scrollbar is only visible at the bottom.
Is there a way to make it visible at the top too?

Thank you and best regards
Nico

Grid

answered on 05 Jan 2021

8 answers

601 views

HeaderTemplate's component events

Hello!

Place TelerikNumericTextBox component in TileLayoutItem's HeaderTemplate.

The up/down buttons will not trigger and cause for tile's reordering event.

<TileLayoutItem ColSpan="4" RowSpan="7">

<HeaderTemplate>

<span>Title</span>

<TelerikNumericTextBox Value="@interval" ValueChanged="@ChangeInterval" Step="1" T="int" Min="0" Max="50" />

</HeaderTemplate>

<TileLayoutItem />

TileLayout

answered on 05 Jan 2021

1 answer

136 views

Need help with custom column's template

Hello!
I'm trying to implement some user's menu in column's template like this:

<TelerikGrid Data="@MyData" Height="100%"

Pageable="true" Sortable="true" Groupable="true"

FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"

Resizable="true" Reorderable="true">

<GridColumns>

<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />

<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />

<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />

<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />

<GridColumn Filterable="false" Title="Menu" Lockable="false" Sortable="false"

ShowColumnChooser="false" VisibleInColumnChooser="false" ShowColumnMenu="false">

<Template>

@{

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

Menu

</button>

<div class="dropdown-menu">

<a class="dropdown-item" style="cursor: pointer">Edit</a>

<a class="dropdown-item" style="cursor: pointer">Delete</a>

</div>

}

</Template>

</GridColumn>

</GridColumns>

</TelerikGrid>

@code {

public IEnumerable<SampleData> MyData = Enumerable.Range(1, 1).Select(x => new SampleData

{

Id = x,

Name = "name " + x,

Team = "team " + x % 5,

HireDate = DateTime.Now.AddDays(-x).Date

});

public class SampleData

{

public int Id { get; set; }

public string Name { get; set; }

public string Team { get; set; }

public DateTime HireDate { get; set; }

}

But menu is not fully showing and hide by grid's footer
setting z-index for dropdown doesnt help
Please help....

Grid

answered on 05 Jan 2021

1 answer

647 views

Icon name mistakes

H

in https://docs.telerik.com/blazor-ui/common-features/font-icons is written:

You can find the rendered icons in the Kendo UI Web Font Icons Library article.

There are some mistakes in the names.

Example in Charts section:

.k-i-line-markers Unicode: ea10
.k-i-bar Unicode: ea1c

In the definition in _content\Telerik.UI.for.Blazor\css\kendo-theme-bootstrap\all.css I found:

.k-i-graph::before {content: "\ea00";}

.k-i-chart-column-clustered::before {content: "\ea01";}

.k-i-chart-column-stacked::before {content: "\ea02";}

.k-i-chart-column-stacked100::before {content: "\ea03";}

.k-i-chart-column-range::before {content: "\ea04";}

.k-i-chart-bar-clustered::before {content: "\ea05";}

.k-i-chart-bar-stacked::before {content: "\ea06";}

.k-i-chart-bar-stacked100::before {content: "\ea07";}

.k-i-chart-bar-range::before {content: "\ea08";}

.k-i-chart-area-clustered::before {content: "\ea09";}

.k-i-chart-area-stacked::before {content: "\ea0a";}

.k-i-chart-area-stacked100::before {content: "\ea0b";}

.k-i-chart-area-range::before {content: "\ea0c";}

.k-i-chart-line::before {content: "\ea0d";}

.k-i-chart-line-stacked::before {content: "\ea0e";}

.k-i-chart-line-stacked100::before {content: "\ea0f";}

.k-i-chart-line-markers::before {content: "\ea10";}

.k-i-chart-line-stacked-markers::before {content: "\ea11";}

.k-i-chart-line-stacked100-markers::before {content: "\ea12";}

.k-i-chart-pie::before {content: "\ea13";}

.k-i-chart-doughnut::before {content: "\ea14";}

.k-i-chart-scatter::before {content: "\ea15";}

.k-i-chart-scatter-smooth-lines-markers::before {content: "\ea16";}

.k-i-chart-scatter-smooth-lines::before {content: "\ea17";}

.k-i-chart-scatter-straight-lines-markers::before {content: "\ea18";}

.k-i-chart-scatter-straight-lines::before {content: "\ea19";}

.k-i-chart-bubble::before {content: "\ea1a";}

.k-i-chart-candlestick::before {content: "\ea1b";}

.k-i-chart-ohlc::before {content: "\ea1c";}

The most chart icon starts with k-i-chart-.

Please correct the Kendo UI Web Font Icons Library article.

They are missing in https://docs.telerik.com/blazor-ui/api/Telerik.Blazor.IconName

Regards,

Peter

General Discussions

answered on 29 Dec 2020

1 answer

225 views

Telerik demo not working on ipad

Hi,

trying the blazor demo on https://demos.telerik.com/blazor-ui/grid/overview

with an ipad Air 2, ios 14.2, using safari or edge, results in error.

Is this an unsupported environment?

Brgds,

Henri

General Discussions

answered on 29 Dec 2020

1 answer

64 views

Parent nodes showed at the bottom of the children nodes

Hi everyone,

Is there any possibility to show the parent nodes at the bottom of their children nodes not on top? I know this may sound hilarious to you but what I'm trying to get is some kind of total rows which are the parents of the children nodes and it would be nice if they would appear at the bottom not at the top of the children nodes.

Thank you.

Best regards,

Cipri

TreeList

answered on 29 Dec 2020

5 answers

55 views

User Editable Column Headings

I would like to allow the user to add columns to the grid. When they add a column, they will need to add/edit the column header text. I have tried to add a textbox to a HeaderTemplate, but was not able to get it to respond to click event. Basically, when the user clicks on the title it should go into edit mode. Then, when they click away or hit enter the header will exit edit mode.

Grid

answered on 28 Dec 2020

1 answer

200 views

Blazer Styling

What is it that I'm missing when I have a Blazer Telerik Grid specified this way on a razor page:

@page "/households"
<h3>Households</h3>

<TelerikGrid Data="Model" Height="550px" Sortable="true">
    <GridColumns>
        <GridColumn Field="Name" Title="Name" />
        <GridColumn Field="Lies_District" Title="District" />
        <GridColumn Field="Openings" Title="Openings" />
        <GridColumn Field="EmailAddress" Title="Email" />
        <GridColumn Field="JoinedOn_DateTime" Title="JoinedOn" />
        <GridColumn Field="ReportCount" Title="Reports" />
        <GridColumn Field="LastReport" Title="Last Report" />
    </GridColumns>
</TelerikGrid>

and the resulting page has no grid lines, headings all smashed together with only one space between title columns?

Grid