The Telerik Blazor Grid doesn't seem to retain the currently selected items when sorting. I've got a simple single select grid and have bound the SelectedItems property to a similarly named field in code behind. The SelectedItems field definitely contains a single entry ok and selecting items in the grid updates this as expected. However, when sorting, the grid no longer highlights the selected item as selected, and the check box column is not selected, even though the SelectedItems field still contains a single entry.

Is this the intended behaviour? And, if so, how can I get the grid to highlight the selected item after sorting?

I'm using Telerik Blazor UI 3.2.0.

I'm using a Grid with GridScrollMode set to Virtual, and a custom filtering function.  When the list is filtered and a checkbox is selected the grid reloads and scrolls back to the top of the list.  This only happens when Scroll Mode is Virtual.  The following example demonstrates the issue.

Steps to recreate

1. Load the page
2. Enter a single character in the Filter Criteria box
3. Scroll down the grid for a page or so
4. Check a check box
5. You should be immediately taken back to the to first entry in the filtered list

@page "/"

@using Telerik.Blazor.Components;
@using System;
@using System.Text;
@using System.Linq;


<PageTitle>Index</PageTitle>

<div class="row">
    <div class="col-md-6 offset-md-6">
        <input type="text" class="form-control" placeholder="Filter Criteria..." @bind="Filter" @bind:event="oninput" />
    </div>
</div>
<div class="row">&nbsp;</div>
<div class="row">
    <div class="ac-criteria-list">
        <TelerikGrid Data=GetFilteredRows()
                     PageSize="20"
                     Height="295px" RowHeight="50"
                     ScrollMode="@Telerik.Blazor.GridScrollMode.Virtual"
        >
            <GridColumns>
                <GridColumn Field="@(nameof(GridRow.Text))">
                    <Template>
                        @{
                            var item = context as GridRow;
                            <input type="checkbox" id="@item.Id.ToString()" @bind="@item.Selected" @key="@item" />
                            <label for="@item.Id.ToString()">@item.Text</label>
                        }
                    </Template>
                </GridColumn>
            </GridColumns>
        </TelerikGrid>
    </div>
</div>

@code
{
    public string Filter { get; set; } = string.Empty;

    public List<GridRow> FilteredRows { get; set; } = new();
    public List<GridRow> OriginalRows { get; set; } = new();

    protected override void OnInitialized()
    {
        for (var i = 0; i < 200; i++)
        {
            OriginalRows.Add(new GridRow
            {
                Id = i,
                Selected = false,
                Text = $"{i} - {Utility.GenerateRandomString(10)}"
            });       
        }

        FilteredRows = OriginalRows.OrderBy(x => x.Text).ToList();

        base.OnInitialized();
    }

    private List<GridRow> GetFilteredRows()
    {
        if (string.IsNullOrWhiteSpace(Filter))
        {
            return FilteredRows;
        }

        return FilteredRows.Where(row => row.Text.Contains(Filter)).ToList();
    }

    public class GridRow
    {
        public bool Selected { get; set; }

        public int Id { get; set; }

        public string Text { get; set; }
    }

    public class Utility
    {
        private static char[] _chars = new char[36]
        {
            '0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'
        };

        public static string GenerateRandomString(int length)
        {
            StringBuilder stringBuilder = new StringBuilder(length);
            Random random = new Random();
            for (int i = 0; i < length; i++)
            {
                stringBuilder.Append(_chars[random.Next(_chars.Length)]);
            }

            return stringBuilder.ToString();
        }
    }
}

Implementing OnRead is very intrusive and can very easily lead to bugs now or in the future.

I have a feature that would operate on all visible rows in the Grid (in all pages, not just the current one), and I need to know if a certain item/row is visible or not.

Is this possible, or can it be a future feature?

Thanks.

Hi,

at the OnUpload event I call a Javasrcipt to do some stuff before uploading. I generate a random string and set it as classname to the upload element to identify it in Javascript. In Javascript:

var files = $('. + uploaderClass)[0].querySelector('input').files;

this works in Firefox but not in Chrome (official version, I installed today).

So I set an pure HTML FileInput below the TelerikUpload like:

<input type="file" id="testFileUpload" />

(I choose first in the testFileUpload a file, then in the TelerikUpload which fires my Javascript)

I logged both elements to the browser console:

var telerikUploadElement = $('.' + uploadClass)[0].querySelector('input');
var testInput = document.querySelector('#testFileUpload');
console.log(telerikUploadElement);
console.log(testInput);

The console output for the telerikUploadElement:

input
.....
   - files: FileList { length:0}
....

the console ouptut for the testInput:

input#testFileUpload
....
    - files: FileList {0: File, length: 1}
......

In Firefox, the console output is the same for both upload elements.

Tested on:

• Windows10
• Telerik.UI.for.Blazor 3.2.0
• .net6.0
• Google Chrome 100.0.4896.127
• Firefox 99.0.1

REPL

Built in dialog from 

DialogFactory.AlertAsync

Goes behind TelerikWindow if the window is clicked. Then it cannot be brought back on top or otherwise closed. Shouldn't the built in dialog be modal and forced on top of the TelerikWindow until it is acknowledged?

Please, let me know. Thanks.

I have a Field in my TelerikGrid :  <GridColumn Field=@nameof(EssGrpParm.Str) Title="Tekst" Width="30%"/>.

Could I somehow split EssGrpParm.Str with data that looks like this: "CONT INT TFT CSS". into separate columns;. CONT, INT, TFT and CSS?

Should I add a list field in EssGrpParm and foreach over the list to get new columns?

Hi, apologies if this has been asked but I didn't find it via search. We are implementing the grid in our projects and one feature I'd like to implement is to prevent the default or 'no sort' state on a column when toggling sort on the same column. Our users should always be sorting by one column. If the user clicks repeatedly on the column currently sorted, we want it to only toggle between asc and desc.

What happens right now is with single sort mode, say we have col1 that is sort asc by default.

- If the user clicks col1 header once, it sorts to desc.

- If they click col1 header again it goes to 'empty'.*

* What I want to do is have it flip to desc instead. Obviously if they then sort by a different column it will clear the sort on this column.

I understand why there is such a default/empty state but was curious if there is a way to prevent this in our scenario. I saw the OnStateChanged example in the docs but it doesn't seem to provide info on what was previously selected so I could even cancel what was going on. Unless I missed something there.

Thanks!

Hi,

I have the following structure (shortend):

FormComponent.razor:

<UploadBox @ref="@BoxForUpload" />

FormComponent.razor.cs:

public UploadBox BoxForUpload;

public async Task OnSelect(UploadSelectEventArgs args)
{
    BoxForUpload.DoUpload();
}

UploadBox.razor:

<TelerikUpload @ref="@UploadRef" AutoUpload="false"></TelerikUpload>

UploadBox.razor.cs:

[Parameter] public EventCallback<UploadSelectEventArgs> OnSelect { get; set; }

public TelerikUpload UploadRef { get; set; }

public void DoUpload()
{
    UploadRef.UploadFiles();
}

If I set AutoUpload to true, the upload works.

But if I set AutoUpload to false, the OnSelect will be triggered, but the upload do not work (no file receives the upload-api) and there are no errors in the console. How can I trigger the upload from the FormComponent?