DetailListAuto sort column not triggered on click

Our DetailListAuto component stopped sorting columns on column header click. If a sort is defined in a column as IsSorted equals true and IsSortedDescending equals false, that sort is carried out, but we can’t change it to ascending no matter how many times we click on that column header and if we try to click on another column header to sort the table according to that column the initial sort is removed and no new sort is set. No i dom elements are being added in html on column header click and aria-sort is always set to none.

I was able to reproduce the issue on the demo project DetailsListAutoPage here is the component we use:

//code example:

    <div data-is-scrollable="true" style="overflow-y:auto;">
        <BlazorFluentUI.Lists.DetailsListAuto ItemsSource="dataSource2"
                            IsVirtualizing="true"
                            Compact="true"
                            Columns="fixedColumnsSource2"
                            GetKey=@(x=>x.Key)
                            LayoutMode="DetailsListLayoutMode.Justified"
                            Selection="selection2"
                            TItem=DataItem
                            SelectionMode=SelectionMode.Multiple />
    </div>

//code example:

@code {
    bool isVirtualizing = true;
    bool isCompact = false;
    IDropdownOption? selectedModeOption;
    System.Collections.Generic.List<IDropdownOption>? selectionModeOptions;
  
      Selection<DataItem> selection1 = new Selection<DataItem>();
      Selection<DataItem> selection2 = new Selection<DataItem>();
      Selection<DataItem> selection3 = new Selection<DataItem>();
  
      System.Collections.Generic.List<DataItem> dataSource = new ();
  
      System.Collections.Generic.List<DataItem> dataSource2 = new System.Collections.Generic.List<DataItem>();
  
  
      int count = 0;
  
      // We're creating another container for the column array that needs to be defined to show columns in DetailsList.
      System.Collections.Generic.List<IDetailsRowColumn<DataItem>> columnsSource = new ();
      System.Collections.Generic.List<IDetailsRowColumn<DataItem>> fixedColumnsSource = new ();
      System.Collections.Generic.List<DetailsRowColumn<DataItem, DataItem>> fixedColumnsSource2 = new  System.Collections.Generic.List<DetailsRowColumn<DataItem, DataItem>>();
  
  
      string filter = "";
      DetailsRowColumn<DataItem, string>? descriptionColumn;
  
  
      protected override void OnInitialized()
      {
          selectionModeOptions = Enum.GetValues(typeof(SelectionMode)).Cast<SelectionMode>()
             .Select(x => new DropdownOption { Key = x.ToString(), Text = x.ToString() })
             .Cast<IDropdownOption>()
             .ToList();
          selectedModeOption = selectionModeOptions.FirstOrDefault(x => x.Key == "Single");
  
          // We load the column data into the columnsSource SourceCache.
          columnsSource.Add(new DetailsRowColumn<DataItem, int>("Key", x => x.KeyNumber) { MinWidth = 20, MaxWidth = 70, Index = 0, IsResizable = true });
          columnsSource.Add(new DetailsRowColumn<DataItem, string>("Name", x => x.DisplayName!) { Index = 1, MinWidth = 100, MaxWidth = 150, IsResizable = true });
          descriptionColumn = new DetailsRowColumn<DataItem, string>("Description", x => x.Description!) { Index = 2 };
          columnsSource.Add(descriptionColumn);
  
          fixedColumnsSource.Add(new DetailsRowColumn<DataItem, int>("Key", x => x.KeyNumber) { Index = 0 });
          fixedColumnsSource.Add(new DetailsRowColumn<DataItem, string>("Name", x => x.DisplayName!) { Index = 1 });
          fixedColumnsSource.Add(new DetailsRowColumn<DataItem, string>("Description", x => x.Description!) { Index = 2 });
  
          fixedColumnsSource2.Add(new DetailsRowColumn<DataItem, DataItem>("Key", x => x.KeyNumber) { Index = 0, IsSorted=true, IsSortedDescending=true });
          fixedColumnsSource2.Add(new DetailsRowColumn<DataItem, DataItem>("Name", x => x.DisplayName!) { Index = 1 });
          fixedColumnsSource2.Add(new DetailsRowColumn<DataItem, DataItem>("Description", x => x.Description!) { Index = 2 });
  
          // We're loading our sample data into the dataSource SourceCache.
          for (var i = 0; i < 500; i++)
          {
              count++;
              dataSource.Add(new DataItem(count));
              dataSource2.Add(new DataItem(count));
          }
  
  
          base.OnInitialized();
      }


  }

I am running the project inside Microsoft Edge version: 92.0.902.62 (Official build) (64-bit).

[chigivigi]

@vnbaaij I modified my code with the code from the demo page but I am getting an error:

