1. Home
  2. Forum
  3. Vue
  4. Problem in filtering with paging from the server

Problem in filtering with paging from the server

Hello.

I have created a grid with server side pagination. I've also added the filtering option, but when I try to filter a column, i type the text, and a message of  "No records found" appears. 

When the component works without server side paging, a list of matches appears. 

I would like to know if there is an event that triggers to make a request to the server, or if there is an option to remove that popup.

This is an example of my problem.


Thank you very much. 


7 Replies 1 reply marked as answer
BS Balaji Sekar Syncfusion Team October 21, 2020 04:33 PM UTC

Hi Jorge, 
 
Greetings from the Syncfusion support. 
 
We have validated your query with provided the information and we found that we cannot see the filtering action query handling in the dataStateChange event. 
 
When click the filter icon on the string type Grid’s column, it will trigger the dataStateChange event with “stringfilterrequest”  then we will call the remote service for fetching data process and return the JSON objects format 
 
Since we can show the list of match items in the filter popup while type a text on filter menu. 
 
Please refer the below code example and sample for more information 
[App.Vue] 
    dataStateChange: function (state) {       
      if ( 
        state.action && 
        (state.action.requestType === "filterchoicerequest" || 
          state.action.requestType === "filtersearchbegin" || 
          state.action.requestType === "stringfilterrequest") 
      ) { 
        this.orderService 
          .execute(state) 
          .then((gridData) => state.dataSource(gridData)); 
      } else { 
        this.orderService.execute(state).then((gridData) => { 
          this.data = gridData; 
        }); 
      } 
    }, 
 
 
[orders-service.ts] 
private getData(state: DataStateChangeEventArgs): Promise<DataResult> { 


    let sortQuery: String = ""; 
    const skipquery = state.skip > -1 ? `$skip=${state.skip}` : null; 
    let pageQuery = ""; 
    const takeQuery = state.take > -1 ? `$top=${state.take}` : null; 
    if (skipquery) { 
      pageQuery = `${skipquery}&`; 
    } 
    if (takeQuery) { 
      pageQuery = `${pageQuery}${takeQuery}`; 
    } 
    let filterQuery: String = ""; 
    if ((state.sorted || []).length) { 
      sortQuery = 
        `&$orderby=` + 
        state.sorted 
          .map((obj: Sorts) => { 
            return obj.direction === "descending" 
              ? `${obj.name} desc` 
              : obj.name; 
          }) 
          .reverse() 
          .join(","); 
    } 

    if (state.where) { 
      filterQuery = 
        `&$filter=` + 
        state.where.map((obj) => { 
          return (<Predicate>obj).predicates 
            .map((predicate) => { 
              return predicate.operator === "equal" 
                ? `${predicate.field} eq ${predicate.value}` 
                : `${predicate.operator}(tolower(${predicate.field}),'${predicate.value}')`; 
            }) 
            .reverse() 
            .join(" and "); 
        }); 
    } 
    this.ajax.url = `${this.BASE_URL}?${pageQuery}${sortQuery}${filterQuery}&$count=true`; 
    return this.ajax.send().then((response: any) => { 
      let data: any = JSON.parse(response); 
      return state.dataSource === undefined 
        ? <DataResult>{ 
            result: data["value"], 
            count: parseInt(data["@odata.count"], 10) 
          } 
        : data["value"]; 
    }); 
  } 
 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar 


JO Jorge October 26, 2020 01:22 PM UTC

I have tested the solution and could adapt it to my project. But I have made a pagination in the server so I don't have to bring many records, I have tables with about two million records and with this solution I can't avoid bringing so many records.

It would be possible to disable this option and not have the suggestions

Thank you very much!

BS Balaji Sekar Syncfusion Team October 27, 2020 01:45 PM UTC

Hi Jorge, 
 
Thanks for the update. 
 
For custom binding the grid actions such as paging, sorting etc., the dataStateChange event will be triggered. In the dataStateChange event we able to get the skip and take properties as arguments to get the current page of records. 
 
So, we suggest you to handle paging query in your service data using these properties from dataStateChange event. 
 
We have video demonstration of your requirement as given below. 
 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar 


JO Jorge October 28, 2020 02:51 PM UTC

Thank you very much for your response.

I'm doing the paging from the server side  correctly calling dataStateChange and using skip and take, that's not the problem 

I don't see any use in loading the filter list by asking again to group the results. In my case, from a table of 2 million records, I would expect to get a list of maybe 1.2 million. I understand that my case is special, so I was asking about the possibility of removing that popup with autocompletion. For me it would be the best solution

In the example I proposed if we force the first column to a string type, the same thing would happen, you have a pagination but to load the list you have to bring back all the records, so the server side pagination logic is lost

I attach the example with the modifications that I comment.
https://codesandbox.io/s/vue-template-forked-wdwpd

Regards


BS Balaji Sekar Syncfusion Team October 29, 2020 03:09 PM UTC

Hi Jorge, 

Based on your query we have prevented the bring the record while type a text in string type filter menu using custom component in filter menu option 

Using this option, we have render the Textbox component instead of default bound the AutoCompoent component in the filter menu. 

Please refer the below code example and sample for more information. 

[App.Vue] 
<ejs-grid 
      id="Grid" 
      ref="grid" 
      :dataSource="data" 
      :allowPaging="true" 
      :allowFiltering="true" 
      :editSettings="editSettings" 
      :toolbar="toolbar" 
      :filterSettings="filterSettings" 
    > 
      <e-columns> 
        <e-column field="OrderID" headerText="Order ID" width="90"></e-column> 
        <e-column 
          field="CustomerID" 
          headerText="Customer ID" 
          :filter="customFiler" 
          width="120" 
        ></e-column> 
      .      .     .      .   
      </e-columns> 
    </ejs-grid> 
 
export default { 
  data() { 
    let inputInstance = null; 
    return { 
      data: data, 
      customFiler: { 
        ui: { 
          create: function (args) { 
            let flValInput = createElement("input", { className: "flm-input" }); 
            args.target.appendChild(flValInput); 
            inputInstance = new TextBox({}); 
 
            inputInstance.appendTo(flValInput); 
          }, 
          write: function (args) { 
            inputInstance.value = args.filteredValue ? args.filteredValue : ""; 
          }, 
          read: function (args) { 
            args.fltrObj.filterByColumn( 
              args.column.field, 
              args.operator, 
              inputInstance.value 
            ); 
          }, 
        }, 
      }, 

 


Please get back to us, if you need further assistance. 

Regards, 
Balaji Sekar 


Marked as answer
JO Jorge November 3, 2020 02:43 PM UTC

Hello Balaji 

This is just what i need.

Thank you so much

BS Balaji Sekar Syncfusion Team November 3, 2020 03:17 PM UTC

Hi Jorge, 

Thanks for the update. 

We are happy to hear that your issue has been resolved. 

please get back to us if you need further assistance. 

Regards, 
Balaji Sekar 


Loader.
Up arrow icon