Questions on UI for Blazor Forum

1 answer

155 views

Is there a way to leverage the Grid with normalized data?

I've tried looping through the fields to generate the columns, that's fine. But when it comes to editing them, I can't specify the field in the column as the model doesn't have those properties. This then leads to the field never having a value in the OnEdit callback.

I know I can work around it using OnBlur of all of the input fields, but that's really annoying. Any suggestions?

I've added sample JSON of what it sort of looks like at the bottom.

    "lineItems": [
        {
            "id": 5,
            "sortOrder": 2,
            "columns": [
                {
                    "id": 77,
                    "fieldId": 1,
                    "value": "Test 1",
                    "lineItemId": 5
                },
                {
                    "id": 78,
                    "fieldId": 7,
                    "value": "Centerspread",
                    "lineItemId": 5
                },
                {
                    "id": 79,
                    "fieldId": 8,
                    "value": "02/02/2022",
                    "lineItemId": 5
                },
                {
                    "id": 80,
                    "fieldId": 9,
                    "value": "28/02/2022",
                    "lineItemId": 5
                },
                {
                    "id": 81,
                    "fieldId": 11,
                    "value": "4/C",
                    "lineItemId": 5
                },
                {
                    "id": 82,
                    "fieldId": 13,
                    "value": "600",
                    "lineItemId": 5
                },
                {
                    "id": 83,
                    "fieldId": 24,
                    "value": "01/10/2022",
                    "lineItemId": 5
                },
                {
                    "id": 84,
                    "fieldId": 26,
                    "value": "Magazine",
                    "lineItemId": 5
                },
                {
                    "id": 85,
                    "fieldId": 27,
                    "value": "Test 1",
                    "lineItemId": 5
                },
                {
                    "id": 86,
                    "fieldId": 37,
                    "value": "Internal notes, they are a thing!",
                    "lineItemId": 5
                }
        ]

General Discussions

Grid

answered on 22 Jun 2022

2 answers

868 views

How to customize the Telerik Grid delete message confirmation?

I need to add custom text to the delete message. Is there a way to do this?

https://docs.telerik.com/blazor-ui/components/grid/editing/built-in-dialogs/delete-confirmation

Grid

answered on 22 Jun 2022

1 answer

318 views

Determine selection when using OnRead

Hello

For a recent project I have to display around 100 000 rows in a grid, I have to be able to sort/filter and select certain rows/select all rows in a filter.
Because it's quite a lot of data I've decided to use the OnRead event on the TelerikGrid, this all seems to work fine except for the ability to select all rows (only the rows on the current page are selected). The grid looks something like this:

The code looks something like this:

<TelerikGrid AutoGenerateColumns=true
             OnRead="@ReadItems"
             TItem=ProductDto
             Pageable=true
             PageSize=10
             Sortable
             SelectionMode=@GridSelectionMode.Multiple
             FilterMenuType=@FilterMenuType.Menu
             FilterMode="GridFilterMode.FilterMenu"
             Resizable="true"
             ScrollMode="@GridScrollMode.Scrollable"
             SelectedItemsChanged="@((IEnumerable<ProductDto> newSelection) => onSelect(newSelection))"
             Reorderable="true"
             SelectedItems="@selectedProducts"
             >
    <GridColumns>
        <GridCheckboxColumn  CheckBoxOnlySelection="true" Reorderable=false SelectAllMode=@GridSelectAllMode.All Width="100px" SelectAll="true" Locked="true" />
        <GridColumn Field="@nameof(ProductDto.Id)" Title="@_localizer[nameof(Translations.Id)]" Width="100px" Locked="true" />
        <GridColumn Field="@nameof(ProductDto.Code)" Title="@_localizer[nameof(Translations.Code)]" Width="200px" Locked="true" />
        <GridColumn Field="@nameof(ProductDto.ExternalReference)" Title="@_localizer[nameof(Translations.ExternalReference)]" Width="200px" Locked="true" Lockable="true" />
        <GridColumn Field="@nameof(ProductDto.Description)" Title="@_localizer[nameof(Translations.Description)]" Width="200px" Lockable="true" />
        <GridColumn Field="@nameof(ProductDto.BrandCode)" Title="@_localizer[nameof(Translations.BrandCode)]" Width="200px" Lockable="true" />
        <GridAutoGeneratedColumns ColumnWidth="200px" />
    </GridColumns>
</TelerikGrid>

Since I use the OnRead event, only a small amount of data is available client side, when I click the header checkbox of the GridCheckboxColumn all the items that are available client-side get selected BUT, I would like to be able to tell whether a user clicked the checkbox in the header (=select everything in the grid), or if the user just manually selected all the visible rows of a certain page.

TLDR: How to determine whether a user clicked the header checkbox (= select everything) vs a user manually clicked all items on a certain page. (The selectedItems result is both the same)

Kind regards

Thomas

Grid

answered on 22 Jun 2022

0 answers

232 views

Blazor LoaderContainer and Loader not being announced by screen readers

Hello,

I'm trying to comply with accessibility standards and I'm unable to get the Loader text to be read by screen readers.

I've tried wrapping the Loader component in an aria-live element, using templates, and even loaded up your GitHub loader examples to no avail.

Can you shed some light on what may potentially be happening and how to get it picked up by the screen readers?

Thanks

Accessibility

Loader

LoaderContainer

asked on 21 Jun 2022

1 answer

205 views

Dialog position

Is there a way to position a dialog/window next to the button that opened it?

Dialog

Window

answered on 21 Jun 2022

1 answer

562 views

How to change the colors for pre-defined dialog boxes?

I need to to apply a different color scheme. By default, I am seeing the following. I use bootstrap for theming.

<link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-bootstrap/all.css" rel="stylesheet" />

https://docs.telerik.com/blazor-ui/components/dialog/predefined

Dialog

Styling

answered on 19 Jun 2022

0 answers

310 views

Cascading DropDownList in Grid Editing (Inline) - article needs to be adjusted

Cascading DropDownList in Grid Editing

it will work when you need to select the value in parent drop down, but for example on edit, the value is already selected & the event will not be fired to get filtered data to child dropdown , my sugestion to combine the solution with data being preoladed for the editing item on Grid=> OnEdit event

private async Task GridRowEdit(GridCommandEventArgs args)
    {
        Console.WriteLine("GridRowEdit");
        if (args.Item is ProductSubmissionModel model)
        {
            await ViewModel.LoadLabs(model.Jurisdiction?.Key);
        }
    }

Grid

updated question on 18 Jun 2022

1 answer

402 views

Can The Telerik Blazor and ASP.NET tools be used in a Docker Container

We are working on a application rewrite and wanted to see if your tools can be used within a Docker Container.

General Discussions

answered on 17 Jun 2022

1 answer

253 views

TelerikGrid Creating Command Buttons in DetailTemplate Grid

I am in the learning phase of Telerik currently, so I assume that I am missing something obvious here. I have the following code:

<TelerikGrid Data="@EquipmentList" Groupable="true" Pageable="true">
    <DetailTemplate>                   
        <TelerikGrid Data="@context.TaskList">
            <GridColumns>
                <GridColumn Field="TaskTitle" Title="Task"></GridColumn>
                <GridColumn Field="TaskDetail" Title="Detail"></GridColumn>
                <GridCommandColumn>                    
                    <GridCommandButton Command="OpenPDFCommand" Icon="file" OnClick="@(()=> FileService.OpenPDF(TaskPDF))"> Test Command</GridCommandButton>             
                </GridCommandColumn>
            </GridColumns>
        </TelerikGrid>
    </DetailTemplate>
    <GridColumns>
        <GridColumn Field=EquipmentName></GridColumn>
    </GridColumns>
</TelerikGrid>

This is the beginning of a maintenance task tracking site. The basic format of data is

List<Equipment> and Equipment has List<MaintenanceTask> in it -- so a List within a List.

I can get the data to show properly, but when I add the Command column to start adding functionality to the page, I get two errors that I don't fully understand:

1) 
The child content element 'ChildContent' of component 'GridCommandColumn' uses the same parameter name ('context') as enclosing child content element 'DetailTemplate' of component 'TelerikGrid'. Specify the parameter name like: '<ChildContent Context="another_name"> to resolve the ambiguity C:\Users\StevenDeam.ASIMOV\source\repos\JM3Telerik\JMWeb\Pages\Maintenance\MaintenanceMain.razor 

2) 
The name 'context' does not exist in the current context	JMWeb	C:\Users\StevenDeam.ASIMOV\source\repos\JM3Telerik\JMWeb\Pages\Maintenance\MaintenanceMain.razor	9

I did test adding a bogus context:

<GridCommandColumn>                    
                    <ChildContent Context="test">

This changed the error to say the namespace "test" could not be found. I am missing something on how the commandcolumn relates to the grid it seems. And none of the documentation that I can find shows the context of a commandcolumn needing to be changed.

Grid

answered on 16 Jun 2022

1 answer

209 views

Telerik Blazor drawer not allowing content to overflow

Hello, I'm currently using the Telerik drawer as a static menu on the left of our project. We're using the template to customize the components being loaded into the drawer and would like the upper most component (profile image) to extend about 50% out of the drawer and into our header. You can view the look we want to accomplish from the drawerWant image and view the behavior we're currently getting from the drawerHave image.

Drawer

answered on 16 Jun 2022