Progress bar still working and the api response is completed

[Mohamed]

if the result response is empty the gird still have a progress bar

it is not my complete version of code i am still working on 

the API Response

{"count":3072,"result":[]}
 

my code 

@Component({

selector: 'app-product-list',

templateUrl: './product-list.component.html',

styleUrls: ['./product-list.component.scss']

})

export class ProductListComponent implements OnInit {

public dataManager: DataManager;

public pageSettings: PageSettingsModel;

public filter?: IFilter;

@ViewChild('grid', {static:true}) public grid?: GridComponent;

constructor(private product:ProductService) {

}

ngOnInit(): void {

this.dataManager = new DataManager({

url: 'http://localhost:5240/api/Products', // Your API endpoint

adaptor: new CustomWebApiAdaptor(),

});

this.pageSettings =pageSettings(); // Ini

this.grid!.filterSettings = filterSettings()

this.filter = {

ui:gridTextFilterConfiguration()

};

};

onEditClick(data:any){

console.log(data);

}

//////////////////////////////////////////////////////////////////////////////////////////////////////////
// i have made a configuration files for synfusion

import { Filter, FilterSettingsModel, PageSettingsModel } from "@syncfusion/ej2-angular-grids";

import { TextBox } from "@syncfusion/ej2-angular-inputs";

import { createElement } from "@syncfusion/ej2-base";

export function gridTextFilterConfiguration(){

let text:TextBox = new TextBox();

return {

create: (args: { target: Element, column: object }) => {

const flValInput: HTMLElement = createElement('input');

(args as any).target.appendChild(flValInput);

text = new TextBox();

text.appendTo(flValInput);

},

write: (args: {

column: object, target: Element, parent: any,

filteredValue: string | undefined

}) => {

text.value = args.filteredValue == undefined ? "" : args.filteredValue

},

read: (args: { target: Element, column: any, operator: string, fltrObj: Filter }) => {

(args as any).fltrObj.filterByColumn((args as any).column.field, (args as any).operator, text.value);

}

}

}

export function pageSettings() :PageSettingsModel{

return { pageSize: 10, pageCount: 1 , pageSizes:["10", "20","50", "100", "All"]};

}

export function filterSettings():FilterSettingsModel{

const stringCustomOperators = [

{ value: 'contains', text: 'Contains' },

];

return {

type:"Menu",

operators:{

stringOperator:stringCustomOperators

}

};

}

//////////////////////////////////////////////////////////////////////////////////////

Adapeter of changing the behavior

import { DataManager, Query, UrlAdaptor, WebApiAdaptor } from "@syncfusion/ej2-data";

export class CustomWebApiAdaptor extends WebApiAdaptor {

  // Override the processQuery method to customize behavior

   override processQuery(dm: DataManager, query: Query, hierarchyFilters?: Object[] | undefined): Object {

    this.options.skip ="Skip";

    this.options.take ="Take";

    this.options.where ="filter"

    console.log(this.options);

    return super.processQuery(dm, query, hierarchyFilters);

  }

 override convertToQueryString(request: Object, query: Query, dm: DataManager): string {

  //console.log(query);

   const whereConditions =  query.queries.filter(a=> a.fn === "onWhere").filter( a=> a.e )[0]?.e?.predicates;

   const values:any[] = [];

   for(let item of whereConditions?? []){

    values.push({value : item.value ,field:item.field, operator:item.operator})

   }

   const objec =  query.queries.filter(a=> a.fn === "onSortBy")[0]?.e;

   const url = new window.URLSearchParams("?");

   if(objec?.fieldName ){

    url.append("orderBy",objec.fieldName);

    url.append("direction", objec.direction == "descending" ? "1":"0" );

   }

   for(let key in values){

    for(let item in values[key]){

       url.append(`search[${key}].${item}`,values[key][item])

    }

   }

  return super.convertToQueryString(request, query, dm)+"&" +url.toString();

  }

}

#######################################################

html

<div class="card">

  <div class="card-body">

    <div class="d-flex justify-content-between">

      <h4>Products</h4>

        <button isPrimary="true" ejs-button  >Create New </button>

  </div>

  <div class="mt-2">

  <ejs-grid #grid [dataSource]="dataManager"  [allowSorting]="true" [pageSettings]="pageSettings" [allowPaging]="true" [allowFiltering]="true">

    <e-columns>

        <e-column field='productName'   headerText='Product Name' [filter]="filter" textAlign="Center"  width=90></e-column>

        <e-column field='categoryName' headerText='Category Name' [filter]="filter"  textAlign="Center" width=120></e-column>

        <e-column field='type' headerText='Measurement Type'  [filter]="filter" textAlign="center" width=90></e-column>

        <e-column

        field="id"

        headerText=""

        textAlign="Right"

        width="50"

        [allowFiltering]="false"

        [allowSorting]="false"

        [allowEditing]="false"

        [allowReordering]="false"

      >

        <ng-template #template let-data>

          <div>

            <button ejs-button  (click)="onEditClick(data)">Edit</button>

            <button ejs-button  class="mx-2" (click)="onEditClick(data)">Delete</button>

          </div>

        </ng-template>

      </e-column>

    </e-columns>

</ejs-grid>

</div>

</div>

</div>

[Mohamed]

I found the solution the count should be 0 in api response

I should apply the filter where in count

part of backend

the response should be 

{"count":0,"result":[]}

not 

{"count":3072,"result":[]}

i was

I am sorry