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.

It is impractical to set the grid columns to fixed width. I'll explain with example:

I have grid with 4 columns. The grid should have width 100%.

- Column 1: short text, 10-15 characters. I need this one to auto width to content.

- Column 2: checkbox, also auto-width to header title.

- Column 3: free text that may wrap on multiple lines. I need this column to use all available horizontal space so it will push the 4th column to the very right.

- Column 4: button. auto-width to either header title or button width, whichever is wider.

The auto-width feature is already requested: Autofit column widths on data load (telerik.com) but I don't see a feature request to handle the Column 3 scenario.

Grid - Import from Clipboard (Excel) when column name matches the first row header

I think it would be a great feature to be able to import copied data from excel into the grid either based on the index of the column or the header row in the clipboard matches the name of the column in Blazor Grid.

---

ADMIN EDIT

You can find an example of implementing this and the caveats it brings in the following sample project: https://github.com/telerik/blazor-ui/tree/master/grid/paste-from-excel

This feature requires research on how we could provide it as a built-in feature. So, any feedback on the matter will be appreciated.

---

It is a common request to show grids in alternating colors, rather than simply white and grey.  Because the Grid component generates the <tr> element, we are left with manually setting each <td> element.  A tedious but effective solution.

The feature I would like to request is to add 2 new tags to the <TelerikGrid> component, call them EvenRowClass, and OddRowClass.  The behavior is the same as the Class tag, but they operate on Even and Odd numbered rows of data, respectively.  Their values would be added to the <tr> element as <tr class="MyEvenClass"> or <tr class="MyOddClass" in the same manner class k-alt is generated or not.  This would provide a simple yet extensible mechanism to achieve custom alternating row colors in a Grid.

Reordering rows with RowDraggable is great but tricky.

Droping while the red line marker is on the upper line of a row works.

Droping while the red line marker is on the bottom line of a row brings the item to the position over the dopped line.

