How to use applyPreRequestMiddlewares at DataManager?

[Stephan Schrade]

Hi support,
I want to use the new feature 

applyPreRequestMiddlewares with my DataManager to poulate a grid.

I am using:

var remarkData = new ej.data.DataManager({

url: "dataremark",

updateUrl: "updateremark",

insertUrl: "insertremark",

removeUrl: "deleteremark",

// adaptor: new VideotimeAdaptor()

adaptor: new ej.data.UrlAdaptor

})

remarkData.applyPreRequestMiddlewares([

async (context) => {

let videoDuration = 0;

if (isNaN(player.duration())) {

videoDuration = 0;

} else {

videoDuration = player.duration();

}

// console.log(videoDuration);

// console.log(context);

context.request.headers['Authorization'] = 'Bearer your-access-token';

return {

videotime: player.currentTime(),

videoduration: videoDuration,

<?=Yii::$app->request->csrfParam;?>: '<?=Yii::$app->request->csrfToken;?>',

videoanalysisvideoid: <?=$video->videoanalysisvideoid?>

}

}

])

But no extra parameters or headers are sent to my backend if the grid is refreshed (and "dataremark" ist called).

What am I doing wrong?

Best wishes,
Stephan

[Mohanraj Rengasamy]

Hi Stephan,

Greetings from Syncfusion support,

  

Based on the query, we understand that you are trying to send a token and extra parameters and want to add the header to the request by applying middleware logic using the DataManager. Upon inspecting the provided code example, we observed that the header is being modified directly from the request using ‘context.request’. Instead, you must reassign the headers to the request, as shown in the example below. This is the reason for the reported behavior.

Please refer the below code example:

 

let dataManager = new ej.data.DataManager({

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

  adaptor: new ej.data.UrlAdaptor(),

});

 

// Middleware before request is sent to the server

dataManager.applyPreRequestMiddlewares = async function (request) {

  return {

    headers: [

      { Authorization: 'Bearer your-access-token' },

      { Videotime: '8899' }, // Extra parameters via header

    ],

  };

};

 

Sample: https://stackblitz.com/edit/gouk4dbx-lnsxekaa?file=index.js

Screenshot:

Regards,

Mohanraj Rengasamy

[Stephan Schrade]

Hi Mohanraj,

many thanks for your quick answer.
It works now :)

Perhaps the example in your documentation can be updated to reflect this solution.

Is there also a possibility to add request parameters to the request via applyPreRequestMiddlewares?

Best wishes,
Stephan

[Rajapandi Ravi]

Stephan,

We are happy to hear that our provided solution was helpful.

Query#: Is there also a possibility to add request parameters to the request via applyPreRequestMiddlewares?

Yes, you can include request parameters within the applyPreRequestMiddlewares method as shown below. Please refer to the code example, sample and screenshot for further details.

Index.js

 

// Middleware before request is sent to the server

dataManager.applyPreRequestMiddlewares = async function (request) {

  let modifedPayload = JSON.parse(request.data);

  modifedPayload.Foo = "Hello World!";

  let senddata = JSON.stringify(modifedPayload);

  request.data = senddata;

  return {

    headers: [

      { Authorization: 'Bearer your-access-token' },

      { Videotime: '8899' }, // Extra parameters via header

    ]

  };

};

 

Sample: https://stackblitz.com/edit/gouk4dbx-ekwrwuf9?file=index.js

Screenshot:

[Stephan Schrade]

Hello,

many thanks for this code.
It works perfect to get and update the data.

The necessary parameters are added to the query :)

