Sort Grid with header then move record

[Ryan Schuh]

Hello,

I was wondering if this would be possible with the grid control. I would like to fire off the sort event have that work correctly, then grab a row from the grid data and move it to the first result based off of some condition.

We are forcing a selected row to the top of the grid manually when binding but if the user sorts, we lose that row being at the top.

I have attempted using the actionBefore and actionComplete along with the beforeDataBound but cant' seem to get it to work correctly.

The closest solution is using something like this

    public onBegin(e: any) {

        if (e.requestType === 'sorting') {

            const sort = e.direction === 'Ascending' ? 'asc' : 'desc';

            this.dataSource = _orderBy(this.dataSource, [e.columnName], [sort]);

            if (this.selectedItem) {

                const index = this.dataSource

                    .findIndex((x) => x.id === this.selectedItem.id);

                this.dataSource.splice(index, 1);

                this.dataSource.unshift(this.selectedItem);

            }

            this.grid.refresh();

            e.cancel = true;

        }

}

This gets close to the desired function but requires some manual manipulation. Sorting ascending and descending work fine. Then when you

click the header a third time the action isn't fired. If there is a better way to do this please let me know.

[Shalini Maragathavel]

Hi Ryan, 

Thanks for contacting Syncfusion support. 

Based on your query we suspect that you want to maintain the specific row at the top while perform sorting in the Grid. You can achieve your requirement using sortComparer property of the Grid. We have already discussed about your requirement in our documentation. Please refer the below documentation for more information. 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/how-to/display-null-values-at-bottom/
                             https://ej2.syncfusion.com/angular/documentation/grid/sorting/#sort-comparer

Note: Sort comparer function only works for the Local data.

If we misunderstood your query, then please share us the following information to validate further on this, 

• Have you bound local or remote data to the Grid? If remote data which adaptor have you used.
• Elaborate on the requirement.
• Share us a pictorial representation of the requirement.
• Share your complete Grid rendering code

Let us know, If you have any concerns. 

Regards, 

Shalini M. 

[Ryan Schuh]

Yes you can and that was one of my first avenues. The problem with this solution is you only get the reference and compare string. This works when you have unique values for the field being sorted but if the field is say a name then it runs into problems.

• John S (Selected Person)
• Rebecca A
• Matt C
• John S

There is no way to discern between the two John S people. They will be sorted the same way. If the column of data is not unique this approach does not work as we can't based off of a string know who is selected.

[Shalini Maragathavel]

Hi Ryan, 

Thanks for your patience. 

Based on your query we suspect that you want to maintain the selected rows at the top of the Grid while perform sorting. You can achieve your requirement using sortComparer property of the Grid as demonstrated in the below code snippet, 

<div class="control-section"> 

  <button ejs-button (click)="btnClick1()">SELECTROW </button> 

  <ejs-grid #grid [dataSource]="data" [allowPaging]="true" [selectionSettings]='selectionOptions' (actionBegin)='actionBegin($event)'  [allowSorting]="true"> 

    <e-columns> 

     

       <e-column 

       field= "ShipCity" 

        headerText="ShipRegion" 

       [sortComparer]='sortComparer'  

        width=150 

        minWidth= 10 

      ></e-column> 

    </e-columns> 

  </ejs-grid> 

</div> 

 

----------------------------------------------------------------------------------- 

 

 

export class AppComponent { 

 

  public ngOnInit(): void { 

    this.data = orderDetails.slice(0,10); 

this.selectionOptions = { type: 'Multiple',persistSelection:true }; 

   

  } 

   

    actionBegin(args) { 

      arr=[]; 

        if (args.requestType === 'sorting') { 

          debugger; 

            action = args.direction; 

 

        } 

         var grid=(document.getElementsByClassName('e-grid')[0] as any).ej2_instances[0];  

   var sort=grid.getSelectedRecords();  // to get the selected records 

    for(var i=0;i<sort.length;i++){ 

      var val=sort[i].OrderID; // to get primary key column value of selected records 

      arr.push(val);  

    } 

    } 

     

     sortComparer(reference, comparer, x,  y) {   

   

   var flag=true; 

     

for(var i=0;i<arr.length;i++){ 

   

   if(x.OrderID===arr[i]&&action==="Ascending"){ 

      flag=false; 

       

    } 

} 

for(var i=0;i<arr.length;i++){ 

   if(y.OrderID!=arr[i]&&action==="Descending"){ 

      flag=false; 

    } 

    } 

  if(flag){ 

    return 1; 

  } 

   else{ 

     return -1; 

   } 

   

    }} 

 

Please refer the below sample for reference,

Sample: https://stackblitz.com/edit/angular-bszlj7-y2umdw?file=app.component.ts

Please get back to us, if you need further assistance. 

Regards, 

Shalini M.