How To Sort Row Of Grid in Angular 6

How To Sort Row Of Grid in Angular 6

Setup For Sortable JS

1). Install Plugin  "'angular-sortablejs"

2). set reference or import service
     import { SortablejsOptions } from 'angular-sortablejs';

3).Define Variable in Class
    public sortableOptions: SortablejsOptions;

4).Define Function in class for Get Rows of Grid or table
   get fieldRows() {
     return this.contractFormService.fieldRows(this.newContractIOTForm, this.discountType,                   this.discountTypeID, this.j);
    }

5).Call Method in OnInit() method
    this.sortableOptions = {
    onSort: (event: any) => {
    this.contractFormService.sortFormFields(
    this.j,
    this.newContractIOTForm,
    this.discountType,
    this.fieldRows, this.discountTypeID);
                                 }
    };


6). set property of Grid in html of Currunt ts file 

   [sortablejs]="fieldRows" [sortablejsOptions]="sortableOptions"

7). Define Common Function for sorting Functionality for Data
 
 sortFormFields(j: number, newContractIOTForm: FormGroup, discountType: string,            arrayIndexes: AbstractControl[], TypeID) {
   const discountTypeList = newContractIOTForm.get(discountType).get('DiscountTypes').value;
   if (discountTypeList) {
   for (let index = 0; index < discountTypeList.length; index++) {
   const discountTypeID = discountTypeList[index].DiscountTypeID;
  const offerFields: FormArray = this.getDiscountFields(newContractIOTForm, discountType,     discountTypeID);
   if (TypeID === discountTypeID) {
   const _temp: FormArray = offerFields.controls[j] as FormArray;
    arrayIndexes.forEach((ele: FormGroup, i) => {
  const fields = _temp.controls[i] as FormGroup;
fields.setValue(ele.value);
});
}

No comments:

Post a comment

Thank You For Your Great Contribution

Featured Post

how to find duplicate item from array using multiple object keys in angular or javascript

 how to find duplicate item from array using multiple object keys There is a way to find based of multiple key find duplicate records in ang...

Popular Posts