Marin:
I need to format Grid content on a row by row basis and using the RowTemplate am able to get close to what I want but it's breaking the Select and Hover behavior.
What is the best way to do this?
@page "/"
@page "/formatting"
<
style
>
.mygrid-formatting th.k-header {
padding: 5px;
}
.mygrid-formatting .k-master-row td {
padding: 2px 4px;
border-bottom: 1px solid rgba(33, 37, 41, 0.15);
line-height: 1.25rem;
vertical-align: @_verticalAlignment;
}
.mygrid-formatting .k-grid-table .k-master-row {
background-color: @_backGroundColor;
}
.mygrid-formatting .k-grid-table .k-master-row:hover {
background-color: rgba(220, 238, 239, 0.50);
}
.mygrid-formatting .k-grid-table .k-master-row.k-alt {
background-color: @_backGroundColor;
}
.mygrid-formatting .k-grid-table .k-master-row.k-alt:hover {
background-color: rgba(220, 238, 239, 0.50);
}
</
style
>
@if (showForm)
{
<
TelerikGrid
Data
=
"@GridData"
Class
=
"mygrid-formatting"
Height
=
"600px"
SelectionMode
=
"GridSelectionMode.Single"
Pageable
=
"true"
PageSize
=
"30"
RowHeight
=
"30"
Sortable
=
"true"
>
<
RowTemplate
Context
=
"sample"
>
<
td
style
=
"@RowStyle(sample.Id)"
>@sample.Id</
td
>
<
td
style
=
"@RowStyle(sample.Id)"
>@sample.Name</
td
>
<
td
style
=
"@RowStyle(sample.Id)"
>@sample.LastName</
td
>
<
td
style
=
"@RowStyle(sample.Id)"
>@sample.HireDate.ToShortDateString()</
td
>
</
RowTemplate
>
<
GridColumns
>
<
GridColumn
Field
=
"@(nameof(SampleData.Id))"
Title
=
"ID"
/>
<
GridColumn
Field
=
"@(nameof(SampleData.Name))"
Title
=
"Name"
/>
<
GridColumn
Field
=
"@(nameof(SampleData.LastName))"
Title
=
"Last Name"
/>
<
GridColumn
Field
=
"@(nameof(SampleData.HireDate))"
Title
=
"Hired"
/>
</
GridColumns
>
</
TelerikGrid
>
}
@code {
public List<
SampleData
> GridData { get; set; }
bool showForm = false;
string _verticalAlignment = "Center";
string _backGroundColor = "White";
protected override async Task OnInitializedAsync()
{
GridData = await GetData();
showForm = true;
}
private string RowStyle(int id)
{
string style = string.Empty;
if (id <= 15) style = "color: red; background-color: white;";
else if (id <= 30) style = "color: DarkBlue; background-color: AliceBlue;";
else if (id <= 45) style = "color: green; background-color: Khaki;";
else style = "color: Indigo; background-color: Lavender;";
return style;
}
private async Task<
List
<SampleData>> GetData()
{
return Enumerable.Range(1, 100).Select(x => new SampleData
{
Id = x,
Name = $"name {x}",
LastName = $"Surname {x}",
HireDate = DateTime.Now.Date.AddDays(-x)
}).ToList();
}
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
public string LastName { get; set; }
public DateTime HireDate { get; set; }
}
}