Gird Server Side Filter request URL Issue

[ajay.a@bycero.comParticipant]

filter manually filter the filter url is taking all the row data to the server
https://localhost:7250/api/Case/GetCaseDetailsBypagedfilter?0[customerId]=1&0[customer]=&0[workStationId]=&0[workStation]=&0[viqcasenumber]=20221214-151422&0[nodeID]=-1&0[casepath]=\DAUDIO\localaudio\22121\4151421\0001\&0[sessionname]=221214151421&0[casecode]=0001&0[maintrandefid]=1&0[casedataid]=1&0[finalSize]=238&0[isProcessed]=false&0[processStatus]=Segmented&0[courtRoomNumber]=&0[recordingDateTime]=&0[captureCompleteDate]=&0[mediaProcessorID]=&0[hearingState]=&0[segmentDetails]=&0[annotationDetails]=&0[id]=1&0[createdBy]=&0[created]=2022-12-15T18:00:11.9069932&0[lastModifiedBy]=&0[lastModified]=2022-12-15T13:33:13.2213939&0[isDelete]=false&1[customerId]=1&1[customer]=&1[workStationId]=&1[workStation]=&1[viqcasenumber]=CASE_AJ_01&1[nodeID]=-1&1[casepath]=\DAUDIO\localaudio\TESTA\J\0001\&1[sessionname]=TESTAJ&1[casecode]=0001&1[maintrandefid]=2&1[casedataid]=2&1[finalSize]=1317&1[isProcessed]=false&1[processStatus]=Segmented&1[courtRoomNumber]=&1[recordingDateTime]=&1[captureCompleteDate]=&1[mediaProcessorID]=&1[hearingState]=&1[segmentDetails]=&1[annotationDetails]=&1[id]=2&1[createdBy]=&1[created]=2022-12-15T20:31:20.8001421&1[lastModifiedBy]=&1[lastModified]=2022-12-15T15:32:14.2484859&1[isDelete]=false&2[customerId]=1&2[customer]=&2[workStationId]=&2[workStation]=&2[viqcasenumber]=20221215-211520&2[nodeID]=-1&2[casepath]=\DAUDIO\localaudio\CASE0\1AJ\0001\&2[sessionname]=CASE01AJ&2[casecode]=0001&2[maintrandefid]=3&2[casedataid]=3&2[finalSize]=0&2[isProcessed]=false&2[processStatus]=Segmented&2[courtRoomNumber]=&2[recordingDateTime]=&2[captureCompleteDate]=&2[mediaProcessorID]=&2[hearingState]=&2[segmentDetails]=&2[annotationDetails]=&2[id]=3&2[createdBy]=&2[created]=2022-12-15T21:29:29.0613861&2[lastModifiedBy]=&2[lastModified]=2022-12-29T15:18:48.2702109&2[isDelete]=false&3[customerId]=1&3[customer]=&3[workStationId]=&3[workStation]=&3[viqcasenumber]=20221214-151422&3[nodeID]=-1&3[casepath]=\DAUDIO\localaudio\22121\4151421\0001\&3[sessionname]=221214151421&3[casecode]=0001&3[maintrandefid]=1&3[casedataid]=1&3[finalSize]=238&3[isProcessed]=false&3[processStatus]=Segmented&3[courtRoomNumber]=&3[recordingDateTime]=&3[captureCompleteDate]=&3[mediaProcessorID]=&3[hearingState]=&3[segmentDetails]=&3[annotationDetails]=&3[id]=4&3[createdBy]=&3[created]=2022-12-16T16:26:52.8208646&3[lastModifiedBy]=&3[lastModified]=2022-12-29T15:19:20.4657971&3[isDelete]=false&4[customerId]=1&4[customer]=&4[workStationId]=&4[workStation]=&4[viqcasenumber]=CASE_AJ_01&4[nodeID]=-1&4[casepath]=\DAUDIO\localaudio\TESTA\J\0001\&4[sessionname]=TESTAJ&4[casecode]=0001&4[maintrandefid]=2&4[casedataid]=2&4[finalSize]=1317&4[isProcessed]=false&4[processStatus]=Segmented&4[courtRoomNumber]=&4[recordingDateTime]=&4[captureCompleteDate]=&4[mediaProcessorID]=&4[hearingState]=&4[segmentDetails]=&4[annotationDetails]=&4[id]=5&4[createdBy]=&4[created]=2022-12-16T16:27:05.509941&4[lastModifiedBy]=&4[lastModified]=2022-12-29T15:19:36.0577294&4[isDelete]=false&5[customerId]=1&5[customer]=&5[workStationId]=&5[workStation]=&5[viqcasenumber]=CASE0111&5[nodeID]=-1&5[casepath]=\DAUDIO\localaudio\CASE0\1AJSS\0001\&5[sessionname]=CASE01AJSS&5[casecode]=0001&5[maintrandefid]=4&5[casedataid]=4&5[finalSize]=389&5[isProcessed]=false&5[processStatus]=Segmented&5[courtRoomNumber]=&5[recordingDateTime]=&5[captureCompleteDate]=&5[mediaProcessorID]=&5[hearingState]=&5[segmentDetails]=&5[annotationDetails]=&5[id]=6&5[createdBy]=&5[created]=2022-12-19T23:48:04.8855711&5[lastModifiedBy]=&5[lastModified]=2022-12-29T15:19:38.983131&5[isDelete]=false&idoperator=and&filtervalue0=3&filtercondition0=EQUAL&filteroperator0=0&filterdatafield0=id&filterGroups[0][field]=id&filterGroups[0][filters][0][label]=3&filterGroups[0][filters][0][value]=3&filterGroups[0][filters][0][condition]=EQUAL&filterGroups[0][filters][0][operator]=and&filterGroups[0][filters][0][field]=id&filterGroups[0][filters][0][type]=numericfilter&filterscount=1&groupscount=0&pagenum=0&pagesize=6&recordstartindex=0&recordendindex=6&_=1674485916850

