Disabling allowing sorting child mapping not working

Question

Hi when i am using syncfusion in angular TreeGrid, when i disable allow sorting the child mapping is not working and i want that particular sorting to be stopped and at particular time but when allow sorting set to false it does not allow child mapping to show child records.so below i have attached two screenshot one is with working when i allowed sorting to true and other one is with i have set a allow sorting to false. so can you tell how i can disable sorting and the child mapping should also work inside that.

Attachment: treegrid_d6dacadc.zip

Farveen Sulthana Thameeztheen Basha · Accepted Answer

Hi Ayush,Query#:- how i can disable sorting and the child mapping
should also work inside that.We have prepared sample from using your code example by disable
Sorting on particular column but we are unable to replicate the problem at
our end. Refer to the sample link:-https://stackblitz.com/edit/angular-m7olhw-tu9qjv?file=app.component.htmlScreenshot:-Also please ensure that you have imported and Injected
Sorting related Services in ts page.We need some more additional details to find the cause of
the issue. Share us the following details.
 Complete
     TreeGrid code example.
 Video
     demo to replicate the issue.
 Have
     you faced any Script Error on console window(If yes please share
     screenshot).
 Have
     you performed any customization for TreeGrid. If yes please share
     that details.
 If
     possible replicate it in the above sample and revert us back.
 Syncfusion
     TreeGrid package version details.
Regards,Farveen sulthana T

Ayush · Answer

hi Farveen Sulthana Thameeztheen BasharWhen i am using angular treegrid then i want to disable sorting at particular position in move as next property. so can you tell how we can achieve that. to disable sorting in particular position.

Pon Selva Jeganathan · Answer

Hi Ayush,

Thanks for the update. Query: When I am using angular tree grid then I
want to disable sorting at a particular position in the move as next property.Based on your query and shared screenshot, we understand you
need to disable sorting when you click the "Move as next" item in the
context menu. You can disable the sorting property while using the context
menu.Please refer to the below code snippet,

<ejs-treegrid
      #treegrid
      [dataSource]="vData"
      [enableInfiniteScrolling]="true"
      childMapping="Crew"
      [contextMenuItems]="contextMenuItems"
      (contextMenuClick)="contextMenuClick($event)"
      (contextMenuOpen)="contextMenuOpen($event)"
      …
    >

