<style>
    input.k-textbox.form-control,
    k-datetimepicker.form-control,
    .k-widget.k-combobox.k-header.form-control {
        height: calc(2.25rem) !important;
    }
</style>

<div class="container-fluid border pt-md-3">
    <div class="row">
        <h5 class="pl-3 pb-3">nach Geschäftsfall suchen</h5>
    </div>
    <EditForm Model="SuchParameter" OnValidSubmit="HandleValidSubmit">
        <DataAnnotationsValidator />
        <div class="row  mb-1">
            <div class="col-md-4">
                <label for="fallJahr">Fall-Jahr</label>
            </div>
            <div class="col-md-8">
                <TelerikNumericTextBox Id="fallJahrTelerik" @bind-Value="SuchParameter.Jahr" Class="form-control" Arrows="false" />
            </div>
        </div>
        <div class="row  mb-1">
            <div class="col-md-4">
                <label for="fallNummer">Fall-Nr.</label>
            </div>
            <div class="col-md-8">
                <TelerikTextBox Id="fallNummer" @bind-Value="SuchParameter.Nummer" Class="form-control" />
            </div>
        </div>

        <div class="row  mb-1">
            <div class="col-md-4">
                <label for="geschaeftsArt">Geschäftsart</label>
            </div>
            <div class="col-md-8">
                <TelerikComboBox Id="geschaeftsArt" ValueChanged="@( (string c) => OnGeschaeftsArtChanged (c))" Value="selectedGeschaeftsArt" ValueField="Art" TextField="Art" ValueExpression="@( () => selectedGeschaeftsArt )"
                                 Data="@GeschaeftsArten" Placeholder="Geschäftsart auswählen" ClearButton="true" Width="100%" 
                                 Class="form-control"/>
            </div>
        </div>
        <div class="row  mb-1">
            <div class="col-md-4">
                <label for="posteingang">Posteingang </label>
            </div>
            <div class="col-md-8">
                <TelerikDateTimePicker Id=posteingang @bind-Value="@selectedTime" Format="dd.MM.yyyy" Width="100%"
                                       Class="form-control"></TelerikDateTimePicker>
            </div>
        </div>

        <button type="submit" class="btn btn-block btn-primary">Suchen</button>
        <ValidationSummary />
    </EditForm>
</div>

@code{
    public class TheFormModel
    {
        public int Jahr { get; set; }
        public string Nummer { get; set; }
    }

    public class ComboModel
    {
        public string Art { get; set; }
    }

    TheFormModel SuchParameter { get; set; } = new TheFormModel();
    string selectedGeschaeftsArt { get; set; }
    List<ComboModel> GeschaeftsArten { get; set; } = Enumerable.Range(1, 5).Select(x => new ComboModel { Art = $"Art {x}" }).ToList();
    DateTime selectedTime { get; set; }

    void HandleValidSubmit()
    {

    }

    void OnGeschaeftsArtChanged(string v)
    {
        selectedGeschaeftsArt = v;
    }
}

<div class="row">
    <TelerikGrid Data="@Items">
        <RowTemplate Context="sampleData">
            @{
                string detailLink = $"info/{sampleData.Id}";
                string className = $"screenshot-hover-{sampleData.Id}";
                string selector = $".{className}";
                <td title="@sampleData.Name" data-id="@sampleData.Id" class="@className">
                    <NavLink href="@detailLink">@sampleData.Name</NavLink>
                </td>
                <td title="@sampleData.Name" data-id="@sampleData.Id" class="@className">
                    <NavLink href="@detailLink">@sampleData.Name</NavLink>
                </td>
                <td title="@sampleData.Name" data-id="@sampleData.Id" class="@className">
                    <NavLink href="@detailLink">@sampleData.Name</NavLink>
                </td>
                <TelerikTooltip TargetSelector="@selector" ShowOn="@TooltipShowEvent.Hover" Position="@TooltipPosition.Bottom">
                    <Template Context="ttipContext">
                        @{
                            var dataAttributes = ttipContext.DataAttributes;
                            var title = ttipContext.Title;
                            if (title != null && dataAttributes.ContainsKey("id"))
                            {
                                <img src="images/@(dataAttributes["id"])" alt="@title" />
                                <p>@title</p>
                            }
                        }
                    </Template>
                </TelerikTooltip>
            }
        </RowTemplate>

        <GridColumns>
            <GridColumn Field="@(nameof(SampleData.Name))" />
            <GridColumn Field="@(nameof(SampleData.Address))" />
            <GridColumn Field="@(nameof(SampleData.PhoneNumber))" />
        </GridColumns>
    </TelerikGrid>
</div>

@code {
    class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Address { get; set; }
        public string PhoneNumber { get; set; }
    }

    SampleData[] Items { get; set; }

    protected async override Task OnInitializedAsync()
    {
        const int sampleSize = 25;
        Items = new SampleData[sampleSize];
        for (int i = 0; i < sampleSize; i++)
        {
            Items[i] = new SampleData
            {
                Id = i,
                Name = $"{i}.SomeName",
                Address = $"{i}{i}{i}{i} Cherry Lane",
                PhoneNumber = $"1-512-{i % 100:00}4-6000",
            };

        }

        await Task.CompletedTask;
    }
}

<TelerikChart>
    <ChartTitle Text="Unrecoverable Errors Per Minute vs. Signal Level" />
    <ChartCategoryAxes>
        <ChartCategoryAxis Type="@ChartCategoryAxisType.Category" />
    </ChartCategoryAxes>
    <ChartValueAxes>
        <ChartValueAxis>
            <ChartValueAxisLabels Visible="true" />
        </ChartValueAxis>
    </ChartValueAxes>

    <ChartTooltip Visible="true">
        <Template>
            @{
                var data = context.DataItem as ModelData;
                <div class="card" style="font-size: 0.8rem; color: black">
                    <span>@($"{data.Value}")</span>
                    <span>@($"{data.Type}")</span>

                </div>
            }
        </Template>
    </ChartTooltip>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line"
                     Data="@ChartData1"
                     CategoryField="@nameof(ModelData.Type)"
                     Field="@nameof(ModelData.Value)">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line"
                     Data="@ChartData2"
                     CategoryField="@nameof(ModelData.Type)"
                     Field="@nameof(ModelData.Value)">
        </ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line"
                     Data="@ChartData3"
                     CategoryField="@nameof(ModelData.Type)"
                     Field="@nameof(ModelData.Value)">
        </ChartSeries>
    </ChartSeriesItems>

</TelerikChart>

@code {
    public class ModelData
    {
        public string Type { get; set; }
        public double Value { get; set; }
    }

    public List<ModelData> ChartData1 = new List<ModelData>() { new ModelData() { Type = "S1", Value = 1 } };
    public List<ModelData> ChartData2 = new List<ModelData>() { new ModelData() { Type = "S2", Value = 5 } };
    public List<ModelData> ChartData3 = new List<ModelData>() { new ModelData() { Type = "S3", Value = 9 } };
}

<table>
    <tr>
         <td style="width:100px;background-color:#FF0000;">Test</td> 
   </tr>
</table>

<table class="k-table"><tbody><tr><td><p>Test</p></td></tr></tbody></table>

    protected override void OnInitialized()
    {
        GridData = ProductService.GetProducts().ToList();
    }