But at inserting new data the parameters are not added :(

Im using these settings of my dataManager 

var remarkData = new ej.data.DataManager({

url: "dataremark",

updateUrl: "updateremark",

insertUrl: "insertremark",

removeUrl: "deleteremark",

adaptor: new ej.data.UrlAdaptor,

});

remarkData.applyPreRequestMiddlewares = async function (request) {

let videoDuration = 0;

if (isNaN(player.duration())) {

videoDuration = 0;

} else {

videoDuration = player.duration();

}

let modifiedPayload = JSON.parse(request.data);

console.log(modifiedPayload);

modifiedPayload.videotime = player.currentTime();

modifiedPayload.videoduration = videoDuration;

modifiedPayload.<?=Yii::$app->request->csrfParam;?> = '<?=Yii::$app->request->csrfToken;?>';

modifiedPayload.videoanalysisvideoid = <?=$video->videoanalysisvideoid?>;

let senddata = JSON.stringify(modifiedPayload);

request.data = senddata;

};

This dataManager has the PreRequestMiddlewares Settings as you mentioned and is bound to a grid.

But if I want to add a new entry to the grid, the extra parameters are not added and it looks like the async function within the applyPreRequestMiddlewares is not invoked at all (console.log is not executed)

Regards,
Stephan

[Sivaranjani Rajasekaran]

Hi Stephan Schrade,

Thank you for your inquiry!

We prepared a sample based on your requirement. In this sample, when a new record is added, the dataManager.applyPreRequestMiddlewares method is properly invoked, and the custom parameters are passed correctly. We have also attached a video demo for your reference. Kindly review it once.

Code example :

 var hostUrl = 'Home/UrlDataSource';

    var data = new ej.data.DataManager({

      url: hostUrl,

       insertUrl: 'Home/Insert',

      updateUrl: 'Home/Update',

      removeUrl: 'Home/Remove',

      adaptor: new ej.data.UrlAdaptor(), // Use your custom adaptor here

      crossDomain: true

    });

  data.applyPreRequestMiddlewares = async function (request) {

  let modifedPayload = JSON.parse(request.data);

  modifedPayload.Foo = 'Hello World!';

  let senddata = JSON.stringify(modifedPayload);

  request.data = senddata;

  return {

    headers: [

      { Authorization: 'Bearer your-access-token' },

      { Videotime: '8899' }, // Extra parameters via header

    ],

  };

};

Video Demo:

Screenshot:

Sample : Please find the sample attached

If you are still experiencing the issue, please share a reproducible sample or try to reproduce the issue in our shared sample so that we can further analyze the issue and provide a solution.

Please let us know if you need further assistance

Attachment: JSCore_bfc82ab5.zip

[Stephan Schrade]

Thanks für your example.

Are you sure, that you did analyse the request of the insert action in your example?

If there is an insert action with a grid you will never get the request parameter "requiresCounts".
This parameter only occurs at retrieving data via the "url" parameter of the assigned DataManager.
At the insert action you will always get the parameter "action: insert" together with the parameters of the new row of the grid.

After an insert, the grid automatically refreshes itself in calling the "url" parameter. Here the parameters defines in the Middleware are sent as data of the request.

But just right before that, the url defined at "insertUrl" is called. And here the extra parameters from the Middleware are missing.

Can you please check this?

BTW: With the grid action "update" everything is ok, the extra parameters defined in the Middlware are sent.

Regards,
Stephan

[Kishore Muthukrishnan]

Hi ,

 

Sorry for the inconvenience,

 

We have confirmed the reported scenario as a bug from our end and logged it as “The applyPreRequestMiddlewares does not triggers during insert operation”. Thank you for taking time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will include the defect fix in our upcoming patch release scheduled for July 01st, 2025.

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link,

 

Feedback: https://www.syncfusion.com/feedback/68201/the-applyprerequestmiddlewares-does-not-triggers-during-insert-operation

 

Disclaimer: "Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization".

 

Regards,

Kishore Muthukrishnan

[Stephan Schrade]

Hi,

many thanks for your support.

Unfortunately the link to the feedback does not work (not associated to my account), so I don't know when the fix is included.

It looks like it ist not in the release from June 25.

Regards,
Stephan

[Kishore Muthukrishnan]

Hi ,

 

We are glad to announce that, we have included the fix for the issue “The applyPreRequestMiddlewares does not triggers during insert operation ” in our 30.1.38 release. So please upgrade to our latest version of the Syncfusion package to resolve the reported issue.

 

Root Cause: The error is caused because the middlewares were not triggered before request send to the server.

 

Solution: The issue is resolved by use the middlewares on before sending the request to server.

 

Feedback: https://www.syncfusion.com/feedback/68201/the-applyprerequestmiddlewares-does-not-triggers-during-insert-operation

 

We thank you for your support and appreciate your patience in waiting for this release. Please get back to us if you need any further assistance.

 

Regards,

Kishore Muthukrishnan

[Stephan Schrade]

Hi,

this is good news, many thanks!

Can you please add this version to the CRG ?

Regards,
Stephan

[Kishore Muthukrishnan]

Hi ,

 

We have added the v30.1.38 in CRG and you can download it from here

https://crg.syncfusion.com/
 

 

 

Regards,

Kishore Muthukrishnan