……………
   contextMenuClick(args?: any): void {
      this.treegrid.getColumnByField('taskID');
      if (args.item.id === 'next') {
        
        this.treegrid.allowSorting = false; // disable sorting
      } else {
        this.treegrid.allowSorting = true;
      }
    }
  …
    public ngOnInit(): void {
      if (virtualData.length === 0) {
        dataSource();
      }
  ….
      this.initialSort = {
        columns: [
          { field: 'FIELD1', direction: 'Ascending' },
          { field: 'FIELD2', direction: 'Ascending' },
        ],
      };
      this.contextMenuItems = [
        { text: 'Move As Next', target: '.e-content', id: 'next' },
        { text: 'Move As Child', target: '.e-content', id: 'child' },
      ];

Please refer to the below
sample,https://stackblitz.com/edit/angular-m7olhw-u9ikse?file=app.component.tsIf we misunderstand your
requirement, kindly share the below details which is helpful to proceed
further.
 Confirm whether you want to
     disable sorting on the whole column or a particular column while clicking
     the context menu items.
 A detailed explanation of
     your requirement.
 Share the video demo of
     your requirement.
 Share the code example(both
     ts and html).
 Please get back to us if you need more
assistance. Regards,
Pon selva

Ayush · Answer

hi

Pon Selva Jeganathan

I had Got your reply and it is extremely perfect. thanks for your help. But pon after the move as next and i have done the sorting disabled after that sorting completely get disabled i am unable to sort the data. so can you help me in that how I could I can get out of it

Pon Selva Jeganathan · Answer

Hi Ayush,

Thanks for the update. Query: after the move as next and i have done
the sorting disabled after that sorting completely get disabled i am unable to
sort the data. so can you help me in that how I could I can get out of itBased on your query, we understand you need to disable
sorting when you click the "Move as next" item in the context menu
clicked column. You can disable the sorting property while using the context
menu.Please refer to the below code snippet,

<ejs-treegrid
      #treegrid
      [dataSource]="vData"
      [enableInfiniteScrolling]="true"
      childMapping="Crew"
      [contextMenuItems]="contextMenuItems"
      (contextMenuClick)="contextMenuClick($event)"
      (contextMenuOpen)="contextMenuOpen($event)"
      …
    >

……………
   contextMenuClick(args?: any): void {
      this.treegrid.getColumnByField('taskID');
      if (args.item.id === 'next') {
        
      this.treegrid.columns[this.inx].allowSorting = false; // disable sorting for particular column
   
        this.treegrid.refreshColumns();// refresh the column
   
      } else {
        this.treegrid.allowSorting = true;
      }
    }

contextMenuOpen(arg?: any): void {
       if (arg.column != null) {
        this.inx = arg.column.index; // get the column index
      }
   
    }
   
  …
    public ngOnInit(): void {
      if (virtualData.length === 0) {
        dataSource();
      }
  ….
      this.initialSort = {
        columns: [
          { field: 'FIELD1', direction: 'Ascending' },
          { field: 'FIELD2', direction: 'Ascending' },
        ],
      };
      this.contextMenuItems = [
        { text: 'Move As Next', target: '.e-content', id: 'next' },
        { text: 'Move As Child', target: '.e-content', id: 'child' },
      ];

In the above code snippet, we get
the column index in the context menu open event. In the contextmenu click
event, based on the column index value, we disable the sorting and refresh the
columns.Please refer to the below
sample,https://stackblitz.com/edit/angular-m7olhw-telosq?file=app.component.tsPlease refer to the below API
documentation,https://ej2.syncfusion.com/documentation/api/treegrid/#refreshcolumnshttps://ej2.syncfusion.com/documentation/api/treegrid/column/#allowsortingIf we misunderstand your
requirement, kindly share the below details which is helpful to proceed
further.
 Detailed explanation of
     your requirement.
 Share the video demo of
     your requirement.
 Share the code example(both
     ts and html).
 Please get back to us if you need more
assistance. Regards,
Pon selvaIf this post is
helpful, please consider Accepting it as the solution so that other members can
locate it more quickly.

Ayush · Answer

hi Pon Selva JeganathanThanks for your help with this problem.but if i have to assign the The result row(s)

(here result row is the row which is moved after the clicking on move as next) and i have to make that row Blue for 10-se after the operation can you help me.

Pon Selva Jeganathan · Answer

Hi Ayush,

Thanks for the update. Query: but if i have to assign the The result row(s) (here result row is the row which is
moved after the clicking on move as next) and i have to
make that row Blue for 10-se after the operation can you help meBased on your query, we understand you need to move the row
when you click the "Move as next" item in the context menu. And
nee to set the moved row's background colour as blue for 10 seconds. We
achieved your query by using the actionComplete event of the treegrid.Please refer to the below code snippet,

<ejs-treegrid
      #treegrid
      [dataSource]="vData"
      [enableInfiniteScrolling]="true"
      childMapping="Crew"
      [contextMenuItems]="contextMenuItems"
      (contextMenuClick)="contextMenuClick($event)"
      (contextMenuOpen)="contextMenuOpen($event)"
   (actionComplete)="complete($event)"
   
      …
    >

……………
    contextMenuClick(args?: any): void {
      this.selectedIndex = this.treegrid['getSelectedRowIndexes']()[0]; 
      this.selectedRecord = this.treegrid['getSelectedRecords']()[0];
      this.rowInfo = args.rowInfo;
      if (args.item.id === 'child') {
        this.treegrid.columns[this.inx].allowSorting = false;
        this.treegrid.refreshColumns();
        //this.treegrid.allowSorting = false; // disable sorting
      } else {
        var index = this.treegrid['getSelectedRowIndexes']()[0]; //delete the copied record
        this.treegrid.deleteRecord('taskID', this.selectedRecord);
        this.treegrid.addRecord(this.selectedRecord, 0, 'Top'); // move the new record into top
      }
    }
    complete(args) {
      if (args.requestType == 'save') {
        
  //Add the background color
        var selected_rowInfo = this.treegrid.getSelectedRows()[0]; // get the moved record row info
        selected_rowInfo.classList.add('newclass_add'); // add the background color
   
  //
  Remove the background color
        setTimeout(() => {
          if (
            !isNullOrUndefined(
              selected_rowInfo.classList.contains('newclass_add')
            )
          ) {
            selected_rowInfo.classList.remove('newclass_add'); // remove the background color
          }
        }, 10000);
      }
    }

public ngOnInit(): void {
     …..
      
      this.contextMenuItems = [
        { text: 'Move As Next', target: '.e-content', id: 'next' },
        { text: 'Sorting', target: '.e-content', id: 'child' },
      ];

In the above code snippet, in the
contextmenu click event, we move the row. In the actionComplete event, we get
the selected record’s row info and add the background color. Then, using
setTimeout , we remove the background colour after 10 secs.Please refer to the below
sample,https://stackblitz.com/edit/angular-m7olhw-4uuwx7?file=app.component.tsPlease refer to the below API
documentation,https://ej2.syncfusion.com/documentation/api/treegrid/#actioncompletehttps://ej2.syncfusion.com/documentation/api/treegrid/#getselectedrowsIf we misunderstand your
requirement, kindly share the below details which is helpful to proceed
further.
 Detailed explanation of
     your requirement.
 Share the video demo of
     your requirement.
 Share the code example(both
     ts and html).
 Please get back to us if you need more
assistance. Regards,
Pon selvaIf this post is
helpful, please consider Accepting it as the solution so that other members can
locate it more quickly.

Ayush · Answer

hi Pon Selva Jeganathanthanks for your reply but it seems that it doesn't work when we edit column color doesn't appears and same in the my case also classList gives error. I have added the screenshot for this the issue and  I have edited the code in stack blitz and got the issue when edit column can help me in this case.Attachment: bgcolour_a4b604cb.zip

Pon Selva Jeganathan · Answer

Hi Ayush,Thanks for the update.Query: it seems that it
doesn't work when we edit column color doesn't appears and same in the my case
alsoclassList gives
errorWe checked your query by preparing a sample, but we were
unable to reproduce the issue at our end. Please refer
to the below sample,https://stackblitz.com/edit/angular-m7olhw-xvo7tq?file=app.component.tsBased on your script error, we suspect that the
selectedRow information has a null value. If you get a null value from the
selected row information, we suggest you follow the below code example.

complete(args) {
      if (args.requestType == 'save') {
        var selected_rowInfo = this.treegrid.getSelectedRows()[0]; // get the moved record row info
        if (!isNullOrUndefined(selected_rowInfo)) {
          selected_rowInfo.classList.add('bg_primary'); // add the background color
          setTimeout(() => {
            if (
              !isNullOrUndefined(
                selected_rowInfo.classList.contains('bg_primary')
              )
            ) {
              selected_rowInfo.classList.remove('bg_primary'); // remove the background color
            }
          }, 10000);
        }
      }
    }

Please refer to the below sample,https://stackblitz.com/edit/angular-m7olhw-mitt2d?file=app.component.tsAfter following the above solution still faced issue,
share us the following details.
 Share
     the complete tree grid code example(both ts and html).
 Share the
     issue reproducible sample or reproduce the issue in our shared sample.
 Share
     the video demo of the issue.
The provided information will
be helpful to provide you response as early as possible. Regards,  Pon selva
  If this post is helpful, please consider Accepting it as the solution so
that other members can locate it more quickly.

Ayush · Answer

hi  Pon Selva JeganathanI was using this set time out when I right click on row after the row as moved at that time I want that row to be coloured in blue for 10s. but when I am using add or set timeout it is not working here. i have added screenshot of code and the error which come after when we execute this move as next.Attachment: moveasnext_ecfac10d.zip

Pon Selva Jeganathan · Answer

Hi Ayush,

Thanks for the update. Query: I was using this set time out
when I right click on row after the row as moved at that
time I want that row to be coloured in blue for 10s. but
when I am using add or set timeout it is not working here.Based on your shared code example, we prepared a simple
sample. We are able to replicate the issue at our end. On further
validation, you added the CSS class in the selected row, which caused a
script error, and that you added the background (for 10 seconds) in the context
menu click event, which prevented it from being displayed.To avoid this script error, we suggest you add the class to
the selected row element instead of the selected row. You can get the selected
row element using the getSelectedRows method of the treegrid.Please refer to the below code example,

Your
  code example:
   
  contextMenuClick(args?: any): void {
  …
      let arr = this.treegrid.flatData.filter(
        (x) => x.uniqueID == this.selectedRecord.uniqueID
      );
      …
  Modified
  code example:
   
  contextMenuClick(args?: any): void {
  ….
      var selected_rowInfo = this.treegrid.getSelectedRows()[0]; // get the moved record row info

Please refer to the below API documentation,https://ej2.syncfusion.com/documentation/api/treegrid/#getselectedrowsAnd the moved row's background colour is not shown as blue
for 10 seconds. We suggest you use the actionComplete event of the
treegrid instead of the context menu click event.Please refer to the below code snippet,

Your
  code:
   
  contextMenuClick(args?: any): void {
      this.selectedIndex = this.treegrid['getSelectedRowIndexes']()[0]; // select the records on perform Copy action
      this.selectedRecord = this.treegrid['getSelectedRecords']()[0];
      let arr = this.treegrid.flatData.filter(
        (x) => x.uniqueID == this.selectedRecord.uniqueID
      );
      …..
      arr.classList.add('bg_primary'); // add the background color
      setTimeout(() => {
        if (
          !isNullOrUndefined(selected_rowInfo.classList.contains('bg_primary'))
        ) {
          selected_rowInfo.classList.remove('bg_primary'); // remove the background color
        }
      }, 20000);
      // }
    }

Modified
  code
   
  <ejs-treegrid
      #treegrid
      [dataSource]="vData"
      [enableInfiniteScrolling]="true"
      childMapping="Crew"
      [contextMenuItems]="contextMenuItems"
      (contextMenuClick)="contextMenuClick($event)"
      (contextMenuOpen)="contextMenuOpen($event)"
   (actionComplete)="complete($event)"
   
      …
    >

……………
    contextMenuClick(args?: any): void {
      this.selectedIndex = this.treegrid['getSelectedRowIndexes']()[0]; 
      this.selectedRecord = this.treegrid['getSelectedRecords']()[0];
      this.rowInfo = args.rowInfo;
      if (args.item.id === 'child') {
        this.treegrid.columns[this.inx].allowSorting = false;
        this.treegrid.refreshColumns();
        //this.treegrid.allowSorting = false; // disable sorting
      } else {
        var index = this.treegrid['getSelectedRowIndexes']()[0]; //delete the copied record
        this.treegrid.deleteRecord('taskID', this.selectedRecord);
        this.treegrid.addRecord(this.selectedRecord, 0, 'Top'); // move the new record into top
      }
    }
    complete(args) {
      if (args.requestType == 'save') {
        
  //Add the background color
        var selected_rowInfo = this.treegrid.getSelectedRows()[0]; // get the moved record row info
        selected_rowInfo.classList.add('newclass_add'); // add the background color
   
  //
  Remove the background color
        setTimeout(() => {
          if (
            !isNullOrUndefined(
              selected_rowInfo.classList.contains('newclass_add')
            )
          ) {
            selected_rowInfo.classList.remove('newclass_add'); // remove the background color
          }
        }, 10000);
      }
    }

Please refer to the below
sample,https://stackblitz.com/edit/angular-m7olhw-vqjhfu?file=app.component.tsPlease refer to the below API
documentation,https://ej2.syncfusion.com/documentation/api/treegrid/#actioncompletehttps://ej2.syncfusion.com/documentation/api/treegrid/#getselectedrowsRegards,
Pon selvaIf this post is
helpful, please consider Accepting it as the solution so that other members can
locate it more quickly.

Ayush · Answer

hi

Pon Selva Jeganathan

hi I have used this but the issue is that

this.treegrid.getSelectedRows()[0];  it is not working in my condition as I am getting undefined and I want to ask you that I am getting selected record detail using global variable . so can you tell me that how I can color only that record which I have got using click. I have  tried by style.background but it doesn't work.

Pon Selva Jeganathan · Answer

Hi Ayush,

Thanks for the update. Query: it is not working in my condition as I am getting undefined and I want to ask you that
I am getting selected record detail using global variable . so can you
tell me that how I can color only that record which I have got
using clickBased on your query, we achieved your query by using
the getRowByIndex method of the treegrid.Please refer to the below code example,

export class AppComponent {
    ….
    public selectedRecord; //here we define
  the global variable
    public editsettings;
    ….
   
    contextMenuClick(args?: any): void {
      this.selectedIndex = this.treegrid['getSelectedRowIndexes']()[0]; // select the records on perform Copy action
      this.selectedRecord = this.treegrid['getSelectedRecords']()[0];
  // select the records using getSelectedRecords method
      ….
    }
    complete(args) {
      if (args.requestType == 'save') {
        //  var selected_rowInfo = this.treegrid.getSelectedRows()[0]; // get the moved record row info
        var inx = this.selectedRecord.index; // Here we get
  the selected row index
        var selected_rowInfo = this.treegrid.getRowByIndex(inx); // Here we get
  the selected row element using getRowByIndex method
        if (!isNullOrUndefined(selected_rowInfo)) {
          selected_rowInfo.classList.add('bg_primary'); // add the background color
          setTimeout(() => {
            if (
              !isNullOrUndefined(
                selected_rowInfo.classList.contains('bg_primary')
              )
            ) {
              selected_rowInfo.classList.remove('bg_primary'); // remove the background color
            }
          }, 10000);
        }
      }
    }

Please refer to the below sample,https://stackblitz.com/edit/angular-m7olhw-moxpuh?file=app.component.tsPlease refer to the below API documentation,https://ej2.syncfusion.com/documentation/api/treegrid/#getrowbyindexKindly get back to us for further assistance.Regards,
Pon selvaIf this post is
helpful, please consider Accepting it as the solution so that other members can
locate it more quickly.

Disabling allowing sorting child mapping not working

Query: When I am using angular tree grid then I want to disable sorting at a particular position in the move as next property.

Query: after the move as next and i have done the sorting disabled after that sorting completely get disabled i am unable to sort the data. so can you help me in that how I could I can get out of it

Query: but if i have to assign the The result row(s) (here result row is the row which is moved after the clicking on move as next) and i have to make that row Blue for 10-se after the operation can you help me

Query: I was using this set time out when I right click on row after the row as moved at that time I want that row to be coloured in blue for 10s. but when I am using add or set timeout it is not working here.

Query: it is not working in my condition as I am getting undefined and I want to ask you that I am getting selected record detail using global variable . so can you tell me that how I can color only that record which I have got using click