Drop and Drag Columns in ejs grid

Question

HII am using ejs grid . please send code for column drop and drag.

Manivel Sellamuthu · Accepted Answer

Hi Narsimsetty, Query : we need to save columns into db, when i do drag and drop columns. We have validated your requirement and you can the get the new column ordered after reordered the column by using ‘actionComplete’ event and its requestType as ‘reorder’ . Please find the code example and sample for your reference. [app.component.html]

[app.component.ts] export class AppComponent { public data: Object[]; @ViewChild('grid') public grid: GridComponent; actionComplete(args){ if(args.requestType == 'reorder'){ let colName = []; for(let i=0; i< this.grid.columns.length; i++){ colName.push((this.grid.columns[i] as Column).field); } console.log(colName); // you can update column order in your dB } } ngOnInit(): void { this.data = employeeData; } } In the above sample, we can get the new column order by using actionComplete event . You have send the request to server and update the new column order in your database through the above actionComplete events (and it requestType as ‘reorder’) Sample : https://stackblitz.com/edit/angular-jj4z11?file=app.component.ts API : https://ej2.syncfusion.com/angular/documentation/api/grid/#actioncomplete Regards, Manivel

Manivel Sellamuthu · Answer

Hi Narsimsetty, Greetings from Syncfusion support. To enable reordering we suggest you to define allowReordering to true. To use reordering feature we need to inject ReorderService in the provider section of AppModule. Please refer the below code example and documentation and demo for more information.

import { Component, OnInit } from '@angular/core'; import { employeeData } from './data'; import { ReorderService } from '@syncfusion/ej2-angular-grids'; @Component({ selector: 'ej-gridreorder', templateUrl: 'reorder.html', providers: [ReorderService] }) export class ReorderComponent implements OnInit { public data: Object[]; ngOnInit(): void { this.data = employeeData; } } Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/#reorder Demo: https://ej2.syncfusion.com/angular/demos/#/material/grid/reorder Please let us know, if you need further assistance. Regards, Manivel

Narsimsetty Chalamaiah · Answer

HiWe have seen below code .but we need to save columns into db, when i do drag and drop columns.please share code .