Dashboard Layout Control with forms inside a tab

[Fanis Kar]

Hi Syncfusion,

Is it possible to add a form inside a “Dashboard Layout Control” and all these inside a tab?

Can you help me achieve this task?

Thanks
Fanis

[Sowmiya Padmanaban]

Hi Fanis,  

 

Greetings from Syncfusion component. 

 

We have checked your requirement with DashboardLayout component. We would you like to let you know that DashboardLayout is an independent component. You can able to render any component inside the DashboardLayout component (Foe example: chart, Grid, TextBox). 

 

In DashboardLayout component, “e-panel-header” class denotes the header element of DashboardLayout. “e-panel-content” class denotes the content of DashboardLayout panel. 

 

Refer the below code snippet. 

 

<ejs-dashboardlayout id="editableLayout" columns="4"> 

                        <e-dashboardlayout-panels> 

                            <e-dashboardlayout-panel sizeX="1" sizeY="1" row="0" col="0"> 

                                <e-content-template> 

                                    <div> 

                                        <div class="e-panel-container"> 

                                            <div class="e-panel-header"> 

                                                <div> 

                                                    Form control 

                                                </div> 

                                            </div> 

                                            <div class="e-panel-content"> 

                                                <form id="form-element" style="padding:20px"> 

                                                    <div> FirstName</div> 

                                                    <ejs-textbox id="firstname" placeholder="First Name" width="200px" floatLabelType="Auto"></ejs-textbox> 

                                                    <div> Mobile Number</div> 

                                                    <ejs-textbox id="mobilenumber" placeholder="Enter Mobile Number" width="200px" floatLabelType="Auto"></ejs-textbox> 

                                                    <div><ejs-button id="submit_btn" content="Button"></ejs-button></div> 

                                                </form> 

                                            </div> 

                                        </div> 

                                    </div> 

                                </e-content-template> 

                            </e-dashboardlayout-panel> 

                        </e-dashboardlayout-panels> 

                    </ejs-dashboardlayout> 

 

Refer the below link to know more about the rendering the components in DashboardLayout. 

 

https://ej2.syncfusion.com/aspnetcore/DashboardLayout/EditableLayout#/material 

 

https://ej2.syncfusion.com/aspnetcore/documentation/dashboard-layout/panels/setting-header-of-panels/#placing-components-as-content 

 

For your reference, we have rendered a DashboardLayout inside the Tab component. Refer the sample link below. 

 

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

 

To know more about the DashboardLayout component, refer the below link. 

 

UG Documentation- https://ej2.syncfusion.com/aspnetcore/documentation/dashboard-layout/getting-started/ 

 

Demo link-https://ej2.syncfusion.com/aspnetcore/DashboardLayout/SEOAnalytics#/material 

 

API reference-https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Layouts.DashboardLayout.html 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P