When the sum of the widths of the Grid columns is higher than the total width of the Grid and a horizontal scrollbar appears the Virtual Scrolling twitches when the user scrolls to the bottom of the Grid. The same behavior can be observed if the Grid has Resizeable columns and by resizing them horizontal scrollbar appears.

<AdminEdit>

The issue is reproducible on mobile Safari without horizontal scrolling. 

</AdminEdit>

When you shrink a Grid column, ellipsis is rendered to represent the clipped text. However, at some point of resizing the Column menu and Filter menu indicators are overlapping the Grid column header text.

==========

ADMIN EDIT

==========

In the meantime, a possible workaround would be to use some custom CSS to add right padding to the k-link span, so it does not get overlapped by the column menu icon. That padding should be approximately as wide as the span holding the column menu icon. You can also set a custom CSS class to the Grid through its Class parameter to make sure you are styling this exact instance of the Grid and not all instances on the page/app. The example below demonstrates how to achieve the described approach.

<style>
    .my-grid .k-link {
        padding-right: 40px;
    }
</style>

<TelerikGrid Data="@MyData"
             Class="my-grid"
             Pageable="true"
             PageSize="5"
             FilterMode="@GridFilterMode.FilterMenu"
             Sortable="true"
             Resizable="true"
             ShowColumnMenu="true">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="80px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name"/>
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@code {
    public IEnumerable<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
    });

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

There should be a way to provide the Format for filtering of DateTime columns.
If a DateTime column has the format "dd.MM.yyyy" filtering for "EQUALS 01.01.2021" does not show lines with the timestamp "01.01.2021 01:00" but the user would expect to see this line.

Regards,
René

Right now you can create a template in the grid to display text from a list based on the foreign key in the grid data. For example, if your database has a table user list and a table role. The Role table has an integer Id primary key column and a text Description column. The user table has a foreign key integer column that is the Role Id. You can bring all the data over when you call up the data (flattening the data) or you can just bring over the foreign key integer value for the role and then create templates.

The situation is described here:

https://docs.telerik.com/blazor-ui/knowledge-base/grids-foreign-key

When you do not flatten the data, you would need to retrieve the role collection and then reference that data in templates in the grid. You need a template for the grid itself, a template for filtering, and a template for the grouping. Maybe more that I am not finding?

What would be great is if you could simply set the foreign key collection for the column and not have to create any templates. You would have to also set what the Id and display text fields are on the collection also so the grid would know what data to use for finding and displaying the desired data. You could require a standard collection with standard field names and then we would have to project the values into it from our other collections using linq.

Hi, please expose a property in TelerikGrid where we can set the number of virtual columns to load in advance. A lot of times we would like to load data in advance for 5-10 columns left & right of the current viewport, so the user doesn't see empty columns while scrolling. This may apply to rows as well. It would be very helpful to have this property, please consider exposing it. Thank you.

============

ADMIN EDIT

============

The column Virtualization feature improves the Grid performance when it has a lot of columns. This does not include loading data on demand, but rather UI virtualization. All the data is retrieved and the performance optimization is achieved by rendering only the columns for the current Grid viewport. When the user scrolls horizontally the content for the other columns is rendered and while this happens, the cells appear empty. The requested parameter will control the number of columns that will be rendered in the current viewport but will not be visible until the user scrolls. Thus, the user will not see empty columns.

When storing and restoring grid state, the selected page size is not included as part of that state currently, and needs to be stored seperately.