Thus, it is impossible to bring a line to the last position of a table (although one can bring the last row over it's predecessor as a workaround)

In Grid with MultiColumnHeaders, if you programmatically change a column header, this breaks the Grid rendering. The header text isn't updated unless the number of child columns changes.

Reproduction steps:

1. Run the provided code snippet. It will bind August's data to the grid. There are 5 days in August's data, so you can see 5 child columns under "Sales by Date".

2. Click the July button. July's data also has 5 days. You will see all the cell texts are updated, but the header texts aren't.

3. If you click on the July button again. They are updated at this time.

4. Refresh the page

5. Click the June button. June's data has only 3 days, so you will see all the header texts, and the cell texts are updated as expected.

Reproduction code:

<TelerikButton OnClick="@Change0">August</TelerikButton>
<TelerikButton OnClick="@Change">July</TelerikButton>
<TelerikButton OnClick="@Change2">June</TelerikButton>

@if (AllSales.Count > 0)
{
    <TelerikGrid @ref="@Grid" Data="@AllSales" Pageable="false">
        <GridColumns>
            <GridColumn Field="@nameof(MyViewModel.Product)">
            </GridColumn>
            <GridColumn>
                <HeaderTemplate>
                    <div>Sales by Date</div>
                </HeaderTemplate>
                <Columns>
                    @{
                        var dates = AllSales.First().SalesByDate.Keys.OrderByDescending(d => d).ToList();
                        foreach (var date in dates)
                        {
                            <GridColumn Title="@date.ToString("MM/dd")">
                                <HeaderTemplate>
                                    @{
                                        Console.WriteLine(date.ToString("MM/dd"));
                                        <div>@date.ToString("MM/dd")</div>
                                    }
                                </HeaderTemplate>
                                <Template>
                                    @{
                                        var record = context as MyViewModel;
                                        if (record.SalesByDate.ContainsKey(date))
                                        {
                                            <div>@record.SalesByDate[date]</div>
                                        }
                                    }
                                </Template>
                            </GridColumn>
                        }
                    }
                </Columns>
            </GridColumn>
        </GridColumns>
    </TelerikGrid>
}

@code {

    public class MyViewModel
    {
        public string Product { get; set; }
        public Dictionary<DateTime, decimal> SalesByDate { get; set; }
    }

    List<MyViewModel> AllSales { get; set; } = new List<MyViewModel>();
    TelerikGrid<MyViewModel> Grid { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        Change0();
    }

    protected void Change0()
    {
        AllSales = new List<MyViewModel>();
        AllSales.Add(new MyViewModel
        {
            Product = "Product A",
            SalesByDate = new Dictionary<DateTime, decimal>
            {
                { new DateTime(2021,08,01), 1000 },
                { new DateTime(2021,08,02), 2000 },
                { new DateTime(2021,08,03), 3000 },
                { new DateTime(2021,08,04), 4000 },
                { new DateTime(2021,08,05), 5000 }
            }
        });
        AllSales.Add(new MyViewModel
        {
            Product = "Product B",
            SalesByDate = new Dictionary<DateTime, decimal>
            {
                { new DateTime(2021,08,01), 1000 },
                { new DateTime(2021,08,02), 2000 },
                { new DateTime(2021,08,03), 3000 },
                { new DateTime(2021,08,04), 4000 },
                { new DateTime(2021,08,05), 5000 }
            }
        });
    }

    protected void Change()
    {
        AllSales = new List<MyViewModel>();
        AllSales.Add(new MyViewModel
        {
            Product = "Product C",
            SalesByDate = new Dictionary<DateTime, decimal>
            {
                { new DateTime(2021,07,01), 1010 },
                { new DateTime(2021,07,02), 2020 },
                { new DateTime(2021,07,03), 3030 },
                { new DateTime(2021,07,04), 4040 },
                { new DateTime(2021,07,05), 5050 }
            }
        });
        AllSales.Add(new MyViewModel
        {
            Product = "Product D",
            SalesByDate = new Dictionary<DateTime, decimal>
            {
                { new DateTime(2021,07,01), 1010 },
                { new DateTime(2021,07,02), 2020 },
                { new DateTime(2021,07,03), 3030 },
                { new DateTime(2021,07,04), 4040 },
                { new DateTime(2021,07,05), 5050 }
            }
        });
    }

    protected void Change2()
    {
        AllSales = new List<MyViewModel>();
        AllSales.Add(new MyViewModel
        {
            Product = "Product E",
            SalesByDate = new Dictionary<DateTime, decimal>
            {
                { new DateTime(2021,06,01), 1100 },
                { new DateTime(2021,06,02), 2200 },
                { new DateTime(2021,06,03), 3300 }
            }
        });
        AllSales.Add(new MyViewModel
        {
            Product = "Product F",
            SalesByDate = new Dictionary<DateTime, decimal>
            {
                { new DateTime(2021,06,01), 1100 },
                { new DateTime(2021,06,02), 2200 },
                { new DateTime(2021,06,03), 3300 },
            }
        });
    }
}

ADMIN EDIT

Workarounds are:

- using a "real" model instead of a dynamic type

- removing the LoadGroupsOnDemand feature (and using the regular paging so you can still have grouping in case you were using virtual scrolling)

When exporting data from a Grid using ExcelExport, the dates are visible when viewed from Excel, but not when using Open Office or Google Sheets. 

We are getting a problem with grid functionality after upgrading from 2.25 to 2.26. I have attached a test project. To see the problem:

• Run the attached solution
• Click on the "Tree List" menu item
• You will then see a grid at the top of the page
• On the first row, click into the text cell under "Column 2" (to the right)
• Now click into the next cell over at "Column 3"
• Now click again into that same cell
• You get the crash

We did not have this problem before version 2.26.

Just another note on this.

It appears that the presence of the checkbox columns causes the problem. Removing the checkbox columns causes the grid to work fine. Just having one checkbox template column in the grid causes the strange crash behavior in 2.26. Before 2.26, we had no problems with the checkbox templates impacting behavior.