Questions on UI for Blazor Forum

Regardless of property value
<StockChartNavigatorSelectMousewheel Enabled="false" />
When the mouse wheel is rotated on the chart area, the StockChartNavigatorSelect area is zoomed.

StockChart

asked on 29 Dec 2022

1 answer

419 views

Google Maps?

Is it possible to use Google Maps in radmap?

Map

answered on 28 Dec 2022

1 answer

86 views

In TelerikEditor is impossibile to scroll and copy text when not enabled

Is that behaviour by design?

Editor

answered on 27 Dec 2022

1 answer

295 views

Grid with Incell editing Add Item button but does not put that row at the top and in edit mode.

I am trying to make the add a new row in my grid work the same as in the demo below but am not able to get the new row to be at the top of the grid and in edit mode as the demo does. Grid Incell editing Demo

The data is being retrieved from an OData endpoint.

When I click the add button a new record is created in the database and the grid refreshes, but I need to have that row be given the focus and be in edit mode. I would also like it at the top of the grid for editing as the demo does.

Why is my code not working as the demo does? What do I need to change to get it working like the demo?

My razor page:

<TelerikGrid
    SelectionMode="@GridSelectionMode.Single"
    TItem="@WarningVM"
    OnRead="@ReadWarnings"
    EditMode="@GridEditMode.Incell"
    OnUpdate="@UpdateHandler"
    OnEdit="@EditHandler"
    OnCreate="@CreateHandler"
    OnCancel="@OnCancelHandler"
    Resizable="true"
    Reorderable="true"
    PageSize="15"
    Navigable="true"
    Pageable="true"
    Sortable="true"
    FilterMode="@GridFilterMode.FilterMenu">
    <GridToolBar>
        <GridCommandButton Command="Add" Icon="add">Add Warning</GridCommandButton>
    </GridToolBar>
     <GridColumns>
        <GridColumn Title=" " Width="4em" Filterable="false">
            <Template>
                <span class="large-icons">
                    <TelerikIcon Icon="info-circle" Class="infoIcon"></TelerikIcon>
                </span>
            </Template>
        </GridColumn>
        <GridColumn Field="@(nameof(WarningVM.Id))" Width="7em" Editable="false"/>
        <GridColumn Field="@(nameof(WarningVM.ValueType))" Title="Value Type"/>
        <GridColumn Field="@(nameof(WarningVM.Value1))" Title="Value #1" />
        <GridColumn Field="@(nameof(WarningVM.Value2))" Title="Value #2" />
        <GridColumn Field="@(nameof(WarningVM.ReasonAdded))" Title="Reason Added"/>
        <GridColumn Field="@(nameof(WarningVM.IsActive))" Title="Active" />
        <GridCommandColumn Width="250px">
                <GridCommandButton Command="Delete" Icon="delete"></GridCommandButton>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true"></GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true"></GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

My back end code:

public async Task ReadWarnings(GridReadEventArgs args)
{
    ODataWarningsResponse data = await warningService.GetWarnings(args.Request);
    args.Data = data.Warnings;
    args.Total = data.Total;
}
private async Task UpdateHandler(GridCommandEventArgs args)
{
     var test = await warningService.UpdateWarning((WarningVM)args.Item);
}
private async Task EditHandler(GridCommandEventArgs args)
 {
      var warningVM = (WarningVM)args.Item;
      await warningService.UpdateWarning(warningVM);
  }
private void CreateHandler(GridCommandEventArgs args)
{
    WarningVM item = (WarningVM)args.Item;
    warningService.UpdateWarning(item);
}

Grid

answered on 26 Dec 2022

2 answers

111 views

Building forms for models hierarchies

In certain situations I need to create forms based on hierarchical models. Initially let's assume something simple like:

ClassA may have many common properties (and complex ways to edit them) and consequently I would like them to be reused when creating the forms for ClassB and for ClassC.
What do you think is the best solution? At the moment with the different attempts that I have made have not been satisfactory.

Greetings.

Form

answered on 23 Dec 2022

2 answers

340 views

How to reference components inside a Grid DetailTemplate

Hello.

I would like to know how is the best way to reference the components that are inside a grid detail template from the code behind.
To exemplify the situation I leave the following code:

<TelerikGrid TItem="@MyModel" @ref="_myMainGridReference" OnRead="@OnReadHandler" OnRowDoubleClick="@OnGridDoubleClickHandler">
    <GridColumns>
            - Main grid columns here -
    </GridColumns>
<DetailTemplate>
@{
        /*  Child component inside detailtemplate => how can I reference from the code behind? */
        var ctex = context as JobViewModel;
        <TelerikGrid @ref="??????" Data="@ctex.data" SelectionMode="@GridSelectionMode.Multiple">
               <GridColumns>
                       - Detail grid columns here -
               </GridColumns>
        </TelerikGrid>
}
    </DetailTemplate>
</TelerikGrid>

I have some ideas on how to achieve this but I don't know if they are the most appropriate. For that reason I would like to know what your approach would be to solve it.
Best regards,

Grid

answered on 23 Dec 2022

1 answer

181 views

How to navigate a detail template with the keyboard

Is there a way to navigate to a hierarchical detail template within the grid using the arrow keys? Currently in keyboard navigation demo, it mentions putting some type of focusable element into the template and hitting the tab key to get to it, but this is rather counter-intuitive for a screen reader user with the keyboard if they are using the arrow keys to navigate the grid cells, and then having to tab to get within the detail. If they tab again it's going to take them out of the grid completely.

Grid

answered on 23 Dec 2022

0 answers

218 views

Blazor Signature won't work :(

I'm trying to use the new Blazor Signature feature in a form but the pad isn't letting me draw. Nothing happens when I touch or use the mouse. Why is that?