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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

125108 Jul 21,2016 07:39 PM Jul 29,2016 07:59 AM JavaScript 3
loading
Tags: ejGrid
chinthaka wimalaratna
Asked On July 21, 2016 07:39 PM

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.

Dhivyalakshmi Thirumurugan [Syncfusion]
Replied On July 22, 2016 03:42 AM

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.   


chinthaka wimalaratna
Replied On July 28, 2016 02:08 AM

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.



Isuriya Rajan [Syncfusion]
Replied On July 29, 2016 07:59 AM

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   


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;