How to pass value of input as query?

[Andrew]

Hi there,

I'm trying to insert the value of an input into the Query of the grid.

I tried writing the JS/jQuery as a string and set is as the Query, but upon checking the Dev Tools > Network, my query wasn't added. I also did the document.getElementById version but same result.

var query = "new ej.data.Query().addParams('SearchFirstName', $('#SearchFirstName').val())";

<ejs-grid gridLines="Default"

          allowTextWrap="true"

          toolbar="customToolbarControls"

          toolbarClick="toolbarClick"

          height="500px"

          allowSorting="true"

          allowPaging="true"

          query="@query"></ejs-grid>

PS: Using the built-in search isn't an option as of the moment.

[Sujith Kumar Rajkumar]

Hi Andrew, 

 

Greetings from Syncfusion support. 

 

We checked the reported problem but unfortunately were unable to reproduce it from our end as the query you have mentioned was sent properly in the data request when set to the Grid’s query property. You can check the below sample and screenshot image for reference, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/164037/ze/GridApplication-518136983 

 

 

 

So please share us the following information to validate further on this, 

 

• We could not see the Grid dataSource set from the shared code. So please let us know where you have assigned the data to the Grid and which adaptor you have used.
• Network tab request and response data.
• Pictorial or video demonstration of the problem.
• Entire Grid code file.
• Syncfusion package version used.
• If possible share us a simple sample to replicate the problem or try reproducing it in the above provided sample.

 

Regards, 

Sujith R 

[Andrew]

Hi Sujith ,

Thanks for getting back to me. 

I found out that it was working as expected on other pages. It's that 1 particular page.

Thanks for your time!

[Sujith Kumar Rajkumar]

Hi Andrew, 

 

You’re welcome. 

 

If it is not working in one page alone of the application, then we suspect it might be due to the query not assigned to the Grid’s query property or related to the data request being sent. So we suggest you to ensure these cases with the other pages where this case is working fine and get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Andrew]

Hi Sujith, 

Figured out the problem. It just occurred to me that 'new ej.data.Query.addParams('SearchFirstName',$('#SearchFirstName').val());' evaluates immediately. But since I'm creating a search form, this behavior is not ideal.

My solutions is to use actionBegin and actionComplete

          actionBegin="actionBegin"

          actionComplete="actionComplete">

 function actionBegin(args) {

         if (args.requestType === 'refresh') {

            var grid = document.getElementById('@Model.Name').ej2_instances[0];

            grid.query = new ej.data.Query().addParams('SearchFirstName', $('#SearchFirstName').val());

        }

}

    function actionComplete(args) {

        console.log('action completed')

        console.log(args);

        if (args.requestType === 'refresh') {

            grid.query = new ej.data.Query();

        }

    }

Thanks for your time:)

[Andrew]

Okay, so after much debugging, I've given up.

Setting the query of the grid after initialization causes the grid to freak out and send requests forever in rapid succession.

Grid

<ejs-grid actionBegin="actionBegin">

Code of actionBegin

As I can't find any documentation related to this, I'm considering writing a custom adaptor. *sigh*

[Sujith Kumar Rajkumar]

Hi Andrew, 

 

Based on the provided information we would like to let you know that when the Grid’s query property is updated, the server request will be automatically sent(with remote data binding) which is its default behavior. And when the response is returned successfully, the Grid’s actionBegin and actionComplete event events will be triggered with requestType as ‘refresh’. Now, from the shared code snippet we could see that you are updating the Grid’s query property in these events(actionBegin and actionComplete) for the ‘refresh’ requestType and because of this the query updating code is being continuously executed in a loop and request is sent to the server. This is the cause of your reported problem. 

 

So we suggest you to remove the query updating in the ‘refresh’ request type and update it for your required action alone(like, paging, sorting, etc. for which the actionBegin and actionComplete events will be triggered) or when an external action is triggered(as per your use case) to resolve this problem. 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R 

[Andrew]

HI Sujith,

Thanks for pointing me to the right direction!

For reference, what I did was 

1. to remove any "SET-ting" of query in actionBegin.

2.  SET the value of query from another function

[Sujith Kumar Rajkumar]

Hi Andrew, 

 

You’re welcome. We are glad to hear that your query has been resolved and thanks for sharing the solution here. 

 

Regards, 

Sujith R