<jqxGrid #caseGrid 
                            (onFilter)="Filter($event)"
                            [virtualmode]="true" 
                            [rendergridrows]="rendergridrows"
                            [source]="dataAdapter"
                            [filterable]="true"
                            [sortable]="true"
                            [pagesize] = "6"
                            [pagesizeoptions]="['100', '200', '1000']"
                            [pageable]="true"
                            [filtermode]="'default'"
                            [theme]="'material'"
                            [width]="'99.99%'"
                            [height]="height"
                            [showfilterrow]="true"
                            [showtoolbar]="true" 
                            [columns]="columns"
                            [renderstatusbar]="createButtonsContainers" 
                            [pagerrenderer]="pagerrenderer"   
                            >
                            </jqxGrid>
async getCaselist() {

   
    //this.spinner.show();
    this.source.data = {};
    this.source.url = this.apiService.getfilterCaseListURL();
    this.source.type='GET'
    // this.caseGrid.updatebounddata('cells');
    this.caseGrid.updatebounddata('filter');
  }

  source: any =
    {
      datatype: 'json',
      datafields:
        [
          { name: 'id', type: 'number' },
          { name: 'casecode', type: 'string' },
          { name: 'viqcasenumber', type: 'string' },
          { name: 'nodeID', type: 'number' },
          { name: 'sessionname', type: 'string' },
          { name: 'casedataid', type: 'number' },
          { name: 'processStatus', type: 'string' },
          { name: 'created', type: 'date' },
        ],
    
      async: true,
      cache: false,
      loader: false,
      formatData: function(data) {
        // data = JSON.stringify(data);
        // return { "jsonData": data };
        return data;
    },
      beforeprocessing: (data: any) => {
        if(data!=null)
        {
          console.log(data);
          this.source.totalrecords = data.data.totalRows;
          this.totalCountGlobal = data.data.totalRows;
          this.source.data= data.data.rows;
          return this.source.data;
        }
      },
      filter: () => {
        // update the grid and send a request to the server.   
         this.caseGrid.updatebounddata('filter');
        },
       sort: () => {
        // update the grid and send a request to the server.
        this.caseGrid.updatebounddata('sort');
      },
    };
  dataAdapter: any = new jqx.dataAdapter(this.source, {
    autoBind: true,
    beforeSend: function (jqXHR, settings) {
      console.log("jqXHR",jqXHR);
      console.log(settings);
      //alert(settings.url);
      this.token = localStorage.getItem('token');
      if (this.token == null) {
        jqXHR.abort();
      }
      jqXHR.setRequestHeader('Authorization', 'Bearer ' + this.token);
    },
    contentType: 'application/json; charset=utf-8',
    loadError: function (xhr, status, error) {
      console.log("Unable to get the jobs. Please refresh the page.",error);
    }
  });
  columns: any[] =
    [
      { text: 'CASE ID', filtertype: 'number', cellsalign: 'middle', datafield: 'id', width: '6%' },
      { text: 'CASE CODE', columntype: 'textbox', filtertype: 'input', datafield: 'casecode', width: '10%'},
      { text: 'CASE NUMBER', columntype: 'textbox', filtertype: 'input', datafield: 'viqcasenumber', width: '20%' },
      { text: 'NODE ID', datafield: 'nodeID', filtertype: 'number', cellsalign: 'middle', width: '8%',  align: 'center' },
      { text: 'SESSION NAME', columntype: 'textbox', filtertype: 'input', datafield: 'sessionname', width: '20%' },
      { text: 'CREATED ON', datafield: 'created', filtertype: 'range', width: '12%', cellsalign: 'right', cellsformat: 'd'  },
      { text: 'CASE DATA ID', datafield: 'casedataid', filtertype: 'number', cellsalign: 'middle', width: '10%',  align: 'center' },
      { text: 'STATUS', datafield: 'processStatus', filtertype: 'checkedlist', width: '12%' },
      
    ];

  ready = (): void => {
   this.caseGrid.sortby('created', 'desc');
  }
  Filter(event: any): void 
  {
      // Do Something
  }
  clearFiltering(): void {
    if (this.caseGrid) {
      this.caseGrid.clearfilters();
    }
  }

Due to considering the whole row data in the request URL, we were unable to call the backend API for the filter when we deployed it in the IIS

Can we restrict sending the whole row of data in the request URL?

[svetoslav_borislavovParticipant]

Hi,

An option in your case is to manually fetch the data with the loadServerData function which is a setting of the DataAdapter.
loadServerData: A callback function which allows you to manually handle the ajax calls through the jqxDataAdapter. The function gets passed three arguments: The data to be sent to the server, the source object which initializes the jqxDataAdapter plug-in and a callback function to be called when the ajax call is handled.

Note: When you are using jqxDataAdapter plug-in with jqxGrid in virtual mode, the callback function should return an additional field called: ‘totalrecords’ which specifies the records count. The sorting, filtering and paging information can be retrieved from the ‘serverdata’ parameter.

You may send us a demo project here support@jqwidgets.com, so we can work on it.

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[ajay.a@bycero.comParticipant]

Hi
Thanks for the replay, we are written this application in Angular 10 and the backend (Server) filter was implemented in the Asp.Net Core 6
My concern is
why we are getting the total grid row data in the filter query?

[Author]

Posts