DetailListAuto sort column not triggered on click
See original GitHub issueOur 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).
Issue Analytics
- State:
- Created 2 years ago
- Reactions:2
- Comments:12 (7 by maintainers)
Top Results From Across the Web
Nothing happens when I click to sort a column in GridView
I have coded my program so that when a user clicks on a column, the data is sorted in ascending/descending order. When I...
Read more >Lists sorting by column header click does not trigger ...
I'm using Client Side Rendering (JS Link) and according to this answer an OnPostRender event should be triggered whenever a list view column...
Read more >On Sort not working
Hello,. I have another issue with table sorting not working. My table has the OnSort event: The table columns have Sorting Attributes:.
Read more >Sorting in Discover not working - Kibana
The sorting is not working for any field except for the 'time' field. ... click the arrow in the timestamp column again to...
Read more >Column Sorting Not Working
The reason that the sorts are not working is because there are attributes being used on all of the measures and the dimension...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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:
My Model:
Column definition:
Dropdown Grid:
List of second statuses;
I won’t be able to look for another 2 weeks. Enjoying my vacation with no computer in the neighborhood