Completed
Last Updated: 08 Jun 2023 08:08 by ADMIN
Release 4.4.0 (07/19/2023) (R3 PI1)
Michal
Created on: 22 Mar 2023 16:59
Category: Grid
Type: Bug Report
5
Runtime changing column visibility broken in v4.1.0

Hello,

 new version has broken "dynamic" changing column properties/visiblity runtime, especially- selection mode and causing lot of "rerendering".

Video attachment:
1 - first part is OLD version(prior 4.1.0) 4.0.1
2 - seccond part(after changing next browser tab) is new version 4.1.0

SAME setup
Iam already using hint for blazor with IDs of columns, found in Your documentation...etc. @key="@("sIDX")"

.....

-->>Clicking on Button for changing grid mode and visibility of columns**
<TelerikToggleButton Title="Oznaceni vice radku" Icon="@FontIcon.ListUnordered" OnClick="@( _  =>{ CurrentStackItem.gSelectionMode=(CurrentStackItem.gSelectionMode==GridSelectionMode.Multiple)?GridSelectionMode.Single:GridSelectionMode.Multiple;CurrentStackItem.gSelectedItems = Enumerable.Empty<ExpandoObject>();})"
Selected="@(CurrentStackItem.gSelectionMode==GridSelectionMode.Multiple)"></TelerikToggleButton>

....
<GridColumns>

-->>First "static" 2 columns**

