Solved

Angular JS ng-Grid Help Required

Posted on 2014-01-22
7
4,055 Views
Last Modified: 2014-04-01
Hi, I am working on Angular JS Grid Functionality, Here is the example i am following:

http://plnkr.co/edit/c8mHmAXattallFRzXSaG?p=preview

The two things i am missing here and want to implement.

1. Create a link on the name.
2. Click on the name and open a New ng-grid in new Tab [Tab1], so i can again make any call to load the json data for that specific record

I know i am asking too much, but this is something i am working on and need some guidance

regards
0
Comment
  • 4
  • 3
7 Comments
 
LVL 26

Expert Comment

by:EddieShipman
ID: 39807033
To get an anchor on the name, change your coldefs for the column to this:
      {field:'name',headerCellTemplate: 'filterHeaderTemplate.html', cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a href="javascript:openNew(\'{{row.getProperty(col.field)}})\'">{{row.getProperty(col.field)}}</a></div>'},

Open in new window


Then write a new function called openNew() that opens a new tab with the URL of a template with an ng_grid on it and send the parameter to the new tab in the URL.
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 39811248
Hi, Thanks for the Update.  But it is adding a link to all the fields, I just want to apply to the second column, i tried it like this


      {field:'name',headerCellTemplate: 'filterHeaderTemplate.html', cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a href="javascript:openNew(\'{{row.getProperty(col.field[1])}})\'">{{row.getProperty(col.field[1])}}</a></div>'},

but it shows the data in the firebug but does not show in the grid then?

Can i implement jqueryUI Tabs with it, if you give an example, that would be awesome as a headstart for me
0
 
LVL 26

Expert Comment

by:EddieShipman
ID: 39812184
Sorry, but your original plunk was not adding the link. The code I showed you adds the link and it shows as a link (with underlines) in Chrome, FF and IE.

Also, I am not familiar with working with jQueryUI tabs so I do not know how to create a new tab and open it.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 26

Expert Comment

by:EddieShipman
ID: 39812190
0
 
LVL 16

Accepted Solution

by:
Gurpreet Singh Randhawa earned 0 total points
ID: 39812390
Here is an Update to my Code:

I am working on the Case where I have implemented Partial Functionality of Displaying the Grid inside the Tabs, Using Bootstraps UI tabs..

Issues I am Facing, Clicking on Link, I can Open the Tabs.

Trying to make the ajax call when a link is clicked from 1st grid which is inside the Tab1 as the default one and always visible to load another another grid in the New Tab.

The new opened Tab will be cloable like showing an X button to close [X].

Here is my Try so far
<div tabs>
              <div ng-repeat="tabInfo in tabManager.tabItems" pane title="{{tabInfo.title}}">
                <div class="gridStyle" ng-grid="gridOptions"></div>
              </div>
            </div> 

$scope.tabManager = {};
    $scope.tabManager.tabItems = [];

$scope.tabManager.resetSelected = function(){
        angular.forEach($scope.tabManager.tabItems, function(pane) {
            pane.selected = false;
        });
    };

    $scope.tabManager.addTab = function(){
        $scope.tabManager.resetSelected();
        var i = ($scope.tabManager.tabItems.length +1);
        $scope.tabManager.tabItems.push({
            title: "Tab " + i,
            content: "Lores sum ep sum news test [" + i +"]",
            selected: true
        });
    };

    $scope.tabManager.select = function(i) {
        angular.forEach($scope.tabManager.tabItems, function(tabInfo) {
            tabInfo.selected = false;
        });
        $scope.tabManager.tabItems[i].selected = true;
    }

    //add few tabs
    for(var i = 1; i < 2; i++){
        $scope.tabManager.tabItems.push({
            title: "Tab " + i,
            content: "Lores sum ep sum news test [" + i +"]",
            selected: false
        });
    }

    // init the first active tab
    $scope.tabManager.select(0);

    $scope.tabManager.deleteTab = function (id) {
        $scope.tabManager.tabItems.deleteTab(id);
    };

app.directive('tabs', function() {
    return {
        restrict: 'A',
        transclude: true,
        scope: {},
        controller: function($scope, $element) {
            var panes = $scope.panes = [];

            $scope.select = function(pane) {
                angular.forEach(panes, function(pane) {
                    pane.selected = false;
                });
                pane.selected = true;
            };

            this.addPane = function(pane) {
                if (panes.length === 0) $scope.select(pane);
                panes.push(pane);
            };
            this.deleteTab = function (pane) {
                $scope.ondelete({pane:id});
            }
        },
        template:
            '<div class="tabbable">' +
                '<ul class="nav nav-tabs">' +
                '<li ng-repeat="pane in panes" ng-class="{active:pane.$parent.tabInfo.selected}">'+
        '<a href="" ng-click="pane.$parent.tabManager.select($index)">{{pane.title}}</a>' +
                '</li>' +
                '</ul>' +
                '<div class="tab-content" ng-transclude></div>' +
                '</div>',
        replace: true
    };
});
app.directive('pane', function() {
    return {
        require: '^tabs',
        restrict: 'A',
        transclude: true,
        scope: { title: '@' },
        link: function(scope, element, attrs, tabsCtrl) {
            tabsCtrl.addPane(scope);
        },
        template:
            '<div class="tab-pane" ng-class="{active: $parent.tabInfo.selected}" ng-transclude>' +
                '</div>',
        replace: true
    };
});

Open in new window

0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 39832345
Any update on this, experts
0
 
LVL 16

Author Closing Comment

by:Gurpreet Singh Randhawa
ID: 39968783
I solved it by hit and trail, Thanks
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question