Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4200
  • Last Modified:

Angular JS ng-Grid Help Required

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
Gurpreet Singh Randhawa
Asked:
Gurpreet Singh Randhawa
  • 4
  • 3
1 Solution
 
Eddie ShipmanAll-around developerCommented:
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
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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
 
Eddie ShipmanAll-around developerCommented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Eddie ShipmanAll-around developerCommented:
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
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
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
Any update on this, experts
0
 
Gurpreet Singh RandhawaWeb DeveloperAuthor Commented:
I solved it by hit and trail, Thanks
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now