How to configure a dxDataGrid Master-Detail

Answered
0
0

Hi.

Could you guys give me some directions on how to accomplish a Master-Detail with the DevExtreme dxDataGrid Extension?
It looks like I have hit a brick wall when I need to add a “function” in the wrapper Options. I have another thread here in the forum where I needed to set customLoad and customSave for the stateStoring and haven’t been able to accomplish that either. This is the Master-Detail sample I need to work on:

https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/MasterDetailView/jQuery/MaterialBlueLight/

Would it be possible to have a simple sample having a Wisej form showing this grid?

Thanks in advance.

Ivan
(Wisej 2.2.46.0 – VS 2019 – C#)

Share
  • You must to post comments
Filter
Sort by: Recently Active
Best Answer
0
0

Here is the dxDataGrid sample demonstrating how to use the Master-Detail view. Please update the DevExpress extension library from GitHub.

The detail grid’s structure is defined in the template within the WidgetFunction.

The detail and master grids are both populated using service URLs (uses widget WebRequest handler) that feeds the data from two JSON files.

The detail grid’s cellClick is attached to the Wisej application and called “childCellClick”. See the format for attaching detail grid events in the WidgetFunction.

The detail grid is saved within the master widget’s context (client-side format: this.id_widgetId_detail_rowNumber, i.e. this.id_3_detail_1).

CustomSave and CustomLoad function initializers are now added too, used like this:

this.dxDataGrid1.Options.stateStoring = new
 {
 customLoad = "myWidgetFunctionName1",
 customSave = "myWidgetFunctionName2"
...
 };

If you have any questions or issues with the sample, please let me know!

 

Best regards,

Levie

Attachment
Wisej.DXMasterDetailViewSample.zip
  • Ivan Borges
    This is amazing! I will have a look at it. I am trying to PULL your changes but nothing is coming…
  • Ivan Borges
    All fine. I had a conflict in the dxDataGrid.js. Merged yours and re-wrote my stuff.
  • You must to post comments
0
0

WOW, Levie!

Your sample is great. It will help immensely.

Thank you so much.

  • You must to post comments
0
0

Hi Levie.

I have a feeling you haven’t added dx.aspnet.data.js to the GitHub repository:

Getting the error in the Console:

qx.js?v=2.2.52.0:86735 GET http://localhost:64780/resource.wx/Wisej.Web.Ext.DevExtreme/Wisej.Web.Ext.DevExtreme.DevExtreme/js/dx.aspnet.data.js?v=637595201744946203 net::ERR_ABORTED 404 (Not Found)

  • You must to post comments
0
0

Hi Luca.

Thanks for the reply.

Yep, I understood your sample, I just can’t figure out how to add a second dxDataGrid, set its datasource to an Array Class I have in the server, and tell the Master this is to be returned from its call to the MasterDetail template function.

I will see what we can do.

  • Luca (ITG)
    You cannot add a Wisej control in the template because the way the master/detail works in dxgrid is to replicate the HTML template so you don’t have a server object, it all depends on the master. You can use the PostbackUrl() or ServiceUrl() for the detail exactly the same way you do for the master, just add a parameter that lets the server code know to return the data for the detail.
  • Ivan Borges
    OK, I will need a couple of lives for this one.
  • mgmst
    • mgmst
    • Jun 8, 2021 - 5:52 pm
    Wi do not intend to ad a Wisej controls. DX Grid is whole JS object, with which your integration solution made a bridge. Once created as widget DXGrid is part of JS content of the Document or Application object. I am not sure. I am not expert in JS. We was able to see this scenario in PDF export of the grid case. What we intend is to create two independent DXGrid true Wisej widgets, and after that to bound some how in JS code detail DXGrid to the master DXGrid. I thing it is a matter of several rows of JS code. But we can’t manage that, because we are not JS familiar. Also we need to know how to set ID to each component (DXGrid) in order to cite it in JS code to get it’s instance. As it was the main problem in the PDF export of the grid case.
  • Luca (ITG)
    Will upload a sample in the next days,
  • Ivan Borges
    OMG!
  • You must to post comments
1
0

It was in the sample I have attached to the other replies. Click the arrow next to the row and you get the HTML for the detail table. Look at the WidgetFunctions and you will find a getMasterDetailTemplate() javascript function where you can add all the javascript you see in the devex samples. It get complicated but it’s the way all third party widjets work. If you need more targeted development we have support packages that are available at sales@wisej.com.

Attachment
image.png image.png
  • You must to post comments
Showing 5 results
Your Answer

Please first to submit.