<GridCheckboxColumn Visible=@(CurrentStackItem.gSelectionMode==GridSelectionMode.Multiple) @key="@("sIDX")" Width="70px" Locked="true" SelectAll="true" SelectAllMode="GridSelectAllMode.Current"></GridCheckboxColumn><GridColumn FieldType=@typeof(bool) Visible=@(IsPicker==true || (XSmall==false && CurrentStackItem.gSelectionMode==GridSelectionMode.Single )) @key="@("sCMD")" Filterable="false" Sortable="false" Locked="true" Width="@((IsPicker==true && XSmall==true)?"45px":"120px")"> <HeaderTemplate>&nbsp;</HeaderTemplate><Template Context="ctx"><div @onclick:preventDefault="true" @onclick:stopPropagation="true"> -->> THIS part is hitting LOT OF TIME in debug (expected is at best only once) @{if (XSmall==false) { -->> here is LOT OF dynamic buttons. } </div></Template></GridColumn> -->> rest of the dynamic columns. In video, starting with "ciiislo org" in header

@if (GridDef.ColStore != null && GridDef.ColStore.Any()) { foreach (var it in GridDef.ColStore.Where(x => x.Verejny == true)) { <GridColumn @key=@it.FldName Field=@it.FldName FieldType=@it.FldType Title=@it.VerejnyNazev ShowFilterCellButtons="false" Width=@it.cSirkaSestava TextAlign=@it.cZarovnani ><FooterTemplate> @if (it.Sumovat == true) { @context.Sum } </FooterTemplate></GridColumn> } } </GridColumns>

Feel free to change the Subject.

Thanks, have a nice day

Attached Files:
7 comments
Michal
Posted on: 26 Apr 2023 14:49

Hello Yanislav,

 thanks for the hotfix, helped.

ADMIN
Yanislav
Posted on: 20 Apr 2023 06:21

Hello Michal,

I'm reopening the thread to suggest a potential solution. While waiting for the issue to be resolved, you can try hiding and showing the Grid as a temporary workaround. This may cause the Grid to flicker when toggling the columns' visibility, but I hope it can help until an official fix is available for the problem.

@if (GridVisible)
{
    <TelerikGrid Data="@GridData">
        <GridColumns>
            <GridCheckboxColumn Locked="true" 
                                Visible="@ColumnVisible">
            </GridCheckboxColumn>
            <GridColumn  Field="@(nameof(Product.Id))" Locked="true">
                <Template Context="ctx">
                Template
                </Template>
            </GridColumn>
            <GridColumn Field="@(nameof(Product.Name))" Title="Product Name" />
        </GridColumns>
    </TelerikGrid>
}

@code {
    bool GridVisible { get; set; } = true;

    async Task ToggleCheckboxColumnVisibility()
    {
        GridVisible = false;
        await Task.Delay(1);
        ColumnVisible = !ColumnVisible;

        GridVisible = true;
    }

Here is a REPL example: https://blazorrepl.telerik.com/mxOSlnaC27516pRP00

Regards,
Yanislav
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN
Yanislav
Posted on: 12 Apr 2023 19:08

Hello Michal,

I have reached out to the development team to talk about the matter with them, indeed the behavior is a problem originating from our side. Since it is a regression, we will fix it with the highest priority, so we expect to have it fixed as soon as possible.
We apologize for any inconvenience caused until the issue is resolved.

I have also updated your Telerik points as a token of gratitude for helping us identify this issue.

Regards,
Yanislav
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Michal
Posted on: 06 Apr 2023 06:14

Hi Nadezda,

 the GridCommandColumn has its own place, but also its adding complexity and lacking few options(ie datafied, header template...).

Reproducible sample is really extremely simplified of the real world use case which is:

- fully dynamic datasource, fully dynamic grid, changeable at runtime. User can decide where the any button can be at(at any colum), also any column can be anywhere, including defining footer summary, header buttons, conditional coloring,formats etc. Some restrictions apply, like locked column can be at first or last places of the grid, not in middle.

Imagine it as someone gives you SQL select query(store) and than user designs final view with actions,columns,captions...(datadriven definitions) and also change the base query. Without a coder.

So this concept leads to be built only with GridBoundColumns and also it was working in previous versions(with few glitches with footer summary, but its another reported case :) )

Key points remains:
1) - grid columns,actions.... are built dynamically
2) - grid coulumns and "everyhing" are changeable runtime by the button/parameter in SAME page without reloading(reinstantizing the grid, which is also not possible) whole page(like switchhing definition/view/datasource = changing the datasources, changes the view)
3) - grid should not "break" or mess column orders after repeating any point at same page(ie when changing columns to the new set and "few" columns have an same name/datafield...."A,B,C and changing view to columns B,C,D,E should be at exact order as produced in example "foreach (var it in GridDef.ColStore..."

ADMIN
Nadezhda Tacheva
Posted on: 05 Apr 2023 13:59

Hi Michal,

I am stepping into the discussion to provide further assistance while my colleague, Yanislav, is out of office.

I tested the configuration you shared and I reproduced the issue you are referring to. While the behavior is indeed different in the new version, I noticed that the buttons are declared inside a GridColumn. In the general case, this type of column is used for data binding and such action buttons may be declared inside a GridCommandColumn.

I have modified your example to add similar command buttons in a command column and I am not reproducing the problem with such a configuration. Here is the modified version: https://blazorrepl.telerik.com/GxuykTlH56RxNTdA55

That said, can you please share some more details on the exact scenario and why it is needed to use action buttons in a data bindable GridColumn instead of using CommandButton instances inside a CommandColumn?

Thank you in advance! I look forward to hearing from you.

Regards,
Nadezhda Tacheva
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Michal
Posted on: 29 Mar 2023 15:03

Hi Yanislav,

 thanks for the first kickoff, You were pretty close.

Heres the tweaked setup(almost static, but reproducible also)

https://blazorrepl.telerik.com/cRYnGjvJ00Xts80V58

Just click on the button few times.

ADMIN
Yanislav
Posted on: 29 Mar 2023 11:27

Hello Michal,

Thank you for bringing the issue to our attention! I'm sorry to hear that you encountered a problem when updating to 4.1.0.

I've created a REPL example in which I've tried to reproduce the problem. - https://blazorrepl.telerik.com/mHunGjbO44l9kQcQ55.

After conducting an investigation, I was not able to replicate the behavior you reported. In order to identify the root cause of this behavior and resolve it, we need to reproduce the issue locally. This will allow us to better understand the problem and troubleshoot it effectively.

That being said, may I ask you to modify the REPL example I've linked above so the issue is reproducible and send it back to us? 

We appreciate your cooperation in this matter, and we look forward to hearing back from you.

Regards,
Yanislav
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.