At the moment, the CollapsedGroups  collection in the grid state is the indexes of the root-level groups that you can collapse. I want to also be able to control the expanded state of nested groups.

ADMIN EDIT:

Ideas I can see are the following, do add your vote and comments on how you expect that to be exposed:

• a form of Id/field in the group descriptor that controls this. Caveat - groups don't generally have such an id and the descriptor does not control the UI, it controls the data.
• an event that provides the level, field name and group value that lets me choose this for every group as it renders. Caveat - might not plug in the state, but if you have a certain business logic for that you can just keep it in that event always, regardless of the grid state, or keep additional information in an application state.
• the current indexes could become recursive (see the image attached below). Caveat: you can't be sure that the next time data loads the data and so the groups will be the same when loading state

On initialization of the Grid the oDataString is correct, but when I apply a filter or apply a sort to a Grid column the ToODataString extension method generates an incorrect request URL. If I revert back to 2.16.0 everything works as expected. 

When I have a grid with Reordable=true and a ComboBox in the HeaderTemplate, I cannot click in the combo box because the reordable functionality prevents it.

---

ADMIN EDIT

This could be exposed through a data- attribute that you could add to your DOM elements so that the grid can know to skip them, for example:

<TelerikGrid Data="@MyData" Height="300px" Pageable="true" Sortable="true" FilterMode="@GridFilterMode.FilterMenu" Reorderable="true">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.ID))" Title="This title will not be rendered">
            <HeaderTemplate>
                Continent <br />
                <div style="text-align:center">Id</div>
                <div @onclick:stopPropagation="true" data-draggable="false">
                    <TelerikComboBox Data="@Continents" Filterable="true" class="headerCombo"
                                     @bind-Value="@SelectedContinentId"
                                     TextField="@nameof(Continent.Name)" ValueField="@nameof(Continent.Id)" Id="MyId">
                    </TelerikComboBox>
                </div>
            </HeaderTemplate>
        </GridColumn>
        <GridColumn Field=@nameof(SampleData.Name) Title="First Name" />
    </GridColumns>
</TelerikGrid>

@code {
    /* Grid */
    string result { get; set; }
    void DoSomething()
    {
        result = $"button in header template clicked on {DateTime.Now}, something happened";
    }

    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
    {
        ID = x,
        Name = "name " + x,
        HireDate = DateTime.Now.AddDays(-x)
    });

    /* ComboBox */

    public class Continent
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
    IEnumerable<Continent> Continents = new List<Continent>() { new Continent { Id = 1, Name = "Africa" }, new Continent { Id = 2, Name = "Asia" }, new Continent { Id = 3, Name = "South America" } };
    public int SelectedContinentId { get; set; } = 1;

}

---

When using row virtualization, the visible rows are miscalculated when the browser zoom is used (hold control with mouse scroll). 

The result of the miscalculation is that the first row at some point is not visible.

To reproduce the problem you should scroll to the top of the grid and see the first row.

Then start to zoom down and see how the first row is displaced.

Seems like only 50%, 100%, 150%, 200% (multiply of 50%) are calculated correctly in row virtualization

<AdminEdit>

You can reproduce the bug with the attached code.

It's browser-specific and is appearing only in chromium browsers.

It could be related to the way browsers calculate the size of the elements when zooming.

Currently, there is an open bug in the chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1048147&q=component%3AUI%3EBrowser%3EZoom%20height&can=2 

</AdminEdit>

The orderby clause only has one column when multicolumn sorting is enabled, you can test it with this sample.

---

ADMIN EDIT

A workaround is to replace the orderby generated by the grid with your own clause that uses the DataSourceRequest to extract all sort descriptors, here's an example:

@using System.Net.Http.Json
@using System.Text.RegularExpressions
@using Telerik.Blazor.Extensions
@using WasmApp.Shared
@inject HttpClient Http

<TelerikGrid Data=@GridData
             Height="460px"
             RowHeight="60"
             PageSize="10"
             Pageable="true"
             Sortable="true"
             FilterMode="@GridFilterMode.FilterRow"
             SortMode="@SortMode.Multiple"
             OnRead=@ReadItems
             TotalCount=@Total>
    <GridColumns>
        <GridColumn Field="ProductID" />
        <GridColumn Field="ProductName" />
        <GridColumn Field="Discontinued" />
    </GridColumns>
