Solved

Angular JS ng-Grid Help Required

Posted on 2014-01-22
7
3,950 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
Question by:myselfrandhawa
  • 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 15

Author Comment

by:myselfrandhawa
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 26

Expert Comment

by:EddieShipman
ID: 39812190
0
 
LVL 15

Accepted Solution

by:
myselfrandhawa 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 15

Author Comment

by:myselfrandhawa
ID: 39832345
Any update on this, experts
0
 
LVL 15

Author Closing Comment

by:myselfrandhawa
ID: 39968783
I solved it by hit and trail, Thanks
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

707 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now