Telerik Forums
UI for Blazor Forum
3 answers
162 views

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

Nadezhda Tacheva
Telerik team
 answered on 10 Nov 2021
2 answers
108 views

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

Martin Herløv
Top achievements
Rank 2
Bronze
Iron
Iron
 answered on 10 Nov 2021
0 answers
481 views

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!

Ken
Top achievements
Rank 1
 updated question on 10 Nov 2021
1 answer
284 views

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>

 

 

Hristian Stefanov
Telerik team
 answered on 09 Nov 2021
1 answer
183 views

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?

Marin Bratanov
Telerik team
 answered on 08 Nov 2021
0 answers
515 views

Hi setting the Expanded property of the node object don't expand the selected node.

Do I really need to load everything again to expand a node?

I need to trigger the click event and expand a node in code.

As a minimum I would like to expand a node on click if it has children

Martin Herløv
Top achievements
Rank 2
Bronze
Iron
Iron
 asked on 05 Nov 2021
0 answers
111 views

Blazor has no concept of nested routing which I don't understand

Any way I need to find a way to avoid loading a lot of component in a tabstrip.

If this was Angular I would define sub routes and clicking on a tab would navigate to that page.

What patterns are you using when having a lot of tab items?

Martin Herløv
Top achievements
Rank 2
Bronze
Iron
Iron
 asked on 05 Nov 2021
0 answers
240 views

Hi I would like to make a better filter function for the TreeView. Some of the features I would like are.

  • Expand all nodes that are found
  • Highlight them
  • Maybe only high light the text that are found

 

Has any one created such a function?

Martin Herløv
Top achievements
Rank 2
Bronze
Iron
Iron
 asked on 04 Nov 2021
1 answer
723 views

I have a grid with a column that has department code as its data. I use templates to display the actual department name in the grid and for editing, grouping, and filtering. When I sort the column, it sorts it by the department code and not the displayed department name. How can I get it to sort by the department name and not the department code?

 

        <GridColumn Field="DeptCode" Width="200px" title="Department" Editable="CurrentUser.IsAdmin" >
            <EditorTemplate>
                @{
                    CurrentlyEditedRecord = context as Data.InvRecord;
                    <TelerikDropDownList Data="@Departments"
                                         @bind-Value="@CurrentlyEditedRecord.DeptCode"
                                         TextField="DeptNameFull" ValueField="DeptCode"
                                         Width="100%" PopupHeight="50%">
                    </TelerikDropDownList>
                }
            </EditorTemplate>
            <Template>
                @{
                    // a Template is used to show the foreign key data that is user-friendly
                    string DepartmentCode = (string)(context as Data.InvRecord).DeptCode;
                    CIEData.EntityClasses.VaiDepartmentEntity matchingPos = Departments.FirstOrDefault(r => r.DeptCode == DepartmentCode);
                    string textToRender = matchingPos != null ? matchingPos.DeptNameFull : "Unknown";
                    <text>@textToRender</text>
                }
            </Template>

            <GroupHeaderTemplate>
                @{
                    string Id = (string)context.Value;
                    CIEData.EntityClasses.VaiDepartmentEntity matchingPos = Departments.FirstOrDefault(r => r.DeptCode == Id);
                    string textToRender = matchingPos != null ? matchingPos.DeptNameFull : "Unknown";
                    <text>@textToRender</text>
                }
            </GroupHeaderTemplate>

            <FilterMenuTemplate>
                <div class="filterTemplate">
                    @foreach (var x in Departments)
                    {
                        <div>
                            <TelerikCheckBox Value="@(context.FilterDescriptor.FilterDescriptors.Select(f => (f as FilterDescriptor).Value).ToList().Contains(x.DeptCode))"
                                             TValue="bool"
                                             ValueChanged="@((value) => UpdateCheckedDeptStatus(value, x.DeptCode, context))"
                                             Id="@($"dept_{x.DeptCode}")">
                            </TelerikCheckBox>
                            <label for="@($"dept_{x.DeptCode}")">
                                @if (x == null) // part of handling nulls - show meaningful text for the end user
                                {
                                    <text>Empty</text>
                                }
                                else
                                {
                                    @x.DeptNameFull
                                }
                            </label>
                        </div>
                    }
                </div>

            </FilterMenuTemplate>
        </GridColumn>
Marin Bratanov
Telerik team
 answered on 04 Nov 2021
5 answers
914 views

I don't see it listed in the Blazor themebuilder, am I missing something?  

https://themebuilder.telerik.com/blazor-ui

 

 

JeffVisibilEDI
Top achievements
Rank 1
Iron
 answered on 03 Nov 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?