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 remove multiple item from FormArray

 How to remove multiple item from FormArray Call Method at any component :- this.removeItems(formArray, formcontrolCountryID, 2);  Meth...

Popular Posts