Questions on UI for Blazor Forum

1 answer

391 views

Grid OnRowExpand blur all other rows, or otherwise focus on the selected row with details

Having sub-grids of related data is very useful, but the interface can be a bit busy (see attached pic). Perhaps a solution would be if all other rows are blurred or otherwise de-emphasised when the expand icon is clicked, using jQuery and CSS, or using the OnRowExpand event.

I'm liking using less jQuery - so the OnRowExpand event is my preferred method; but how would I change the style of all the other rows? Perhaps a better solution is to change the css of the expanded row plus details row below? I don't see how that can be done except using jQuery.

Grid

answered on 11 Nov 2021

0 answers

170 views

TelerikChart in div with class flex-fill not confined to div

I have a div with bootstrap class of d-flex and inside that div I have two additional divs with class of flex-fill. The idea is to have a section on the blazor page I'm developing that contains two TelerikChart objects side by side. My problem is the Charts get generated to be wider then the div. How can I use TelerikChart and contain the chart within the div.

<div class="card-body d-flex flex-fill">
        <div class="flex-fill" id="Savings">
            <TelerikChart>
                        <ChartSeriesItems>
                            <ChartTitle Visible="false"></ChartTitle>
                            <ChartSeries Type="ChartSeriesType.Pie"
                                         Data="@i"
                                         Field="@nameof(extras.ISG.Savings)"
                                         CategoryField="@nameof(extras.ISG.Part)"
                                         ExplodeField="false">
                                <ChartSeriesTooltip Visible="true" Context="item">
                                    <Template>
                                        @((item.DataItem as extras.ISG).Part)
                                        <br />
                                        @((item.DataItem as extras.ISG).TotalTransactions)
                                        <br />
                                        @((item.DataItem as extras.ISG).Savings)
                                    </Template>
                                </ChartSeriesTooltip>                                
                                <ChartLegend Visible="true" Position="ChartLegendPosition.Bottom"></ChartLegend>
                            </ChartSeries>
                        </ChartSeriesItems>
                    </TelerikChart>                
                    </div>
        <div class="flex-fill" id="defferedSummary">
                    <TelerikChart>
                        <ChartSeriesItems>
                            <ChartTitle Visible="false"></ChartTitle>
                            <ChartSeries Type="ChartSeriesType.Pie"
                                         Data="@CdefferedGrouped"
                                         Field="@nameof(extras.dGrouped.Earned)"
                                         CategoryField="@nameof(extras.dGrouped.Partner)"
                                         ExplodeField="false">
                                <ChartSeriesTooltip Visible="true" Context="item">
                                    <Template>
                                        @((item.DataItem as extras.dGrouped).Part)
                                        <br />
                                        @((item.DataItem as extras.dGrouped).TotalTransactions)
                                        <br />
                                        @((item.DataItem as extras.dGrouped).Earned)
                                        <br />
                                        @((item.DataItem as extras.dGrouped).Spent)
                                    </Template>
                                </ChartSeriesTooltip>
                                <ChartSeriesLabels Visible="true" Position="ChartSeriesLabelsPosition.Right"></ChartSeriesLabels>
                                <ChartLegend Visible="true" Position="ChartLegendPosition.Bottom"></ChartLegend>
                            </ChartSeries>
                        </ChartSeriesItems>
                    </TelerikChart>                           
        </div>
    </div>

Charts

asked on 11 Nov 2021

0 answers

1.3K+ views

Long press - Long touch

Is it possible to run another method, if the user presses and holds on a series for lets say 2 or 3 seconds?

Like in WPF: https://www.telerik.com/forums/long-press-on-a-button-c1515a65de7e

If this makes sense.

Regards,
Nikolas

Charts

asked on 11 Nov 2021

1 answer

130 views

Disable editing of task names

Can I turn off editing of task names?
I plan to create a list of tasks with fixed names, but when I click on the name cell, the editing mode is activated.
And in general, is it possible to disable the built-in edit form and override your own by clicking the edit button in the command column?
The proposed editing functionality is not convenient.

Gantt

answered on 11 Nov 2021

0 answers

222 views

Password Confirmation problem

I have pop-up, where try to reset password.

when I first fill in the value of the password field, then password confirmation field and if they do not match, the warning text is displayed correctly, but if I change the password after filling in the password confirmation, the system will not understand that the passwords are different

Correct:

Correct:

Incorrect: After adding symbols in Password field they are not match, but message doesn't display

ValidationTooltip

asked on 11 Nov 2021

3 answers

171 views

Gridlines with multiple axes

Hello,

I have a problem with gridlines not showing, when i use multiple axes.

In the image below, the MajorGridLines of the axis to the right should be shown as red, and the MinorGridLines should also be visible. Is this a bug, intended or am i just doing something wrong.

I have posted the code used for generating the chart at the bottom of this post.