(When using GridPagerSettings, the user can select the page size based on inputs provided to PageSizes param. This selection is not synced and will revert to default each time the grid is loaded.

I'd like for someone to be able to select all of the rows in a particular group. The main selection checkbox will just select all of the rows.

It would be nice if this also worked for sub grouping.

This feature request is to provide an option to configure the displayed format of the editor for the GridColumn. It is essential for the numeric and date editing. An alternative would be to follow the DisplayFormat parameter and reuse it in the DatePickers and NumericTextBox. However, we need to gather feedback for the required functionality from our customers.

Scenario

Rendering the grid column like so:

<GridColumn Visible="true" Field="ScalePercent" Title="Scale Percent" DisplayFormat="{0:P5}" VisibleInColumnChooser="false" />

The data in the grid column will show the 5 decimal precision. However, when we go in edit mode the value in the NumericTextBox is restricted to two decimal places.

Workaround

1. Usage of templates

2. Generic change of globalization setting for the NumericTextBox

`culture.NumberFormat.NumberDecimalDigits`

The CheckBoxList filter does not work as expected when the Grid is bound to ExpandoObject

===

ADMIN EDIT: A possible workaround is to bind the Grid with OnRead event and populate the MemberType property of the filter descriptors manually:

@using System.Dynamic
@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid OnRead="@OnGridRead"
             TItem="@ExpandoObject"
             Pageable="true"
             Sortable="true"
             FilterMode="@GridFilterMode.FilterMenu"
             FilterMenuType="@FilterMenuType.CheckBoxList"
             Height="400px">
    <GridToolBarTemplate>
        <GridSearchBox />
    </GridToolBarTemplate>
    <GridColumns>
        @{
            if (GridData != null && GridData.Any())
            {
                <GridColumn Field="PropertyInt" FieldType="@GridPropertyTypes["PropertyInt"]" />
                <GridColumn Field="PropertyString" FieldType="@GridPropertyTypes["PropertyString"]" />
                <GridColumn Field="PropertyGroup" FieldType="@GridPropertyTypes["PropertyString"]" />
                <GridColumn Field="PropertyDate" FieldType="@GridPropertyTypes["PropertyDate"]" />
                <GridColumn Field="PropertyBool" FieldType="@GridPropertyTypes["PropertyBool"]" />
            }
        }
    </GridColumns>
</TelerikGrid>

@code {
    private List<ExpandoObject> GridData { get; set; } = new List<ExpandoObject>();

    private Dictionary<string, Type> GridPropertyTypes { get; set; } = new Dictionary<string, Type>() {
        { "Id", typeof(int) },
        { "PropertyInt", typeof(int) },
        { "PropertyString", typeof(string) },
        { "PropertyGroup", typeof(string) },
        { "PropertyDate", typeof(DateTime) },
        { "PropertyBool", typeof(bool) }
    };

    private async Task OnGridRead(GridReadEventArgs args)
    {
        args.Request.Filters.OfType<CompositeFilterDescriptor>()
        .Each(x =>
        {
            x.FilterDescriptors.OfType<FilterDescriptor>()
                .Each(y => y.MemberType = GridPropertyTypes[y.Member]);
        });

        var result = GridData.ToDataSourceResult(args.Request);

        args.Data = result.Data;
        args.Total = result.Total;
        args.AggregateResults = result.AggregateResults;
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 18; i++)
        {
            dynamic expando = new ExpandoObject();

            expando.Id = i;
            expando.PropertyGroup = $"Group {(i % 3 + 1)}";
            expando.PropertyInt = i;
            expando.PropertyString = $"String {(char)(64 + i)}{(char)(64 + i)}";
            expando.PropertyDate = DateTime.Now.AddMonths(-i);
            expando.PropertyBool = i % 2 != 0;

            GridData.Add(expando);
        }
    }
}

Hello,

I'm having issues trying to figure out how to change values (from the model) when I'm Incell Mode without triggers the OnRead events after.  The actual code is working great since I was able to remove the Incell mode on the OnChangeModel event below,  but OnRead is keeps call after (which I didn't need and slow user experience)

Is there a way to cancel the OnRead ?

 <TelerikGrid OnRead="ReadItems" EditMode="GridEditMode.Incell"
                     @ref="@GridRef">
    <GridColumns>
      <GridEditDropDownColumn Field="Test1" Data="@Eval?.ListEvaluationTypes" Title="Title" Width="130px" OnChange="OnChangeModel" />
    </GridColumns>
</TelerikGrid>

   private TelerikGrid<EvaluationListDTO> GridRef { get; set; }

   protected async Task OnChangeModel(object model)
        {
            var item = (EvaluationListDTO)model;

            var state = GridRef?.GetState();

           //Save in the Database  

                // use the state to remove the edited item (close the editor)
                state.EditItem = null;
                state.OriginalEditItem = null;
                await GridRef.SetStateAsync(state);
        }

In this example.  Select a cell in column C.  Then double click on another cell in column C.  The unhandled exception will show up and a null reference exception is logged in the console.  

https://blazorrepl.telerik.com/QHuSQBlj170zO4u130

The exception message is:

System.InvalidOperationException: TelerikValidationComponent requires a cascading parameter of type EditContext. You can use Telerik.Blazor.Components.TelerikValidationTooltip`1[System.String] inside a EditForm or TelerikForm.