jQuery Sparkline in a cell in ng-grid using CellTemplate and Directive

» angularjs » jQuery Sparkline in a cell in ng-grid using CellTemplate and Directive

By : zhao rufei

Date : November 24 2020, 05:47 AM

This might help you I am trying to bring jQuery Sparkline at each row in one cell in ng-grid. The column contains numeric array data. , Use this celltemplate:

code :

Share :

Using ng-switch in angularjs directive and using that directive in ng-grid cellTemplate

By : Kaycee Anderson

Date : March 29 2020, 07:55 AM

it should still fix some issue In your cellTemplate change myData to my-data. When using angular directives camel case is converted to dash case automatically by the angular library.
For example if you have a directive element defined as "mySuperAwesomeDirective". It would be declared in html using the following.

AngularJS ui-grid issue with directive in cellTemplate

By : Mandy

Date : March 29 2020, 07:55 AM

will be helpful for those in need So from the scope that the cellTemplate gets compiled, you are many miles deep in scopes and your function dropdowncombo does not exist. That is why you get undefined. From that scope, Your dropdowncombo function is actually $parent.$parent.$parent.$parent.$parent.$parent.dropdowncombo. Now I would never suggest you use that so you should engineer an alternate way to pass you scoped function from that cell template.
To view your plunker working, change line 20 of app.js to

code :

width: 200, cellTemplate: '<dropdowncss item="row.entity[col.field]" do-drop="$parent.$parent.$parent.$parent.$parent.$parent.dropdowncombo"></dropdowncss>'

{
     name: 'item', displayName: 'Status',
     handleClick: $scope.dropdowncombo, 
     width: 200,  
     cellTemplate: '<dropdowncss item="row.entity[col.field]" do-drop="col.colDef.handleClick"></dropdowncss>'
}

ui-grid : directive as cellTemplate

By : onurfıdda

Date : March 29 2020, 07:55 AM

This might help you Checking the documentation for custom row templates we can see that the row object is accessible from row templates, for example: grid.appScope.fnOne(row). Following the example and trying to run this, the row object is logged to console. row contains the entity key and this is where the row data is stored.
You are very close with your example, you just need to replace tag in tags with tag in row.entity.tags and rename your directive to not contain a dash (since I haven't worked with directives before and being on my first cup of coffee, I also got stuck at this for a while, dashes in directive names does not parse).

code :

var testApp = angular.module('testApp', ['ui.grid']);

testApp.directive('directivetags', function() {
  return {
        restrict: 'E',
        template: '<div>{{tag.label}}<img ng-src={{tag.image}}></div>',
        replace: true
    }
});

testApp.controller('TestCtrl', function($scope) {

  $scope.grid = {
    rowHeight: 50,
    data: [{
      name: 'Test',
      tags: [{
        label: 'Suwako Moriya',
        image: 'http://i.imgur.com/945LPEw.png'
      }]
    }],
    columnDefs: [
          { field: 'name'},
          { field: 'tags',
            cellTemplate: '<div style="height: 50px" ng-repeat="tag in row.entity.tags"><directivetags></directivetags></div>'
          }
    ]};
});

Custom directive doesn't get updated inside cellTemplate of ui-grid

By : Damian Dudziec

Date : March 29 2020, 07:55 AM

this will help The directive gets compiled once! You need to watch the attribute or set a two way binding!

code :

app.directive('flag', function() {
  var flags = {
    USA: 'https://github.com/hjnilsson/country-flags/raw/master/png100px/us.png',
    CANADA: 'https://github.com/hjnilsson/country-flags/raw/master/png100px/ca.png'
  };

  return {
      restrict: "A",
      scope: {
          flag: "@"
      },
      link: function(scope, elem, attrs) {
          scope.$watch('flag', function(newValue, oldValue){
              angular.element(elem).attr('src', flags[newValue]);
          });
      }
  };
});

Directive rendered via UI-Grid cellTemplate rendering incorrectly

By : Gottfried

Date : March 29 2020, 07:55 AM

With these it helps It looks like during sort values of the expression you pass to directive change, but the expression itself stays the same.
You should change scope & expression binding to = value binding (and access the value with scope.installs, without function call), then you will be able to track the changes.