Solved

Angular JS ng-Grid Help Required

Posted on 2014-01-22
7
4,116 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
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

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

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

Suggested Solutions

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
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…
Suggested Courses

734 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