This is a migrated thread and some comments may be shown as answers.

Toolbar

7 Answers 304 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 2
Iron
Veteran
Iron
Peter asked on 12 Nov 2020, 01:13 PM

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

7 Answers, 1 is accepted

Sort by
0
Accepted
Marin Bratanov
Telerik team
answered on 13 Nov 2020, 09:41 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Peter
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 25 Nov 2020, 09:36 AM

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

0
Peter
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 25 Nov 2020, 09:43 AM
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.
0
Accepted
Svetoslav Dimitrov
Telerik team
answered on 25 Nov 2020, 01:36 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Peter
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 26 Nov 2020, 09:22 AM

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

 

 

 

0
Svetoslav Dimitrov
Telerik team
answered on 01 Dec 2020, 07:51 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Peter
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 01 Dec 2020, 09:36 AM

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.

Tags
General Discussions
Asked by
Peter
Top achievements
Rank 2
Iron
Veteran
Iron
Answers by
Marin Bratanov
Telerik team
Peter
Top achievements
Rank 2
Iron
Veteran
Iron
Svetoslav Dimitrov
Telerik team
Share this question
or