Questions on UI for Blazor Forum

1 answer

186 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

690 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

315 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

86 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

71 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

236 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

answered on 28 Dec 2020

7 answers

2.4K+ views

is Blazor grid support nested model ?

Hello Team, Just want to check with regarding Blazor Grid. is it support nested models? basically I want to bind a Object2.Object2.Property

Eg:

Thanks,

Sajid

Grid

answered on 23 Dec 2020

1 answer

134 views

Charts inside TileLayoutItem's content don't render with 100% height in Safari browser

Go to https://demos.telerik.com/blazor-ui/tilelayout/overview

using Safari browser

Change any tile's height which contains chart. Chart has still fixed height.
Chrome and Edge browsers works normal.

TileLayout

answered on 23 Dec 2020

1 answer

490 views

[Solved] OnStateChanged called twice while filtering

Hello!
Is it normal that the grid's OnStateChanged event gets called twice when filtering?

Other actions, such as sorting, resizing, and reordering, call OnStateChanged once.
I have an event handler that stores the state of the grid in local storage, and it's rather annoying that it gets called twice for no reason.

Grid

answered on 22 Dec 2020

3 answers

434 views

The/All Color Tool

Hi!

I need to have a proper color palette in the editor as a toolbar that should appear if Tools="@EditorToolSets.All" is applied. I need to have an editor with descent background, highlight, and foreground/font color.

Editor

answered on 22 Dec 2020