</TelerikGrid>

@code{
    public List<ODataProduct> GridData { get; set; } = new List<ODataProduct>();
    public int Total { get; set; } = 0;

    protected async Task ReadItems(GridReadEventArgs args)
    {
        var baseUrl = "https://demos.telerik.com/kendo-ui/service-v4/odata/Products?";

        string OdataUrl = args.Request.ToODataString();

        // replace the original orederby clause with one that contains all the order rules
        Regex x = new Regex("(orderby=)(.*?)(&)", RegexOptions.IgnoreCase);
        string actualOrderByClause = "orderby=";

        for (int i = 0; i < args.Request.Sorts.Count; i++)
        {
            if (i > 0)
            {
                actualOrderByClause += ",";
            }
            string order = args.Request.Sorts[i].SortDirection == Telerik.DataSource.ListSortDirection.Ascending ? "" : "%20desc";
            actualOrderByClause += $"{args.Request.Sorts[i].Member}{order}";
        }

        actualOrderByClause += "&";

        string OdataQueryWithMultipleOrder = x.Replace(OdataUrl, actualOrderByClause);

        //do the request as usual
        var requestUrl = $"{baseUrl}{OdataQueryWithMultipleOrder}";

        ODataResponseOrders response = await Http.GetFromJsonAsync<ODataResponseOrders>(requestUrl);

        GridData = response.Products;
        Total = response.Total;
    }
}

---

If you set args.IsCancelled=true in any CUD event handler, the loading sign will never go away.

---

ADMIN EDIT

If you don't need to cancel the event (e.g., because remote validation or data operation failed), you should avoid cancelling it - its purpose is to keep the grid in the current mode (edit/insert) when the operation fails so the user does not lose data.

That said, the loading sing should disappear in thsoe cases too, and a workaround is to disable it by setting the EnableLoaderContainer="false" parameter of the grid.

---

I would like the grid and treelist to honor the DisplayFormatAttribute.NullDisplayText Property so I don't have to use cell templates to change what null values render.

FYI... Here's a REPL of it not respecting it

I want to be able to use interfaces and models that are created from a service when working with the grid. A parameterless constructor is not enough for me, I need to be able to instantiate models in a more complex manner.

---

ADMIN EDIT

The tentative event name I have put in the title might vary when the implementation is researched. The goal would still be the same - the grid to provide an event when it needs an instance of the model so you can provide it with one. At the moment this happens when a row enters edit mode, when the filter list needs to be built, and when you are inserting an item (a caveat with the last one might be the OnClick event for the command button - the new event might have to fire before OnClick so it can give you the model).

---

I have a WASM application and I setup my Grid to use the editor as an editing field in the Grid. When the user types something the application is laggy and it might even hang.

---

ADMIN EDIT

Attached is a sample app that alleviates this a little by using a regular textarea and making editor updates less frequent.

---

I noticed after debugging a problem when editing some rather complex rows in a grid that the grid internally calls Telerik.Blazor.Extensions.ObjectExtensions.Clone(...) to create a deep clone for editing. If the object being cloned implements System.ICloneable then this is ignored and an attempt is made to clone it using reflection - the problem is that ObjectExtensions.Clone(...) fails for a number of cases and observing ICloneable would give a developer the means to implement the correct cloning behaviour.

I'm not asking for ObjectExtensions.Clone(...) to be fixed in any way (after all, no matter what you do there will always be some cases it cannot handle), just to use ICloneable where possible.

As an aside, the failed cases were:

• object has an indexer with get/set (exception thrown by ObjectExtensions.Clone() because it attempts to read the value without passing an index)
• object implements IEnumerable, including arrays (original object returned without being cloned)
• object contains a circular reference (stack overflow)

---

ADMIN EDIT

At the end of this post you can find the two most common scenarios that can exhibit this problem, and a video that illustrates it.

