handsontable / ngHandsontable

Official AngularJS directive for Handsontable
http://handsontable.github.io/ngHandsontable/
MIT License
433 stars 159 forks source link

all data rows not getting #240

Closed jnjagtap closed 5 years ago

jnjagtap commented 6 years ago

i am fetching data from api which has 25 rows.but i am getting output of only 5 rows.

AMBudnik commented 6 years ago

Did you log the data and check if there are the 25 records and not 5?

Can you share any demo?

jnjagtap commented 6 years ago

when i log data there are 25 rows but not getting as output of 25

AMBudnik commented 6 years ago

if adding renderAllRows with true values does not solve the issue please share a demo where it can be replicable?

jnjagtap commented 6 years ago

this is my js file

`import { appController, appInject } from 'ng-app'; import template from '!html!./view.html'; // import { DESTRUCTION } from 'dns'; // import BaseController from '../common/BaseController';

@appInject('$scope', '$injector', '$rootScope', 'APP_CONFIG', 'NotificationService', 'DialogService') @appController() class ViewController { constructor($scope, $ig, $rs, appConfig, ns, ds) { this.dataService = $ig.get('$http'); this.appConfig = appConfig; this.ns = ns; this.ds = ds; this.$scope = $scope; this.getdata(); var notEmpty; this.notEmpty= function (value, callback) { if (!value || String(value).length === 0) { callback(false); } else { callback(true); } } this.column=[{ data:"report_date", title:"'report_date'", type: "date",

}, 
{

  data:"delivery_status",
  title:"'delivery_status'",

},
{
  data:"placement",
  title:"'placement'",

},
{
  data:"package_product_name",
  title:"'package_product_name'",

},
{
  data:"pacing",
  title:"'pacing'"
},{
  data:"start_date",
   title:"'start_date'",
   type:"date"
},{
  data:"end_date",
   title:"'end_date'",
   type:"date"
}],

this.settings = {

  width: 600,
  height: 400,
  colWidths: 100,
  rowHeights: 15,
  contextMenu: true,
  contextMenu:['copy','paste','cut'],
  manualColumnResize: true,
  colHeaders: true,
  fixedRowsTop: 2,
  minSpareRows: 1,
  manualRowMove: true,
  manualColumnMove: true,
  filters: true,
  dropdownMenu: true,
  fixedColumnsLeft: 3,
  stretchH: 'all',
  className: "htCenter",

  cell: [
    { row: 0, col: 0, className: "htRight" },
    { row: 1, col: 1, className: "htLeft htMiddle" },
    { row: 3, col: 4, className: "htLeft htBottom" }
  ],
  afterSetCellMeta: function (row, col, key, val) {
    console.log("cell meta changed", row, col, key, val);
  },

}

}

getdata() { const req = { method: 'GET', url: '/api/csr', }; this.dataService(req).then(success => { console.log(success); // this.tblData = angular.copy(success.data); //console.log(this.tblData) this.data = success.data;

}, err => {
  if (error.status === 401) {
    this.ns.notify('error', 'Your session has expired', 'Session Expired');
    setTimeout(() => { window.location = '/login'; }, 1000);
  } else {
    this.ns.notify('error', 'Something went wrong, Please refresh your page', 'Server Error');
    console.log(error);
  }
});

}; }

export default { url: '/', template, controller: ViewController, controllerAs: 'vm' }; `this is my html file ``<!DOCTYPE html>

{{vm.appConfig.name}} Last Updated: {{vm.updatedAt}}

AMBudnik commented 6 years ago

Formatting gets broken - please add it in a demo. You can use this one as an example http://jsbin.com/razecoliye/edit?html,js,output

jnjagtap commented 6 years ago

https://github.com/handsontable/ngHandsontable/issues/141 i have same issue.i have tried ` this.hotRegisterer = $ig.get('hotRegisterer'); this.data = new Array(25)

getdata() { const req = { method: 'GET', url: '/api/csr', }; this.dataService(req).then(success => { console.log(success); this.hotRegisterer.getInstance('hotTable').loadData(success.data); };` but not aplicable grnerically

jnjagtap commented 6 years ago

since i am new to github so i don't know how to add demo so i gave info about what i did in my code.

AMBudnik commented 6 years ago

Hi @jnjagtap

Please just open this demo http://jsbin.com/razecoliye/edit?html,js,output change the code to yours and save it

save

jnjagtap commented 6 years ago

firstly ,i have tried http://jsbin.com/pekiqoweha/edit?html,js,output but data coming with only 5 rows then i tried http://jsbin.com/mexegarula/edit?html,js,output i have given jst an idea but this is not generic way. so how to retrive all data?

AMBudnik commented 6 years ago

Hi @jnjagtap can you recheck the demo? I do not get a loaded table in any of the examples.

jnjagtap commented 6 years ago

actully i am retriving data from api ,to which i have given route in my backend code so coz of that output is not coming if u want i can share output screenshot

jnjagtap commented 6 years ago

`getdata() { const req = { method: 'GET', url: '/api/csr', };

this.dataService(req).then(success => {

i got 4343 rows here ### console.log(success.data)

this.data=success.data;

}`

in html file ` <hot-table hot-id="hotTable" settings="vm.settings" row-headers="true" render-all-rows="true" datarows="vm.data" manual-row-move scroll-v="true" manual-column-move scroll-h= "true", manualColumnResize: "true"

`

now i am getting only this much rows while i have more than 700 rows in database

screenshot from 2018-07-12 15-34-41

jnjagtap commented 6 years ago

how to determine which value is assigning in hot table or it is getting correct value or not?

AMBudnik commented 6 years ago

Hi @jnjagtap

you can check how many of the rows are loaded via getSourceData() method. Do you get more rows when you scroll or edit the table?