Unhandled Exception: d.printErr @ blazor.webassembly.js:1 put_char @ dotnet.5.0.9.js:1 write @ dotnet.5.0.9.js:1 write @ dotnet.5.0.9.js:1 doWritev @ dotnet.5.0.9.js:1 _fd_write @ dotnet.5.0.9.js:1 $__stdio_write @ 00aba242:0xd9c28 $__fwritex @ 00aba242:0x7d009 $fwrite @ 00aba242:0x6c63 $fputs @ 00aba242:0x597ae $default_stderr_handler @ 00aba242:0x197b71 $monoeg_g_printerr @ 00aba242:0x1a350 $mono_print_unhandled_exception_internal @ 00aba242:0x8de2c $mono_unhandled_exception_checked @ 00aba242:0x10aa86 $mono_unhandled_exception_internal @ 00aba242:0x62b5c $mono_handle_exception_internal @ 00aba242:0x93aef $mono_handle_exception @ 00aba242:0x94246 $interp_throw @ 00aba242:0x5eff $interp_exec_method @ 00aba242:0x49808 $interp_runtime_invoke @ 00aba242:0x12efff $mono_jit_runtime_invoke @ 00aba242:0x118e5f $do_runtime_invoke @ 00aba242:0x79d42 $mono_runtime_try_invoke @ 00aba242:0x12982 $tp_cb @ 00aba242:0xf7d88 $mono_background_exec @ 00aba242:0x9a696 Module._mono_background_exec @ dotnet.5.0.9.js:1 pump_message @ dotnet.5.0.9.js:1 setTimeout (async) _schedule_background_exec @ dotnet.5.0.9.js:1 $mono_threads_schedule_background_job @ 00aba242:0x26ea8 $mono_wasm_queue_tp_cb @ 00aba242:0x108c2f $do_icall @ 00aba242:0x194eeb $do_icall_wrapper @ 00aba242:0x79df9 $interp_exec_method @ 00aba242:0x44ad3 $interp_runtime_invoke @ 00aba242:0x12efff $mono_jit_runtime_invoke @ 00aba242:0x118e5f $do_runtime_invoke @ 00aba242:0x79d42 $mono_runtime_try_invoke @ 00aba242:0x12982 $mono_runtime_invoke @ 00aba242:0x10ec2b $mono_wasm_invoke_method @ 00aba242:0x108e48 Module._mono_wasm_invoke_method @ dotnet.5.0.9.js:1 call_method @ dotnet.5.0.9.js:1 set_task_failure @ dotnet.5.0.9.js:1 (anonymous) @ dotnet.5.0.9.js:1 Promise.then (async) js_to_mono_obj @ dotnet.5.0.9.js:1 mono_wasm_convert_return_value @ dotnet.5.0.9.js:1 _mono_wasm_invoke_js_with_args @ dotnet.5.0.9.js:1 $do_icall @ 00aba242:0x194ddb $do_icall_wrapper @ 00aba242:0x79df9 $interp_exec_method @ 00aba242:0x44ad3 $interp_runtime_invoke @ 00aba242:0x12efff $mono_jit_runtime_invoke @ 00aba242:0x118e5f $do_runtime_invoke @ 00aba242:0x79d42 $mono_runtime_try_invoke @ 00aba242:0x12982 $mono_runtime_invoke @ 00aba242:0x10ec2b $mono_wasm_invoke_method @ 00aba242:0x108e48 Module._mono_wasm_invoke_method @ dotnet.5.0.9.js:1 call_method @ dotnet.5.0.9.js:1 set_task_result @ dotnet.5.0.9.js:1 (anonymous) @ dotnet.5.0.9.js:1 Promise.then (async) js_to_mono_obj @ dotnet.5.0.9.js:1 mono_wasm_convert_return_value @ dotnet.5.0.9.js:1 _mono_wasm_invoke_js_with_args @ dotnet.5.0.9.js:1 $do_icall @ 00aba242:0x194ddb $do_icall_wrapper @ 00aba242:0x79df9 $interp_exec_method @ 00aba242:0x44ad3 $interp_runtime_invoke @ 00aba242:0x12efff $mono_jit_runtime_invoke @ 00aba242:0x118e5f $do_runtime_invoke @ 00aba242:0x79d42 $mono_runtime_try_invoke @ 00aba242:0x12982 $mono_runtime_invoke @ 00aba242:0x10ec2b $mono_wasm_invoke_method @ 00aba242:0x108e48 Module._mono_wasm_invoke_method @ dotnet.5.0.9.js:1 call_method @ dotnet.5.0.9.js:1 set_task_result @ dotnet.5.0.9.js:1 (anonymous) @ dotnet.5.0.9.js:1 Promise.then (async) js_to_mono_obj @ dotnet.5.0.9.js:1 mono_wasm_convert_return_value @ dotnet.5.0.9.js:1 _mono_wasm_invoke_js_with_args @ dotnet.5.0.9.js:1 $do_icall @ 00aba242:0x194ddb $do_icall_wrapper @ 00aba242:0x79df9 $interp_exec_method @ 00aba242:0x44ad3 $interp_runtime_invoke @ 00aba242:0x12efff $mono_jit_runtime_invoke @ 00aba242:0x118e5f $do_runtime_invoke @ 00aba242:0x79d42 $mono_runtime_invoke_checked @ 00aba242:0xf65d $mono_runtime_try_invoke_array @ 00aba242:0x10e831 $ves_icall_InternalInvoke @ 00aba242:0xed492 $ves_icall_InternalInvoke_raw @ 00aba242:0xecf57 $do_icall @ 00aba242:0x194ddb $do_icall_wrapper @ 00aba242:0x79df9 $interp_exec_method @ 00aba242:0x44ad3 $interp_runtime_invoke @ 00aba242:0x12efff $mono_jit_runtime_invoke @ 00aba242:0x118e5f $do_runtime_invoke @ 00aba242:0x79d42 $mono_runtime_try_invoke @ 00aba242:0x12982 $mono_runtime_invoke @ 00aba242:0x10ec2b $mono_wasm_invoke_method @ 00aba242:0x108e48 Module._mono_wasm_invoke_method @ dotnet.5.0.9.js:1 call_method @ dotnet.5.0.9.js:1 (anonymous) @ dotnet.5.0.9.js:1 beginInvokeDotNetFromJS @ blazor.webassembly.js:1 h @ blazor.webassembly.js:1 e.invokeMethodAsync @ blazor.webassembly.js:1 (anonymous) @ blazor.webassembly.js:1 (anonymous) @ blazor.webassembly.js:1 (anonymous) @ blazor.webassembly.js:1 (anonymous) @ blazor.webassembly.js:1 r @ blazor.webassembly.js:1 (anonymous) @ blazor.webassembly.js:1 (anonymous) @ blazor.webassembly.js:1 (anonymous) @ blazor.webassembly.js:1 (anonymous) @ blazor.webassembly.js:1 (anonymous) @ blazor.webassembly.js:1 r @ blazor.webassembly.js:1 d @ blazor.webassembly.js:1 f @ blazor.webassembly.js:1 (anonymous) @ blazor.webassembly.js:1 (anonymous) @ blazor.webassembly.js:1 e.onGlobalEvent @ blazor.webassembly.js:1 Show 44 more frames blazor.webassembly.js:1 System.NullReferenceException: Object reference not set to an instance of an object.

