Questions on UI for Blazor Forum

1 answer

87 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

304 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

112 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

359 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

185 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

231 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?

Even when I copy and paste the example to a new razor page, it doesn't work.

Form

General Discussions

Signature

asked on 22 Dec 2022

0 answers

157 views

Where can I find a sample for FilterDescriptor.CreateFilterExpression

Help :)

How can I make it work and apply on a IQueryable if possible ?

Filter

Grid

updated question on 22 Dec 2022

1 answer

343 views

NumericTextbox: Show "Blank" instead of "0" but fixed decimals if > "0"

If a value is "0" then I want to display an empty field. But if a value is greater that "0" I want to format it with 2 decimals.

I can not figure an easy way how.

Actually I have the choice between "#,###.##" and "#,##0.00". I have a lot of those fields so I need a kind of generic solution...

NumericTextBox

answered on 22 Dec 2022

1 answer

132 views

Tabstrip - resetting to default tab

I have a Tabstrip with 3 tabs. I have buttons on the 2nd tab. I select the 2nd tab and click on a button and the active tab goes back to the 1st tab even when the button I clicked on doesn't do anything. How do I prevent the selected tab from resetting to the first (default) tab?

TabStrip

answered on 21 Dec 2022

0 answers

311 views

Preserve grid state on refresh.

I'm displaying "live" data in a telerik blazor grid that is refreshed every 30 seconds by a timer from a database. I've tried following the examples to preserve the grid state, but all rows collapse after StateHasChanged(). I do not want to store the state in the local browser. The reason I would like this feature, is that I will be displaying a large amount of nested data, and would like to only allow the user to look at one record at a time (to simplify the interface). I'm not able to successfully preserve the expanded state. I have also tried

var state = Grid.GetState();

state.ExpandedItems = new List<MainModel> { mod };

await InvokeAsync(() => StateHasChanged());

await Grid.SetState(state)

But the state results in collapsed.

Grid

asked on 21 Dec 2022