I want the grid to be able to resize all the columns (or only certain columns) to fit their data, when the data loads, without the user having to double click the border between them.

---

ADMIN EDIT

Automatic application of the auto fitting will come with a flicker, and that's why it was declined as a feature originally. In Blazor we have a detachment between code and when exactly something is rendered. So, we have no way to trigger the resizing logic immediately after the columns content is rendered. The events that are available will cause a flicker and can cause a performance hit - both for the browser and also by raising StateChanged multiple times.

Another caveat is how would this be exposed for configuration - should it work for all columns at once, or only for certain columns (how to control for which ones), how to control which data-related events should invoke this logic (or should it happen super often on any event). Exposing such configuration is likely to lead to a property hell type of situation.

Perhaps a way to get this would be to provide API on the grid to invoke that functionality that you can call as required by your logic and UX: https://feedback.telerik.com/blazor/1513384-programmatically-invoke-fit-to-width-functionality-for-the-grid-columns.

Nevertheless, we will keep this open to monitor for feedback, what is requested, interest and how people would want it exposed. Leave your comments and preferences here.

---

AutoFitting all columns should not leave blank space in the Grid, the last column should take the available space.

This functionality might be triggered by a setting a bool parameter to true. 

Problem:

Grid exports columns as 0 width unless Grid column widths are specified in px.  This is a terrible experience for users, and specifying grid width in px is terrible when you have users that can be using phones or 4k screens.  Managing Grid for different screen sizes is already hard enough! 

Solution 1: (Good)

The grid should export a default (64px) width for columns that aren't specified in px. Inexperienced Excel users are lost when columns are collapsed, but can easily resize columns as needed when each one is visible!

Solution 2: (Better)

Calculate a width - like [(rem value)*10]px. Even if it isn't perfect it will go a long way to creating something visually pleasing on initial open in Excel.

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.

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; }
    }
}

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 to be able to enable the Column Chooser menu on just the Command Column and then keep all the other column menus as-is (I have a combination of various custom filter controls on them, so I don't watch to switch to the Column Menu)

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 I switch the culture of my App from English to Swedish, the Virtual scrolling feature of the Grid breaks. 

===========

ADMIN EDIT

===========

The issue stems from invalid transform style applied to the k-virtual-position div element in Swedish culture. Due to integer to string conversion that takes culture into consideration when setting the style and/or data-translate attribute, when this number is < 0, the negative sign is longer dash for Swedish culture. This longer dash is not parsable by JS and CSS which is why the translateY transform is invalid.

As a workaround for the time being, you can try adding transform style for the k-virtual-position div, so you can override the default one and the correct dash will be applied: 

<style>
    .k-virtual-position {
        transform: translateY(-1080px);
    }
</style>

Hi Support,

I found a bug that Telerik grid filter for blazor on web assembly version not working for dynamic datasource. While the server one work just fine. Please see the video for more detail. I am also attach the two solution for your investigation.

https://www.loom.com/share/c876a98500ea4a8fbacd3aa30179485d

This same peice of code work in Server version but not for client version

<TelerikRootComponent>
    <TelerikGrid Data="@GridData"
                 Height="350px"
                 Sortable="true"
                 Pageable="true"
                 SortMode="@SortMode.Single"
                 FilterMode="@GridFilterMode.FilterMenu"
                 FilterMenuType="@FilterMenuType.CheckBoxList"
                 PageSize="10">
        <GridColumns>
            <GridColumn Field="Col1" Width="80px" Locked="true" />
            <GridColumn Field="Col2" Width="140px" />
        </GridColumns>
    </TelerikGrid>
</TelerikRootComponent>

@code { public List<dynamic> GridData = new List<dynamic>();

    protected async override Task OnInitializedAsync()
    {
        for (int i = 1; i < 10; i++)
        {
            dynamic row = new ExpandoObject();
            row.Col1 = $"col1_{i}";
            row.Col2 = $"col2_{i}";
            GridData.Add(row);
        }

    } }

Please help me fix this issue ASAP as our product need this filter to ship the release.

Thanks

Huy Nguyen

I would like to be able to set Min Width parameter to a Grid Column. The behavior I expect to see is:

• The Grid Column with set Min Width will take all the available space on large screens
• On smaller screens it will shrink but no more than the set min width (e.g. 100 px).

Our application has, on many pages, complex business logic to enable or disable specific cells based upon the viewing mode, the user's capabilities, the type of data in the row, etc.   If a cell is to be disabled, we also want to change the background color..  This is easily accomplished with the OnCellRender property.

However, we cannot enable/disable specific cells within a column without creating a column template with conditional logic.  And so, in all our grids, EVERY column has to have a template, just for that trivial function.  And now we have business logic smeared across both the razor page and the code page. 

A template should be required only if you are doing something unusual or exceptional.  Setting a cell to be enabled or disabled is completely routine, and one should not have to create a template just for that.

If you would add a property such as OnCellEnable, to override the column Enabled property on a per-cell basis, it would be extremely useful and would eliminate the need for literally hundreds of templates.

Thanks

If a developer changes the structure of the grid in a new release, such as adding or removing columns, the restore can have very unexpected results.

We get around this by storing a version number with the grid and incrementing that number when we change the grid columns.  If the version number on the grid does not match the version number stored with the state, we don't restore it.

We would like to see this be more of an automatic feature of the grid.

Compare the columns in the saved state with the columns in the Grid declaration. You may need to change the way the Grid columns are declared, according to the the linked documentation. If there is inconsistency between the two collections, strip the column information from the saved state before restoring it.  (This was suggested by Dimo from Telerik in a support ticket)

An alternative would just be to throw away that state when it can't be safely restored.