Angular2- Sorting on Multiple column And Shortcut keys.

[Neel]

I have attached my project in this. I don't know why but my sorting on multiple columns is not working. It takes sorting on only one column at once.

Along with this, I want to select a row by using Shift + Down shortcut. I tried but not able to select a row by using shift+Down. I have to
perform some further operations. but I am not able to do this. 

Kindly, help me with this.

Thanks

[Dimiter Topalov]

Hello Neel,

In order to sort the Grid by multiple fields at the same time, you will need to provide the respective settings to the sortable option (as opposed to a boolean value that will default to a single mode), for example:

<kendo-grid
...
         [sortable]="{
           allowUnsort: true,
           mode: 'multiple'
        }"
...
       >

https://www.telerik.com/kendo-angular-ui/components/grid/sorting/#toc-getting-started

As for selecting multiple items via Shift + ArrowDown key combination, this functionality is not supported out-of-the-box, but can be achieved via some custom implementation based on keeping a collection of selected items and adding to this collection in a custom keydown event handler where we can check whether Shift is pressed, and if so - on pressing the down arrow key to extract the data item from the respective active Grid row (the Grid must be navigable) and adding it to the collection.

Here is a sample implementation of the described approach that might point you in the right direction:

https://plnkr.co/edit/B6QXjWfNZ7FX4OhDlYqK?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Neel]

Hello,

Issue 1: I have applied ([sortable]="{ allowUnsort: true, mode: 'multiple' }" [sort]="state.sort") in my grid. still it is not working. 
I have used lazy loading and on that. I don't know the issue is coming from where. But, I have this in code. I tried other options and your demo too. But it is not working in my project. It only allows single sorting at a time. But, I want multiple sorting.

Issue 2: I added navigable and when I press shift down. It selects my column header and from there move left & right by using the left & right arrow key. But, not moving to column rows down & Up to select the row by pressing down and Up Arrow key. Also, Might be due this only, I am getting "undefined" in (const currentItem = this.grid.activeRow.dataItem;) under shift + KeyDown function inside your above given plunker.

Please, look into it and help me in this.

Thanks

[Svet]

Hi Neel,

About the first point, I noticed that in the provided sample project, the grid has two [sortable] input properties:

<kendo-grid #grid id="gridInvoice" name="gridInvoice"
        [kendoGridGroupBinding]="data"
        [pageSize]="pageSize"
        [scrollable]="'virtual'"
        [sortable]="true"
        [resizable]="true"
        [reorderable]="true"
        [filterable]="{filter:true}"
        [columnMenu]="true"
        [rowHeight]="35"
        [height]="550"
        [selectable]="selectableSettings"
        [kendoGridSelectBy]="'itblarcharge_id'"
        [selectedKeys]="mySelection"
        [rowClass]="isDisabled"
        [groupable]="{showFooter: true}"
        [height]="530"
        [sortable]="{ mode: 'multiple', allowUnsort: true }"
        [sort]="state.sort"
        [filter]="state.filter"
        [group]="state.group"
        (columnReorder)="onReorder($event)"
        (selectedKeysChange)="onSelectedKeysChange($event)"
        (filterChange)="filterChange($event)"
        (dataStateChange)="dataStateChange($event)"
        (columnResize)="onResize($event)"
        (columnVisibilityChange)="onVisibilityChange($event)">

Make sure to leave just the second one as it contains the valid configuration for a grid, that supports multiple columns sorting.

About the second point, I am not sure, that I understand the issue. Currently, if we click the header row of the grid and we press the "shift" and "down arrow" key, there will be an error in the browser's console, that says:

ERROR TypeError: Cannot read property 'ProductID' of undefined

We can avoid this error, by adding the follow, marked in red, code in the custom onKeyDown function:

public onKeyDown(e) {
      if(e.shiftKey && e.key === 'ArrowDown') {
        setTimeout(() => {
          const currentItem = this.grid.activeRow.dataItem;
          if(currentItem && this.myCollection.indexOf(currentItem.ProductID === -1)) {
            this.myCollection.push(currentItem.ProductID);
          }
        });
      }
    }

Here is the updated sample plunker:
https://plnkr.co/edit/uoHCU8rgId5LtzEJpoct?p=preview

Please note, that it is just an example of, how using some custom logic we could achieve the desired functionality. However, as it is not available out of the box, it may need some additional customization, so that it meets the requirements for the specific project.

I hope this points you in the right direction.

Regards,
Svetlin
Progress Telerik