angularjs - Angular Ui-Grid display List view on row expansion not a Subgrid and pass the selected row id and data -


i trying display list view on row expansion of ui-grid instead of sub-grid example when user clicks on expansion icon of row, instead of displaying subgrid want display list view, able point can call static list view within row unable pass data related row list

below working plunker http://plnkr.co/edit/pzl6ufwmg2h00sw36ftk?p=preview

this controller: 

angular.module('availability',['ui.grid', 'ui.grid.expandable', 'ui.grid.selection', 'ui.grid.pinning','angular.filter'])  angular.module('availability').controller('availability.ctrl',                                                     ['$scope','$log','$rootscope',     function($scope,$log,$rootscope){           var weeklyavailability = {};         $scope.gridoptions = {             expandablerowtemplate: 'availability.detailed.view.tpl.html',             expandablerowheight: 150,             expandablerowscope: {                 rowidtobepassed : weeklyavailability             },             columndefs: [                 { field: 'email' }             ],              onregisterapi: function (gridapi) {                 gridapi.expandable.on.rowexpandedstatechanged($scope, function (row) {                     if (row.isexpanded) {                          //the below come server once id of worker in selected row                         var testdata = [                             {                                 "availabilitydate": "2015-04-01t04:18:51.080z",                                 "availabilityday": "wednesday",                                 "availabilitystarttime": "2015-04-01t05:18:51.105z",                                 "availabilityendtime": "2015-04-02t03:18:51.110z",                                 "available": false,                                 "id": "551b71d8921933a6cbc90495",                                 "workerid": "5500d45b1d1dff783e895f72"                             },                             {                                 "availabilitydate": "2015-04-01t04:18:51.080z",                                 "availabilityday": "wednesday",                                 "availabilitystarttime": "2015-04-01t06:18:51.105z",                                 "availabilityendtime": "2015-04-01t05:18:51.110z",                                 "available": false,                                 "id": "551b71d8921933a6cbc90496",                                 "workerid": "5500d45b1d1dff783e895f72"                             }                         ];                          //i want pass data receive server expanded scope                          //the below subdata present in availability.detailed.view.tpl.html                         //cant figure out way pass testdata field subdata                         $scope.subdata = testdata;                         //row.entity.weeklyavailability.data = testdata;                     }                 });             }          };    var workers =  [           {             "email": "worker@worker.com",             "id": "5500d45b1d1dff783e895f72"           },           {             "email": "worker2@worker.com",             "id": "550368c058b17f6ca096e397"           }       ]          $scope.gridoptions.data = workers;       }]);

ui-grid uses isolated scope, when set $scope.subdata grid doesn't know it. can access controller's scope in template through grid.appscope property. show data:

<ul ng-repeat="(key, value) in grid.appscope.subdata | groupby: 'availabilityday'">

the problem you're using single scope variable rows, if have multiple rows expanded they'll show same data. there's couple ways properly:

  1. you pre-populate "sub-data" after fetch initial data set. that's how expandable grid tutorial it.
  2. however, looks want asynchornously fetch data when row expanded, in rowexpandedstatechanged need way data expanded row's scope. variable given row you'll have put on there. either in row or row.entity.

here's example:

<!-- expanded row template --> <ul ng-repeat="(key, value) in row.entity.subdata | groupby: 'availabilityday'"> 
// in rowexpandedstatechanged handler row.entity.subdata = testdata;

i've forked plunker show how might work. note i've added randomized availabilityday show each row having different values: http://plnkr.co/edit/wd9iwlzobdydivnedjjm?p=preview


Comments

Post a Comment

Popular posts from this blog

How to group boxplot outliers in gnuplot -

i have large set of data points. try plot them boxplot, of outliers exact same value , represented on line beside each other. found how set horizontal distance between outliers in gnuplot boxplot , doesn't much, apparently not possible. is possible group outliers together, print 1 point , print number in brackets beside indicate how many points there are? think make more readable in graph. for information, have 3 boxplots 1 x value , times 6 in 1 graph. using gnuplot 5 , played around pointsize, doesn't reduce distance anymore. hope can help! edit: set terminal pdf set output 'dat.pdf' file0 = 'dat1.dat' file1 = 'dat2.dat' file2 = 'dat3.dat' set pointsize 0.2 set notitle set xlabel 'x' set ylabel 'y' header = system('head -1 '.file0); n = words(header) set xtics ('' 1) set [i=1:n] xtics add (word(header, i) i) set style data boxplot plot file0 using (1-0.25):1:(0.2) boxplot lw 2 lc rgb '#8b0000...
Read more

cakephp - simple blog with croogo -

i not problem, made simple blog in croogo, problem is not adding or modifying or delete, because arabic language ?? function add in controller `public function admin_add() { $this->set('title_for_layout', __('add part')); if (!empty($this->request->data)) { $this->part->create(); if ($this->part->save($this->request->data)) { $this->session->setflash(__('the part has been saved'), 'default', array('class' => 'success')); $this->redirect(array('action' => 'index'));//, $this->part->id)); } else { $this->session->setflash(__('the part not saved. please, try again.'), 'default', array('class' => 'error')); } } }` => model `class part extends appmodel { public $name = 'part'; var $belongst...
Read more