Hi.
I need to set a dxDataGrid stateStoring to custom type, and this is the documentation to it:
https://js.devexpress.com/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/stateStoring/#customSave
I have tried many different ways of setting the dxDataGrid Options stateStoring field, but haven’t been able to make it work.
I tried doing it in code, like this:
this.dxDataGrid1.Options.stateStoring = new
{
enabled = true,
type = "custom",
customLoad = @"function () {
return LoadGridState();
}",
customSave = @"function (state) {
SaveGridState(state);
}"
};
But get an error at run time.
I have both LoadGridState and SaveGridState as WebMethod:
[WebMethod]
public void SaveGridState(object state)
{
}
[WebMethod]
public object LoadGridState()
{
}
Any help on how I could accomplish this would be appreciated.
Thanks.
Ivan
(Wisej 2.2.46.0 – VS 2019 – C#)
JSON doesn’t support functions. You need to add a function using the WidgetFunctions collection or add them in javascript directly.
The DevExtreme extension has a filterOptions method in each widget js that lets you convert a string into a function, see dxDataGrid.js
/** * Process the options map before it is used to * create or update the widget. */ this.filterOptions = function (options) { if (options.columns) { for (var i = 0; i < options.columns.length; i++) { if (options.columns[i].cellTemplate) options.columns[i].cellTemplate = this.initFunction(options.columns[i].cellTemplate); } } if (options.masterDetail) { options.masterDetail.template = this.initFunction(options.masterDetail.template); } };
Add more conversion in there for the specific widget. For example:
YESSSSSSSSSSSSSSSSSS!
Thank you Luca.
From one stupid question to another stupid question I will eventually get there. 🙂
If anyone needs this later, this was added to the dxDataGrid.js “filterOptions”:
if (options.stateStoring) {
options.stateStoring.customLoad = this.initFunction(options.stateStoring.customLoad);
options.stateStoring.customSave = this.initFunction(options.stateStoring.customSave);
}
Thank you again.
Hi Luca.
I followed your directions and this is what I have now:
In the dxDataGrid, I have in the Options:
"stateStoring": {
"enabled": true,
"type": "custom",
"customLoad": "loadGridStateJS",
"customSave": "saveGridStateJS"
},
I have in the dxDataGrid WidgetFunction the “functions” defined:
(see Grid01.png attached)
But once I run the application and go to the Grid, I get an error:
Uncaught TypeError: n.customLoad is not a function
at t._loadState (dx.all.js?v=637588579367368789:52)
at t.load (dx.all.js?v=637588579367368789:52)
at dx.all.js?v=637588579367368789:52
One thing to notice is that as soon as I set the “stateStoring” customLoad and customSave, after I leave the Option Code Editor, the Grid in the VS Designer stops showing the Columns. So, apparently setting a string (as the Function names) to customLoad and customSave might not be working.
Would you have any idea of what I could try in this?
Thank you!
Ivan
Download the latest devexpress extension from github, it includes the code I mentioned above so you can see how to add more.
Hi Frank.
Thank you for the update. I was on my way creating a sample, since I tested your first idea and still complained about the function setting.
Since the second option you mentioned now might take a while, if it gets done, would you mind to give me a small direction on where I find this “Init” function? 🙂
I will worry about what to code in it after this.
Ivan,
checking more closely, it´s currently not possible to enter a function the way you did.
You might want to implement the function by yourself in the Init function or
we could extend the dxDataGrid to convert that property from a function name to an actual function.
I have logged an enhancement request for the 2nd option but cannot tell you now if and when it will be implemented.
Best regards
Frank
Hi Frank.
Thank you so much for the reply!
I get this error in the Console:
dx.all.js?v=637575566018061750:52 Uncaught TypeError: n.customLoad is not a function
at t._loadState (dx.all.js?v=637575566018061750:52)
at t.load (dx.all.js?v=637575566018061750:52)
at dx.all.js?v=637575566018061750:52
The WebMethods are defined in the window where the dxDataGrid exists.
Ivan,
what error do you get? What´s the scope of your WebMethods?
Best regards
Frank
Please login first to submit.