how to enable Multi-Column Sorting when using State

[Hernando]

I have a grid using the state to  manage multiple data operations , including Sorting , but I need to enable Multisorting which I can do on code , but when the user try to sort by multiple columns it wont work, it only sort by one column at the time.

How can I multisort using State ?

    
publicstate: State = {
        sort: [
{ field: "disciplineName", dir: "asc" }, 
{ field: "parentTopicName", dir: "asc" }, 
{ field: "topicName", dir: "asc" }, 
{ field: "description", dir: "asc" }],
        group: [],
        skip: 0,
        take: 50,
        filter: {
            logic: "and",
            filters: [],
        },
    };
 

html 

<ng-template #grid style="background-color: white;">
    <kendo-grid [data]="gridData" style="height:750px;"
    (dataStateChange)="dataStateChange($event)" 
    (add)="addHandler($event)" 
    (cancel)="cancelHandler($event)" 
    [sortable]="true"
    [sort]="state.sort"
    filterable="menu" 
    [filter]="state.filter" 
    [pageable]="true" 
    [pageSize]="state.take" 
    [skip]="state.skip"
    [resizable]="true"
    [sortable]="{
      allowUnsort: true,
      mode: 'multiple'
    }"
    (cellClick)="cellClickHandler($event)"
    id="grid">

Thanks

[Georgi]

Hi Hernando,

Thank you very much for the details provided.

From what I understand from your question, you are currently utilizing the Kendo UI for Angular Grid and are experiencing some issues with enabling the built-in multi-sort functionality of the component such that the Grid can only be sorted one column at a time. Please, let me know if I misinterpreted the query.

One possible reason for the discrepancy with the multi-sort functionality of the Grid might be related to the configuration of the component and the fact that the sortable property is provided twice in the markup:

<ng-template #grid style="background-color: white;">
    <kendo-grid [data]="gridData" style="height:750px;"
    (dataStateChange)="dataStateChange($event)" 
    (add)="addHandler($event)" 
    (cancel)="cancelHandler($event)" 
    [sortable]="true"
    [sort]="state.sort"
    filterable="menu" 
    [filter]="state.filter" 
    [pageable]="true" 
    [pageSize]="state.take" 
    [skip]="state.skip"
    [resizable]="true"
    [sortable]="{
      allowUnsort: true,
      mode: 'multiple'
    }"
    (cellClick)="cellClickHandler($event)"
    id="grid">

For this reason, I would ask you to ensure that the sortable property is set only once in the Grid configuration.

For your convenience, I am also sending you a StackBlitz demo that demonstrates how to enable the multi-sort functionality of the Grid in a configuration that manually handles multiple data operations:

• https://stackblitz.com/edit/angular-k8ccqpxa

For more detailed information on multiple sorting and the handling of multiple data operations, please refer to the following articles:

• Multi-Column Sorting: https://www.telerik.com/kendo-angular-ui/components/grid/sorting/multi-sort
• Handling Multiple Data Operations: https://www.telerik.com/kendo-angular-ui/components/grid/data-operations#handling-multiple-data-operations

I hope the provided information helps. Please, let me know if I am missing out on something.

Regards,
Georgi
Progress Telerik

[Hernando]

Great thanks for the Demo , my bad I forgot to remove the duplicated [sortable] attribute , 

[sortable]="sortSettings" // this is what I was looking for

[Georgi]

Hi Hernando,

I am happy to hear that my previous response helped you identify the root cause for the discrepancy with the multi-column sorting feature on your side.

I am now closing this ticket. Please, do not hesitate to reach out if you need any more details.

Regards,
Georgi
Progress Telerik