<TelerikChart>
    <ChartTitle Text="Gross domestic product growth /GDP annual %/"></ChartTitle>
    <ChartTooltip Visible="true"></ChartTooltip>
    <ChartLegend Position="ChartLegendPosition.Top" Align="ChartLegendAlign.Start"></ChartLegend>

    <ChartSeriesItems>
        <ChartSeries Type="ChartSeriesType.Line" Style="ChartSeriesStyle.Normal" Name="Chile" Data="@Data" Field="@nameof(ModelData.Series1)"></ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line" Style="ChartSeriesStyle.Step" Name="India" Data="@Data" Field="@nameof(ModelData.Series2)"></ChartSeries>
        <ChartSeries Type="ChartSeriesType.Line" Style="ChartSeriesStyle.Smooth" Name="Haiti" Data="@Data" Axis="Secondary" Field="@nameof(ModelData.Series3)"></ChartSeries>
    </ChartSeriesItems>

    <ChartCategoryAxes>
        <ChartCategoryAxis AxisCrossingValue="crossingValues" Categories="@Categories"></ChartCategoryAxis>
    </ChartCategoryAxes>

    <ChartValueAxes>
        <ChartValueAxis ZIndex="1" Max="100">
            <ChartValueAxisLabels Format="{0}%"></ChartValueAxisLabels>
            <ChartValueAxisMajorGridLines Visible="true"></ChartValueAxisMajorGridLines>
        </ChartValueAxis>
        <ChartValueAxis Name="Secondary" ZIndex="12">
            <ChartValueAxisLabels Format="{0}%"></ChartValueAxisLabels>
            <ChartValueAxisMajorGridLines Color="Red" Visible="true" DashType="DashType.Solid"></ChartValueAxisMajorGridLines>
            <ChartValueAxisMinorGridLines Visible="true" DashType="DashType.Dot"></ChartValueAxisMinorGridLines>
        </ChartValueAxis>
    </ChartValueAxes>
</TelerikChart>

Best Regards,

Emil

Charts

answered on 10 Nov 2021

2 answers

116 views

Feature or Bug!

I am trying to style the TexArea component.

Unfortunately the class attribute only affects the span wrapper element, Why?

I found that this is expected after reading the manual, so it's not a bug or is it (-.

I ended up using the standard textarea

TextArea

answered on 10 Nov 2021

0 answers

502 views

How Do I Dynamically Create a TelerikContextMenu in Blazor?

While data binding is great for a lot of reasons, I am building a series of images on a page that each need their own context menu. In addition, based on the JSON I am reading from, some menu items will be disabled and/or have different icons.

To this end, on the Razor frontend page, I need to manually build the TelerikContextMenu out but I cannot figure out how to do so. I have the following, based on my destruction of a perfect valid Telerik online example, but I do not know what to add into the ItemTemplate nor do I understand how to map that, whatever it is, back to the public class.

{ var menuCounter = 0; var targetName = ""; var targetNameWithDot = ""; var menuId = "";
            @foreach (Device thisDevice in CurrentSystem.LocalDevices)
            {
                menuCounter++;
                targetName = "target" + @menuCounter;
                targetNameWithDot = "." + @targetName;
                menuId = "contextMenu" + @menuCounter;

                    <TelerikContextMenu IdField="@menuId" Selector="@targetNameWithDot" Data="@MenuItems" OnClick="@((MenuItem item) => OnItemClick(item, @thisDevice.DeviceIDHash))">
                        <ItemTemplate>
                        
                        </ItemTemplate>
                    </TelerikContextMenu>

                    <div style="width: 100%" class="target-wrapper @CssClass">
                        <div class="@targetName">
                            <p class="placeholder">Right-click to open Context menu</p>
                        </div>
                    </div>
                    <tr>
                        <td>
                            @thisDevice.DeviceName
                        </td>
                        <td>@thisDevice.DeviceIDHash</td>
                    </tr>
                }
            }
        }

Any help would be GREATLY appreciated!

ContextMenu

updated question on 10 Nov 2021

1 answer

301 views

Dynamically enabling PageSize Sortable FilterMode Not working

Upon sending the values to the attributes for the TelerikGrid the UI part of them displays, but I noticed even though I send default 5 for the pagesize it loads the full list regardless. The Sortable columns on the grid has the icon, but when clicking it actually doesn't trigger off anything. Filter shows up the icon, but when i click it nothing happens. Just to make the paging in footer of the grid show up for dropdownlist to select row size i had to upgrade to 2.28 to make it work with GridPagerSettings.

I am sure someone else has experience this, can any assistance happen here. below is what i have in the component.

<TelerikGrid @ref="grid"
Data="@Rows"
Class="@GetCssClasses()"
OnRowClick="@HandleRowClick"
Pageable="@HasPages"
PageSize="@RowsPerPage"
TotalCount="@TotalRowCount"
Sortable="@IsSort"
FilterMode="GridFilterMode.FilterMenu"
OnRead="@HandleDataRequest"
ScrollMode="@scrollMode"
@bind-Page="@CurrentPage"
Height="100%"
RowHeight="54"
SelectionMode="@SelectionMode"
SelectedItemsChanged="((IEnumerable<Row> rows) => HandleMultiSelect(rows))"
OnRowRender="@((args) => OnRowRender(args))">
<GridSettings>
<GridPagerSettings InputType="PagerInputType.Buttons" PageSizes="@PageSizesList" ButtonCount="3" />
</GridSettings>
<GridColumns>
<CascadingValue Name="Table" Value="@this">@Columns</CascadingValue>
</GridColumns>
</TelerikGrid>

Grid

GridLayout

answered on 09 Nov 2021

1 answer

193 views

Replacing bootstarp with kendo css classes

I am trying to get rid of bootstrap and looking in the telerik sass source for inspiration.

Would like to know

How to layout forms using the form css classes. Don't like the auto layout.
TabStrip can I use it to build a tabstrip without content like bootstrap "nav nav-tabs"

In general where can I find information for all the kendo classes?

Styling

answered on 08 Nov 2021