Toolbar

[Peter]

Hi,

in Kendo UI is a toolbar widget, which I use to select some charts options (see https://www.laerm-monitoring.de/mittelung)

In Blazer I found <Telerik.Blazor.Components.ToolBar.TelerikToolBar> in Visual Studio, but there is no documentation .

How can I make a Toolbar in Blazor over a chart ?

Regards,

Peter

[Marin Bratanov]

Hello Peter,

You can Follow the implementation of a toolbar component here: https://feedback.telerik.com/blazor/1431584-toolbar. We are, in fact, working on it right now and it is planned for the 2.20.0 release at the end of the month.

The component you found is part of the inner workings of the editor component and is not a public component you can use in your app. The Blazor framework will, hopefully, receive the ability to trim the intellisense to only meaningful elements in a future release, and then it would be possible to eliminate such elements from appearing in it. At the moment, however, there is no way to clean up what you will see there.

 

Regards,
Marin Bratanov
Progress Telerik

[Peter]

Hi Marin,

thank you. Until the new version is released I use the standard components:

<div class="charttoolbar">
    <TelerikDropDownList ... />
    <TelerikButton ...></TelerikButton>
    <label>Indicator</label>
    <TelerikDropDownList ... />
    <label>Start</label>
    <TelerikDatePicker ...></TelerikDatePicker>
    <label>Stop</label>
    <TelerikDatePicker ...></TelerikDatePicker>
</div>
<div class="chartcontent">
   @for (int i = 1; i <= maxCharts; i++)
    {
        <TelerikChart @ref="@chart">...
        </TelerikChart>
    }
</div>

with css to keep the toolbar on top during scrolling.

.charttoolbar {
    background-color: white;
    position: fixed;
    top: 0;
    width: 100%;
    z-index:999999;
}

.chartcontent {
    margin-top: 10px;
}

 

Best Regards,

Peter

[Peter]

There is still not a edit function available? Correction: The <TelerikChart @ref="@chart"> is inside of a razor component, with a valid property TelerikChart chart.

[Svetoslav Dimitrov]

Hello Peter,

Our 2.20.0 release is live and you can now take advantage of our ToolBar component. You can follow the upgrade procedure to get all new components, features, and fixes.

Regards,
Svetoslav Dimitrov
Progress Telerik

[Peter]

Hello Svetoslav,

Perfect. Inside TelerikToolBar I use now ToolBarButton and the other (label, TelerikDropDownList, TelerikDatePicker)  with ToolBarTemplateItem. In _reboot.scss is defined: label {display: inline-block;margin-bottom: .5rem;}: the label is to high in the toolbar.
My modified CSS to keep the toolbar on top while scrolling:

.chartteleriktoolbar {
    background-color: white;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

.chartcontent {
    margin-top: 30px;
    z-index: 0;
}

.toolbarlabel {
    margin-bottom: 0px;
}

 

Regards,

Peter

 

 

 

[Svetoslav Dimitrov]

Hello Peter,

Could you provide us with a runnable snippet, because based on the CSS I am unable to reproduce the issue you are facing. Could you give us more information on what tools and components you have in the toolbar so we can further investigate?

Regards,
Svetoslav Dimitrov
Progress Telerik

[Peter]

The labels for the combo/dropdownbox in https://www.telerik.com/forums/position-of-labels  are to high.

You can copy the code to index.razor of a new Telerik Blazor Visual Studio Project with options:
Server; .Net 5.0; Telerik UI for Blazor, 2.20.0 (Dev) [INstallFolder]; Blank

Image: https://imgur.com/S0fiwRq

In the Chrome Dev Tools I see for Label1 a style:

label {margin-bottom: .5rem;} in _reboot.scss:292

This post also mentions an issue with TelerikDateRangePicker.