• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4228
  • 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
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

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