Unable to enter a "function" in a DevEx dxDataGrid Options editor

Answered
0
0

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#)

  • You must to post comments
Best Answer
0
0

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:

  • Add a WidgetFunction Name=”test”
  • In Options, set the function using the name: options.masterDetail.template: “test”.

 

  • You must to post comments
0
0

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.

  • You must to post comments
0
0

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

Attachment
  • Luca (ITG)
    Yes, it’s the very first message I wrote about filterOptions. You need to convert the string to a function on the client in the dx integration code.
  • You must to post comments
0
0

Download the latest devexpress extension from github, it includes the code I mentioned above so you can see how to add more.

  • Ivan Borges
    Brilliant! I will do it. Thank you.
  • You must to post comments
0
0

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.

  • You must to post comments
0
0

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

  • You must to post comments
0
0

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.

  • Frank (ITG)
    I´d suggest you try first with a javascript function for customLoad and customSave. There you could call the WebMethods. If it does not work, you might want to wrap up a small test case. Best, Frank
  • You must to post comments
0
0

Ivan,

what error do you get? What´s the scope of your WebMethods?

Best regards
Frank

  • You must to post comments
Showing 8 results
Your Answer

Please first to submit.