My model class for the DetailsListAuto looks like this:

My table:

    <div data-is-scrollable="true" style="overflow-y:auto;margin-bottom:50px">
        <BlazorFluentUI.Lists.DetailsListAuto ItemsSource="itemSource" Columns="table"
            IsVirtualizing="true" Compact="true"
            TItem="CustomGrid"
            GetKey=@(x=>x.Id)
            LayoutMode="BlazorFluentUI.Lists.DetailsListLayoutMode.Justified"
            Selection="tableSelection"
            SelectionMode="SelectionMode.Multiple" />
    </div>

My Model:

public class CustomGrid
    {
        public string id { get; set; }
        public string name{ get; set; }
        public string lastname{ get; set; }
        public string type{ get; set; }
        public int amount{ get; set; }
        public Guid secondid{ get; set; }
        public bool visible { get; set; }
        public string status { get; set; }
        public IDropdownOption secondstatus{ get; set; }
    }

Column definition:

table.Add(new DetailsRowColumn<CustomGrid, string>("name", x => x.name) { Index = 1, MinWidth=300, MaxWidth=700, IsResizable = true });
        table.Add(new DetailsRowColumn<CustomGrid, string>("lastname", x => x.lastname) { Index = 2, MinWidth=300, MaxWidth=760, IsResizable = true });
        table.Add(new DetailsRowColumn<CustomGrid, string>("status", x => x.status) { Index = 3, MinWidth = 80, MaxWidth = 80, IsResizable = true });
        table.Add(new DetailsRowColumn<CustomGrid, IDropdownOption>("second status", x => x) {
            Index=4,
            MinWidth = 130, 
            MaxWidth = 130, 
            IsResizable = false,
            ColumnItemTemplate = response => 
    @<DropDownGrid row="response" statuses="statuses"></DropDownGrid>
        });
        table.Add(new DetailsRowColumn<CustomGrid, int>("amount", x => x) {
            Index = 5,
            MinWidth = 100, 
            MaxWidth = 100, 
            IsResizable = false,
            ColumnItemTemplate = response => @<BlazorFluentUI.NumericTextField @bind-Value="response.amount" @onfocusout="(()=>inputChangeCheck())" Required="true"></BlazorFluentUI.NumericTextField>
    });

Dropdown Grid:

<Dropdown ItemsSource="statuses" OnChange="ChangeHandler" SelectedOption="row.secondstatus"></Dropdown>

@code {
    [Parameter]
    public CustomGrid row { get; set; }
    [Parameter]
    public List<IDropdownOption> statuses { get; set; }

    protected override async Task OnInitializedAsync()
    {
    
    }

    void ChangeHandler(DropdownChangeArgs args)
    {
        row.secondstatus= args.Option;
    }

}

List of second statuses;

        statuses.Add(new DropdownOption { ItemType = SelectableOptionMenuItemType.Normal, Key = "1", Text = "Active" });
        statuses.Add(new DropdownOption { ItemType = SelectableOptionMenuItemType.Normal, Key = "2", Text = "Suspend" });

[vnbaaij]

I won’t be able to look for another 2 weeks. Enjoying my vacation with no computer in the neighborhood