A potential workaround could be to avoid the second call to onread because that's where the problem lies, with code similar to this:

    int readCounts { get; set; }
    protected async Task ReadItems(GridReadEventArgs args)
    {
        if (readCounts != 1) // the second call is skipped - that's where the problem lies
        {
            Console.WriteLine("ONREAD with skip " + args.Request.Skip);
            HttpResponseMessage response = await Http.PostAsJsonAsync("WeatherForecast", args.Request);

            if (response.StatusCode == System.Net.HttpStatusCode.OK)
            {
                DataEnvelope<WeatherForecast> envelope = await response.Content.ReadFromJsonAsync<DataEnvelope<WeatherForecast>>();

                GridData = envelope.CurrentPageData;
                Total = envelope.TotalItemCount;

                StateHasChanged();
            }
        }
        readCounts++;
    }

where you may need to extend this a little to also use a flag for whether there was state loaded at all - if there wasn't, then the OnRead call may want to continue because it could be a legitimate user action. Whether this is needed is up to the app and whether your users already have a state saved (if you use OnStateChanged to save the state, they probably already do).

Another possible workaround is to always save Skip=0 in the state so that the user always starts at the top of the grid rather than juuust slightly off from where they expect.

---

When you set widths to some columns in the grid, the rest of the columns stretch to accommodate the rest of the width. Thus, the row drag column can stretch and become unexpectedly wide. A screenshot of the problem is attached.

Perhaps the GridRowDraggableSettings could have a parameter for the width of the draggable column.

<AdminEdit>

As a workaround you can use some CSS to set a width for the Drag column:

<style>
    .custom-row-draggable-col-width.k-grid .k-drag-col {
        width: 100px;
    }
</style>

<TelerikGrid Data="@MyData" Height="400px"
             Class="custom-row-draggable-col-width"
             Pageable="true"
             Resizable="true"
             Reorderable="true"
             RowDraggable="true"
             OnRowDrop="@((GridRowDropEventArgs<SampleData> args) => OnRowDropHandler(args))">
    <GridSettings>
        <GridRowDraggableSettings DragClueField="@nameof(SampleData.Name)"></GridRowDraggableSettings>
    </GridSettings>
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@code {
    private void OnRowDropHandler(GridRowDropEventArgs<SampleData> args)
    {
        //The data manipulations in this example are to showcase a basic scenario.
        //In your application you should implement them as per the needs of the project.

        MyData.Remove(args.Item);

        var destinationItemIndex = MyData.IndexOf(args.DestinationItem);

        if (args.DropPosition == GridRowDropPosition.After)
        {
            destinationItemIndex++;
        }

        MyData.Insert(destinationItemIndex, args.Item);
    }

    public List<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    }).ToList();

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

</AdminEdit>

I have a Grid and if the initial validation fails for a certain cell and the user edits a cell with a valid value on the same row the editing freezes. 

<AdminEdit>

As a workaround, you can provide valid initial values for all cells in the Grid.

</AdminEdit>

We often have grid data with a widely varying quantity of cell content from row to row. We usually present this with constant row height initially to have as much row overview as possible at a glance.

Grabbing the row divider line and individually make it larger or even double click on it to fit the size would be very useful for users.

Hi,


I am getting an unhandled exception when setting the GridState of a TelerikGrid with the SetState method that has multi-column headers.


Exception:

Unhandled exception rendering component: More than one sibling of element 'col' has the same key value, 'Telerik.Blazor.Components.GridColumn'. Key values must be unique.

Example grid:

<TelerikGrid @ref=@TestGrid Data=@TestData FilterMode=GridFilterMode.FilterMenu Sortable="true" SortMode=SortMode.Multiple TItem="TestDataItem">
   <GridColumns>
       <GridColumn Title="Test Column 1" Field=@nameof(TestDataItem.TestColumn1) />
       <GridColumn Title="Test Column Group" />
          <Columns>
             <GridColumn Title="Test Column 2" Field=@nameof(TestDataItem.TestColumn2) />
             <GridColumn Title="Test Column 3" Field=@nameof(TestDataItem.TestColumn3) />
          </Columns>
       </GridColumn>
   </GridColumns>
<TelerikGrid>

The TelerikGrid is kind of missing a "None" Value in the enum for the EditMode.

We need to disable the edit mode based on a value from the model (role access restricted), and I don't see any way this is possible without copy-pasting the entire grid under an if statement.

------ADMIN EDIT-------

A possible workaround at the moment is to set the "Editable" parameter of the columns to "false" or not use a command column with "edit".

Another workaround can be to attach a OnEdit handler and cancel the event based on the view model flag only. If the user cannot edit - always cancel.