Add additional parameter to DataManager

[Stephan Schrade]

Hi support,

I need to set an additional CSRF token to every query to my backend.

So far I have used this solution (from you) which is little bit tricky and not so elegant.

class AgeclassAdaptor extends ej.data.UrlAdaptor {

beforeSend(dataManager, request, ajaxSettings) {

var action = JSON.parse(ajaxSettings.data).action;

var dataStrng = ajaxSettings.data;

dataStrng = dataStrng.slice(0, -1);

dataStrng = dataStrng + '" Yii::$app->request->csrfParam; ?>":' + '" Yii::$app->request->csrfToken; ?>"' + '}';

// console.log(dataStrng);

ajaxSettings.data = dataStrng;

ajaxSettings.options.data = dataStrng;

}

}

This works well with Syncfusion 20.x.x. But now I have upgrade to 23.1.36 and this does not work any more.

I have now tried to add the parameter as you have described at

https://www.syncfusion.com/forums/148154/sending-additional-post-data-to-datamanager

(Your answer from October 9, 2019)

But this does not work either. The additional parameter is not included in the request to the backend.

I finally came up with this working solution

new ej.data.DataManager({

url: '$urlBase?>/ageclass/groupsumjson',

adaptor: new ej.data.UrlAdaptor

})

.executeQuery(new ej.data.Query().addParams(" Yii::$app->request->csrfParam; ?>", " Yii::$app->request->csrfToken; ?>"))

.then(function(response) {

multiSelect.dataSource = response.result;

}

);

This will populate my multi select dropdown element.

But this might not work in any situation.

Is there any other way to achieve this?

One addition:

In some cases I do also need to add more than one parameter to the query.

Unfortunately this does not work mit my "working solution" (see above).

Regards,

Stephan

[Santhosh Iruthayaraj]

Hi Stephan Schrade,

We apologize for the delayed response.

To add additional parameters to the request payload, you can utilize the "addParams" method in the "query" property of the Multiselect component itself. If you wish to add multiple parameters, you can achieve this by chaining multiple "addParams" methods one after another. We have prepared code snippet and sample for your reference, which you can access below:

[index.js]

 

var msObject = new ej.dropdowns.MultiSelect({

  dataSource: new ej.data.DataManager({

    url: 'https://services.syncfusion.com/js/production/api/UrlDataSource',

    adaptor: new ej.data.UrlAdaptor(),

  }),

 

  query: new ej.data.Query()

    .addParams('Syncfusion', true)

    .addParams('skip', 30)

    .addParams('take', 10),

 

  fields: { text: 'Designation', value: 'Designation' },

});

 

Sample: https://stackblitz.com/edit/sending-additional-parameters

Please let us know if you have any further queries.

Regards,
Santhosh I

[Stephan Schrade]

Hi,

many thanks for your answer.

Your solution works very well for my problem with the MultiSelect Dropdown.

But I do have another case, where I also need this feature:

There is a grid (with an ej.data.UrlAdaptor as datasource) and other elements on the page.

If create a new entry for the grid I have to send additional parameters form other elements of the page together with the content of the new entry.

So far I have used the same solution of my first screenshot which worked very well.

But now I can't use this.

How can I inject additional parameters to the query at runtime?

I have tried to use the query parameter of the grid but this didn't work.

Regards,

Stephan

[Santhosh Iruthayaraj]

Hi Stephan Schrade,

You can dynamically send additional parameters in the Grid at runtime using the same "addParams" method with the "query" property. We have prepared a code snippet and a sample demonstrating this, which you can find below:

[index.js]

 

document.getElementById('btn1').addEventListener('click', () => {

  grid.query = new ej.data.Query().addParams('skip', 20).addParams('take', 10);

});

 

document.getElementById('btn2').addEventListener('click', () => {

  grid.query = new ej.data.Query().addParams('skip', 50).addParams('take', 3);

});

 

document.getElementById('btn3').addEventListener('click', () => {

  grid.query = new ej.data.Query().addParams('skip', 100).addParams('take', 6);

});

 

Sample: https://stackblitz.com/edit/sending-additional-parameters-grid

As you can see in the sample, we have added three different parameters using the "addParams" method with the Grid's "query" property based on which button is clicked.

Regards,

Santhosh I

[Stephan Schrade]

Hi,

many thanks for your solution.

Unfortunately this might not work in my case.

I do have a video player on the same page. And when I add a new entry in my grid, I do need the current position of the player (besides other data). I can get this with player.currentTime().

But I could not manage to add this parameter to the grid query.

I tried to add this within actionBegin (of the grid) after 

if (args.requestType === "add") {

but it did not work.

How can I achieve this?

Regards,

Stephan

[Santhosh Iruthayaraj]

Hi Stephan Schrade,

If your requirement is to add parameters whenever the "add" action is performed, you can achieve this by using the "actionComplete" event with "args.action" set to "add" and "args.requestType" set to "save". Please find the code snippet and sample below for your reference:

[index.js]

 

grid.actionComplete = (args) => {

  if (args.action === 'add' && args.requestType === 'save') {

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

      .addParams('skip', 20)

      .addParams('take', 10);

  }

};

 

Regards,

Santhosh I

[Stephan Schrade]

Hi,

sorry but this does not work.

I think there is no event invoked with action === add and requestType === save,

I only could grab requestType == add within the actionComplete event.

And if I try this, the javascript just stops and the insert url of the data manger is not called at all.

Regards,

Stephan

[Santhosh Iruthayaraj]

Hi Stephan Schrade,

Before we can proceed with addressing your query further, could you kindly provide the following information? Providing these details will enhance our understanding of the issue, enabling us to offer a more tailored solution.

1. When do you intend to send additional parameters? Is it at the beginning of the add operation (when clicking the add button) or during the save action of added details (when clicking the update button)?
2. Regarding the statement, “insert url of the data manger is not called at all”, could you please clarify its meaning?
3. Kindly share the complete Grid rendering code, including all code segments for DataManager, actionBegin, and actionComplete that you have implemented.
4. Provide a video demonstration illustrating the issue encountered when adding the additional parameter using the "addParams" method. This should cover both the actionBegin and actionComplete events when the "requestType" is "add."
5. If possible, could you either provide a sample demonstrating the issue or attempt to replicate the problem in the provided sample? Having a sample will greatly facilitate our validation process and enable us to offer a precise solution tailored to your requirements.

Sample: https://stackblitz.com/edit/sending-additional-parameters-grid

Thank you for your cooperation.

Regards,

Santhosh I