(docs) Broken live demo in quite many examples

Question

Hello,Since a couple of days I am working my way to implement the datagrid on a slotion. So far I am liking a lot the framework and the documentation, however sometimes the documentation live examples is apparently broken as it doesn't load the grid as it should. Unfortunately sometimes the description of the features doesn't make justice to explain a complex feature or functionality, so a broken live demo is quite an issue.Example of link:https://ej2.syncfusion.com/react/documentation/grid/how-to/use-wizard-like-dialog-editing/The same thing happened to most of the examples (but not all of them). Refrshing the page doesn't help

Shalini Maragathavel · Accepted Answer

Hi Vrescobar, 
Thanks for contacting Syncfusion support. 
We checked the documentation and we can able to reproduce the mentioned issue in the documentation. So, we have logged a documentation task and it will be refreshed in online in any of our upcoming releases.  
For your convenience we created a sample for wizard like dialog editing. Please find the sample from the below link, 
Sample: https://stackblitz.com/edit/react-tsx-grid-677zrl?file=index.tsxPlease get back to us if you need further assistance. 
 
Regards, 
Shalini M.

vrescobar · Answer

Thank you, that was a fast reaction!

Shalini Maragathavel · Answer

Hi Vrescobar, 
Thanks for the update. 
We are happy to hear that your issue has been resolved. 
Please get back to us if you need further assistance. 
Regards, 
Shalini M.

vrescobar · Answer

Hello Again Shalini,I've been trying the example and in spite of compiling I always get some issues with the toolbar out of place and some confirmation buttons (ok and cancel) flaoting in the wrong place (see the first screenshot). Tired of that I ended copying the example you just provide me and it has the very same issue (see image bellow).Have you seen that before? any idea what could be failing? I am literally using the code as it was on the link you provided me, I also updated all NPM packages to the latest version but it makes no difference. Any help is welcome.My own code:The example you provided me:

Shalini Maragathavel · Answer

Hi Vrescobar, 

Thanks for the update. 

We checked your query and would like to let you know that your reported problem occurs if the style files for the Grid component are not properly referenced. If you have used the online CDN link, then please make sure you are referring this latest version link. And if you have referenced individual theme files from node modules then please ensure if you have referenced the below theme files, 





@import '../node_modules/@syncfusion/ej2-base/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';   
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; 
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; 
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; 
@import "../node_modules/@syncfusion/ej2-react-grids/styles/material.css"; 

If you have referenced them please make sure they are loaded properly in your launched application. 

Please refer the below Sample for your reference, 

Sample: https://stackblitz.com/edit/react-aexjyj-gptbnd?file=index.js 
Documentation: https://ej2.syncfusion.com/react/documentation/grid/getting-started/#adding-css-reference 

Let us know if you have any concerns. 

Regards, 
Shalini M.