Tab & Grid

[TheDarkBoz]

Hello

Sorry but I dont find how use tab and grid together.
I want to have 1 grid by tab item.
Do you have any exemple?

Thanks you

Best Regards

[Balaji M]

Hi TheDarkBoz, 

 

Thanks for contacting Syncfusion support. 

 

Yes, it is possible to use the Grid inside the Tab item. This can be achieved by simply rendering the Grid control in a separate <div> element with style as “display:none”. And then refer the element’s id to the Tab item’s content as template. Please refer to the following code. 

 

 

 

//separate div 

 

<div id="SampleGrid1" style="display:none"> 

 

    <ejs-grid id="Grid"> 

        <e-datamanager url="http://js.syncfusion.com/ejServices/Wcf/Northwind.svc/Orders/?$top=7" adaptor="ODataAdaptor" crossdomain="true"></e-datamanager> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column> 

            <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column> 

            <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column> 

            <e-grid-column field="OrderDate" headerText="Order Date" format='yMd' textAlign="Right" width="140"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

 

</div> 

 

// Tab control  

 

<div style="height:300px"> 

    <div class="e-sample-resize-container"> 

 

        <ejs-tab id="ej2Tab"> 

            <e-tab-tabitems> 

                <e-tab-tabitem header="tabHeaderOne" content="#SampleGrid1"></e-tab-tabitem> 

                <e-tab-tabitem header="tabHeaderTWo" content="#SampleGrid2"></e-tab-tabitem> 

                <e-tab-tabitem header="tabHeaderThree" content="#elementThree"></e-tab-tabitem> 

            </e-tab-tabitems> 

        </ejs-tab> 

    </div> 

</div>  

 

 

We have also prepared a sample below for your reference. 

 

http://www.syncfusion.com/downloads/support/forum/137360/ze/ej2coreApplication-1953681940 

 

 

Please check the shared details, sample and let us know if you have any further queries.    

 

Regards, 

M. Balaji