We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
WEBINAR  Visualize Customer Survey Reports Using Our React 3D Circular Charts Control —Thursday, May 02, 10:00 A.M. ET REGISTER NOW
close icon
  1. Home
  2. Forum
  3. jQuery
  4. How to add grid control dynamically in to the Tab (ejTab) control tab.

How to add grid control dynamically in to the Tab (ejTab) control tab.

Hi, I have a requirement of building page with tab controller and inserting tabs dynamically using a data set. When creating the tabs I want to insert Grid control in to the each Tab I'm creating. I found the following example which I can create dynamic tabs and insert html content.  https://www.syncfusion.com/forums/116227/create-tab-dynamically  But in this example it only insert static html tags to the page. I want to insert Grid control with data in to the tab.

3 Replies
DT Dhivyalakshmi Thirumurugan Syncfusion Team July 22, 2016 07:42 AM UTC

Hi Chinthaka,   
  
Thanks for contacting Syncfusion support.   
  
We can add the tab dynamically by using addItem() public method of Tab control. And the method has the option to set the tab id for the new tab. On using that tab id, we can add the grid to the content of the newly added tab. Please find the code below code example.   
  
To add the New tab item Dynamically:   
  
<code>    
          var tabObj = $("#defaultTab").data("ejTab");   
          tabObj.addItem("#new", "New Tab", 2, "myClass", "newItem");   
</code>   
  
  
To insert the grid into the newly added tab item:   
  
$("#newItem").ejGrid({   
              dataSource: dm,   
              allowPaging:true,   
              columns: ["OrderID", "EmployeeID", "CustomerID", "ShipCountry", "Freight"]   
});   
  
  
In the above code, we have inserted the new tab dynamically by using addItem() method and passed “newItem” as tab id to the argument of the method. And using that tab id, we have rendered the grid and by default, it will be inserted to the tab content on matching the tab id.   
  
We have prepared the sample based on your requirement. Please find the sample link below.   
  
                         
Other References:   
  
  
Please let us know if you need any further assistance.   
       
Regards,   
Dhivyalakshmi.   


CW chinthaka wimalaratna July 28, 2016 06:08 AM UTC

Hi Dhivyalakshmi, 
   Thank you for the sample code and it was really helpful. Once I implemented the dynamic tabs and grids inside tabs I have a requirement of calling angular control function from the grid template which I have defined. But its not firing. My template is like this.

<script id="templateData" type="text/ng-template">
      <a ng-click="$parent.vm.message()">click</a>
.....

I have set this template as grid row template. Message() is a angularjs function defined in the controller. Could you please help me to resolve this.

Thanks & Regards,
Chinthaka.



IR Isuriya Rajan Syncfusion Team July 29, 2016 11:59 AM UTC

Hi Chinthaka,      
   
We have created a sample using ng-click event. Here, while we press the click anchor tag, ng-click event will be triggered and alert will be displayed.   
   
<body ng-controller="PhoneListCtrl">   
      
    <div id="grid" ej-grid e-datasource="data" e-columns="col" e-allowpaging="true" e-toolbarsettings-showtoolbar='true' e-toolbarclick="toolbarHandler" e-toolbarsettings-toolbaritems='toolbar' e-editsettings-allowdeleting=' true' e-editsettings-allowediting='true' e-editsettings-allowadding='true'></div>   
   
 <script type="text/javascript">   
      angular.module('listCtrl', ['ejangular'])   
        .controller('PhoneListCtrl', function ($scope) {   
            var obj = [{ "OrderID": 1, "CustomerName": "Davolio" },   
                       { "OrderID": 2, "CustomerName": "Nancy" },   
            ];   
            $scope.data = obj;   
            $scope.export = function () {   
                //alert displayed   
                alert("Event triggered");   
            }   
            $scope.toolbar = ["add", "edit", "delete", "update", "cancel"]   
            $scope.col = [   
                          { "field": "OrderID", "headerText": "OrderID", "textAlign":"right", "isPrimaryKey": true, "width": 90 },   
                          { "field": "CustomerName", "headerText": "CustomerName","width": 90 },   
                          { "filed": "TestColumn", "headerText": "Test Column","template": "true", "templateID": "#actionTemplate", "textAlign": "right", "width": 90 }   
            ]   
        });   
    </script>   
    <script type="text/ng-template" id="actionTemplate">// ng-click inside a ng-temaplate   
        <a rel='nofollow' href="#" id="Template" ng-click="$parent.export()">Click</a>   
    </script>   
  
   
Please refer to the below sample,  
   
   
Regards,   
Isuriya R   


Loader.
Live Chat Icon For mobile
Up arrow icon