TabComponent not displayed in DashboardLayoutComponent

[mehmet]

Hi

When I render TabComponent inside DashboardLayoutComponent Panel , it does not display tabcomponent. Browser shows blank screen

It works when I generate TabComponent without TabItemsdirective including div block inside. Can please advise?

import * as React from 'react';

import * as ReactDOM from 'react-dom';

import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';

import { DashboardLayoutComponent, PanelDirective, PanelsDirective } from '@syncfusion/ej2-react-layouts';

import "./index.css"

export default class ReactApp extends React.Component {

    constructor() {

        super(arguments);

        this.headerText = [{ text: "India" }, { text: "Australia" }];

    }

   

    content0() {

        return <div>

  India officially the Republic of India, is a country in South Asia. It is the seventh-largest country by area, the second-most populous country with over 1.2 billion people, and the most populous democracy in the world. Bounded by the Indian Ocean on the south, the Arabian Sea on the south-west, and the Bay of Bengal on the south-east, it shares land borders with Pakistan to the west;China, Nepal, and Bhutan to the north-east; and Burma and Bangladesh to the east. In the Indian Ocean, India is in the vicinity of Sri Lanka and the Maldives; in addition, India Andaman and Nicobar Islands share a maritime border with Thailand and Indonesia.

  </div>;

    }

    content1() {

        return <div>

  Australia, officially the Commonwealth of Australia, is a country comprising the mainland of the Australian continent, the island of Tasmania and numerous smaller islands. It is the world sixth-largest country by total area. Neighboring countries include Indonesia, East Timor and Papua New Guinea to the north; the Solomon Islands, Vanuatu and New Caledonia to the north-east; and New Zealand to the south-east.

  </div>;

    }

 

   

 

    alertDetailsTemplate () {

        return (<div>

        <TabComponent ref={(tab) => { this.firstTabObj = tab; }} id='firstTab' >

            <TabItemsDirective>

                <TabItemDirective header={this.headerText[0]} content={this.content0}/>

                <TabItemDirective header={this.headerText[1]} content={this.content1}/>

                </TabItemsDirective>

        </TabComponent>

       

    </div>);

    }

    render() {

        return (

          <div>

            <div id="edit_target" className="control-section">

              <DashboardLayoutComponent id="dashboard_default"   ref={s => (this.dashboardObj = s)} style="display:block;height:100%;width:100%"

               allowResizing={true}>

                <PanelsDirective>

              <PanelDirective sizeX={10} sizeY={2} row={0} col={0} content={this.alertDetailsTemplate} header="<div class='header'>Product usage ratio</div>"/>

               

               </PanelsDirective>

              </DashboardLayoutComponent>

            </div>

          </div>

        );

      }

}

ReactDOM.render(<ReactApp />, document.getElementById('root'));

[LeoLavanya Dhanaraj]

Hi Mehmet,

Greetings from Syncfusion support.

We have validated your reported issue with the Dashboard component in React platform. But we were not able to replicate the reported issue. Based on your requirement, we have prepared a sample of Tab component inside the Dashboard Layout. For your reference, we have attached sample in latest version(V20.2.49).

Sample : https://stackblitz.com/edit/react-zx7ybq-4wxrax?file=index.js

Check the attached sample and if the issue still persists, reproduce the issue in our shared sample. Also, share the exact package version that have been used at your end. If possible, please provide the issue replicated video footage. These details will help us to check and provide a prompt solution.

Please get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[mehmet]

Hi Lavanya

hope you are good. I copied all the files from your example, but my project still shows blank screen. I am attaching zip file(except node_modules) for your perusal

I deleted node_modules, package-lock.json files then performed npm install again. but it didnt work as well.

Regards

Mehmet

Attachment: test4_25073a33.zip

[LeoLavanya Dhanaraj]

Hi Mehmet,

We have validated your reported issue in the React Dashboard Layout component. The mentioned issue is occurred due to the improper DOM rendering and missing style sheet references. To overcome the issue, you need to set the proper DOM rendering element id and map the stylesheet references in the corresponding CSS file. For your reference, we have attached the modified sample.

Check the below mentioned code snippets.

[index.css]

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../node_modules/@syncfusion/ej2-react-navigations/styles/material.css';

@import '../node_modules/@syncfusion/ej2-react-layouts/styles/material.css';

 

.container{

  margin: 20px;

}

 

[index.js]

import ReactDOM from 'react-dom/client';

…

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Default />);

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/TabInsideTheDashboard1716681548.zip

Refer to the below mentioned links to know more about React Tab and Dashboard Layout component.

https://ej2.syncfusion.com/react/documentation/dashboard-layout/getting-started/

https://ej2.syncfusion.com/react/documentation/tab/getting-started/

Please check the attached sample and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj