handsontable / nghandsontable Goto Github PK

does this work with the latest handontable version 0.11?

is the project stable or dead?

http://jsfiddle.net/gscoppino/Lgj51s9h/

Play around with the width attribute of hot-table.

Expected result: Handsontable width occupies specified space.

Actual Result: Handsontable width remains the same as it would have been without the width attribute.

This does not happen with Handsontable standalone, see:
http://jsfiddle.net/gscoppino/ob98xmqu/

Autocomplete field gives error: items is null, for the autocomplete field in the end row(spare row) or new row generated at bottom.

Hi,
Thanks for all your good work on ngHandsontable. I just started using experimenting with this library recently. You say you support all handsOnTable options. In the handsOnTable wiki, it describes 2 options as being available: minSpareCols and minCols.

When I attempt to set either of these (minSpareCols or minCols) on the hot-table directive, the settings have no effect (no extra columns are rendered above and beyond those in my datarows). I have not had similar issues using minSpareRows or minRows - these settings work as expected.

I've tried setting these both as part of the settings object and as an attribute on its own:

<hot-table settings="{minSpareCols: 20}" datarows="myDataRows" colHeaders="myColHeaders" columns="myColumns"></hot-table>

<hot-table minSpareCols="20" datarows="myDataRows" colHeaders="myColHeaders" columns="myColumns"></hot-table>

<hot-table settings="{minCols: 20}" datarows="myDataRows" colHeaders="myColHeaders" columns="myColumns"></hot-table>

<hot-table minCols="20" datarows="myDataRows" colHeaders="myColHeaders" columns="myColumns"></hot-table>

None of these approaches have worked. Would it be possible for support to be added for these options?

Many thanks.

Can you give more examples similar to the Jquery Project.

Basically we need examples related to loading data from one table to other similar to http://handsontable.com/demo/prepopulate.html

The link in the readme.md does not actually work.
http://ng-datagrid.handsontable.com/split-screen.html

Split-screen when you pull the project down does work.

Uncaught TypeError: Cannot call method 'call' of undefined angular-ui-handsontable.full.js:3052
runHooks angular-ui-handsontable.full.js:3052
applyChanges angular-ui-handsontable.full.js:2060
(anonymous function) angular-ui-handsontable.full.js:2113
(anonymous function) jquery.js:3019
fire jquery.js:2863
self.add jquery.js:2909
(anonymous function) jquery.js:3018
jQuery.extend.each jquery.js:590
(anonymous function) jquery.js:3014
jQuery.extend.Deferred jquery.js:3075
promise.then jquery.js:3013
setDataAtCell angular-ui-handsontable.full.js:2112
grid.populateFromArray angular-ui-handsontable.full.js:1196
onPaste angular-ui-handsontable.full.js:1697
(anonymous function) angular-ui-handsontable.full.js:6026

While doing a bower install it prompts me to select an angular version since its unable to resolve. I am kind of new to angular and I am not sure how to resolve this. No matter what i select i get strange errors such as "jquery is not defined",. Before the installation the application was running correctly without any errors. My bower,json looks like below

{
"name": "xxxx",
"version": "0.0.1",
"description": "xxxxx.",
"dependencies": {
"bootstrap": "~3",
"angular": "~1.2",
"angular-resource": "~1.2",
"angular-animate": "~1.2",
"angular-mocks": "~1.2",
"angular-bootstrap": "~0.11.0",
"angular-ui-utils": "~0.1.1",
"angular-ui-router": "~0.2.10",
"angular-strap": "~2.0.5"

}
}

Hi,

mergeCells ="true" settings has no effect in context menu.
mergeCells: [{row: 1, col: 1, rowspan: 3, colspan: 3}] does not merge cells.

http://jsfiddle.net/veyx8Lz1/2/

I'd like to implement a completely free-to-edit table just as Excel. So I set the "datarows" attribute and enable context menu by setting it to be true, but I find it not allow me to add a new column because the menu item is disabled. If I remove the "datarows" attribute, then I am able to insert a column, which, however, makes no sense to me because there is nothing bound to the table.

Is it a restriction of ngHandsontable or am I doing anything wrong?

I need to use dropdown inside hot-column to populate the array of values.
Please help in this case.

Hi,

It looks like the bower.json definition tagged as 0.5.1 is actually reporting as version 0.5.0. I notice that the version in master has been updated since to 0.5.1 and to include the latest version of angular.

I'm currently having dependency problems as 0.5.1 is trying to pull in a version of angular 1.2 rather than 1.3.

Could we get a v0.5.2 tagged which clears up these issues? For now I'm having to override the handsontable dependency with my own.

My bower config:

{
  "dependencies": {
    "angular": "1.3.*",
    "angular-ui-handsontable": "0.5.*"
  }
}

Output from bower:

Unable to find a suitable version for angular, please choose one:
    1) angular#~1.2.25 which resolved to 1.2.28 and is required by angular-ui-handsontable#0.5.1 
    2) angular#1.3.* which resolved to 1.3.13 and is required by app

Prefix the choice with ! to persist it to bower.json

Thanks

I would like to set the cell renderer with ngHandsontable..

How to do that ?!

when click the grid,it show the shadow.

Hi,

I was including your directive in another directive and saw that the table didn't get populated with data. After some analysis we concluded that it was due to scope.$parent was not available so we change a bit your code to:

if (!scope.htSettings) {
scope.htSettings = {};
}
var watchDataRows = scope.$watchCollection('datarows', function () {
scope.htSettings['data'] = scope.datarows;
scope.hotInstance = settingFactory.initializeHandsontable(element, scope.htSettings);
if (scope.htSettings.columns) {
for (var i = 0, length = scope.htSettings.columns.length; i < length; i++) {

                            if (scope.htSettings.columns[i].type == 'autocomplete') {
                                if (typeof scope.htSettings.columns[i].optionList === 'string') {
                                    var optionList = {};
                                    var match = scope.htSettings.columns[i].optionList.match(/^\s*(.+)\s+in\s+(.*)\s*$/);
                                    if (match) {
                                        optionList.property = match[1];
                                        optionList.object = match[2];
                                    } else {
                                        optionList.object = optionList;
                                    }
                                    scope.htSettings.columns[i].optionList = optionList;
                                }

                                autoCompleteFactory.parseAutoComplete(scope.hotInstance, scope.htSettings.columns[i], scope.datarows, true);
                            }
                        }
                        scope.hotInstance.updateSettings(scope.htSettings);
                    }
                });
                angular.extend(scope.htSettings, settingFactory.setHandsontableSettingsFromScope(htOptions, scope));


                scope.htSettings.afterChange = function () {
                    if (!$rootScope.$$phase) {
                        scope.$apply();
                    }
                };

                scope.$on('$destroy', function () {
                    watchDataRows();
                });

Moving the mouse over the table produces errors in console IE 11. In Chrome 42, MouseScroll on row header produces error, when the table cannot be scrolled anymore, like trying to scroll up.

I'm using the ngHandsOnTable, and downloaded the new version without the jQuery dependency.

I included the following files (latest version )handsontable.full.js, ngHandsontable.js and handsontable.full.css in my project along with angular.js (v1.3.3) and jquery-2.0.3.

I used the example template given in the readme to load a sample hands on table, but I'm unable to see any table. Neither can I find any errors or issues in the console?

Could someone update the documentation in order to provide more clarity as to how to load a sample nghandsontable?

Would be much appreciated!

Stops working when https://github.com/angular-ui/bootstrap added. Works fine before.

TypeError: Cannot read property 'settings' of undefined
at postLink (http://localhost:9000/assets/javascripts/lib/angular-ui-handsontable.full.js:152:56)
at nodeLinkFn (http://localhost:9000/assets/javascripts/lib/angular.js:4344:13)
at compositeLinkFn (http://localhost:9000/assets/javascripts/lib/angular.js:3953:15)
at nodeLinkFn (http://localhost:9000/assets/javascripts/lib/angular.js:4338:24)
at compositeLinkFn (http://localhost:9000/assets/javascripts/lib/angular.js:3953:15)
at publicLinkFn (http://localhost:9000/assets/javascripts/lib/angular.js:3858:30)
at http://localhost:9000/assets/javascripts/lib/angular.js:3947:30
at new ngDirective.controller (http://localhost:9000/assets/javascripts/lib/angular.js:13936:5)
at invoke (http://localhost:9000/assets/javascripts/lib/angular.js:2850:28)
at Object.instantiate (http://localhost:9000/assets/javascripts/lib/angular.js:2860:23)

I believe there's a minor syntax error in the ./dist CSS around Line 57 where there is an extra closing curly brace }

I was trying to integrate and test this with our product but it caused our build to fail. We use Twitter Recess/Bootstrap and LESS with our project and the CSS file causes the npm lessc compiler and/or Twitter Recess to fail with an obscure error, which seems to be caused by an extra }. Deleting what looks like an extra closing brace on Line 57 seems to fix the CSS Linting/compiling but haven't confirmed the change yet.

If I am able to confirm the issue and fix it I'll fork and submit a pull request. @warpech should I make that fix in this repo or the jquery-handsontable repo(or both)?

Wanted to post something here for others in case anyone else runs into a similar issue in the meantime. Sample error:

$ lessc angular-ui-handsontable.full.css > angular-ui-handsontable.test.css
ParseError: missing opening `{` in ./angular-ui-handsontable/dist/angular-ui-      handsontable.full.css:497:0
496 }

Hi,

Could you write up some documentation on how we can call specific methods?

e.g. getDataAtRow, loadData, alter , etc.

Thanks,
Johnny

.factory and .directive declarations are not minification friendly.

.factory('getHandsontableSettings', [function () {
.factory('getDatacolumnSettings', [function () {
.directive('uiHandsontable', ['$compile', '$rootScope', 'getHandsontableSettings', function ($compile, $rootScope, getHandsontableSettings) {
.directive('datacolumn', ['getHandsontableSettings', 'getDatacolumnSettings', function (getHandsontableSettings, getDatacolumnSettings) {
.directive('optionlist', ['getDatacolumnSettings', function (getDatacolumnSettings) {
.directive('selectedindex', ['getHandsontableSettings', function (getHandsontableSettings) {

I don't know yet if it's handsontable or angular-ui-handsontable bug, there is no example of moving columns with custom renderers in handsontable.

alexandergs commented 19 hours ago

I am getting this error in IE, but not in Chrome:

"Unable to get property 'length' of undefined or null reference."

The error also shows in their demo page. You can F12 to see the error as you simply moves the mouse:

http://handsontable.github.io/ngHandsontable/

source: handsontable/handsontable#2437

Normally we define the attributes like

How can we make this more dynamic like inserting the values from a scope varriable. I tried ng-attr-minSpareRows="{{minrows}}" but its not working.

Any guess.

look at the example:

http://jsfiddle.net/ab69qofc/2/

$scope.columns is not being passed into the directive, but it is somehow determining the columns that hot uses.

Maybe I'm missing something but the following doesn't work:

<hot-table rowHeaders="true"
        colHeaders="ctrl.colHeaders"
        minSpareRows="1"
        stretchH="all"
        datarows="ctrl.data"
        height="600"
        width="1500">
    <hot-column data="field" title="'Field'" type="'autocomplete'">
        <hot-autocomplete datarows="option in ctrl.options"></hot-autocomplete>
    </hot-column>
</hot-table>

I believe the error has to do with line 127 inside parseAutoComplete:

if (options.object) {
  if (angular.isArray(options.object)) {
    source = options.object;
  } else {
...
  }
}

options.object is a string converted from the hot-autocomplete directive. But it needs to be an array of objects? In the above example, right now

options.object = 'ctrl.options'

but it needs to be

options.object = [ 'option1', 'option2' ]

scrolling with the mouse works ok but is kinda jumpy.
However scrolling with trackpad scrolls way down to blank rows.

I saw one in the demo,
{value: 'item.Product.Description', type: 'autocomplete', title: 'Favorite food', width: 120, clickrow: 'item.Product.Description = option.Description', optionList: 'option in item.Product.Options', optionTemplate: ' {{option.Description}}'},

but I cannot fingure out how to do my own. mine is simple, pick up a number from 1~ 9, I tried below, but it doesn't work.
{value: 'item.Id', title: 'Id',type: 'autocomplete',source: '["1","2","3","4","5","6","7"]'},
any help is appreciated.

the original handsontable does support partial options:
https://github.com/warpech/jquery-handsontable
“Defines if the right-click context menu should be enabled. Context menu allows to create new row or column at any place in the grid. Possible values: true (to enable basic options), false (to disable completely) or array of available strings: row_above, row_below, col_left, col_right, remove_row, remove_col, undo, redo, sep1, sep2, sep3.”

But the angular-ui-handsontable only support true and false. Is there anyway to support the partial options? Thanks.

My ngHandsontable in my html is as such:

<div id="grid" ng-if="gridRows">
    <hot-table
        settings="{colHeaders: colHeaders, contextMenu: ['row_above', 'row_below', 'remove_row', 'undo', 'redo']}"
        rowHeaders="true"
        minSpareRows="1"
        startRows="5"
        datarows="gridRows">
       <hot-column data="frequency"    
            title="'Frequencies'"
        width="150">
       </hot-column>
        <hot-column data="level"
        title="'Levels"
        width="150">
       </hot-column>
    </hot-table>
</div>

Since gridRows is an empty array to start with, startRows has no effect. The expected behavior should be that if gridRows is empty, startRows is in effect and should display the desired 5 rows. If gridRows is not empty, then the implemented behavior should take precedent. Please enforce startRows if datarows is empty.

please
bower ngHandsontable no found
when I use bower install ngHandsontable

I setup a $timeout for updating data in datarow attribute but it doesn't work. I have to hack

scope.$parent.$watch(
    function () {
        var objKeys = attrs.datarows.split('.'),
            objToCheck = scope.$parent;

        while(objKeys.length > 0) {
            var key = objKeys.shift();
            objToCheck = objToCheck[key];
        }

        return angular.toJson([objToCheck]);
    },
    function () {
        settingFactory.renderHandsontable(scope.hotInstance);
    }
)

into

scope.$parent.$watch(
    function () {
        var objKeys = attrs.datarows.split('.'),
            objToCheck = scope.$parent;

        while(objKeys.length > 0) {
            var key = objKeys.shift();
            objToCheck = objToCheck[key];
        }

        return angular.toJson([objToCheck]);
    },
    function () {
        var objKeys = attrs.datarows.split('.'),
            objToCheck = scope.$parent;

        while(objKeys.length > 0) {
            var key = objKeys.shift();
            objToCheck = objToCheck[key];
        }
        scope.hotInstance.updateSettings({data: objToCheck});
    }
)

Did I do anything wrong?

TypeError: Cannot read property 'split' of undefined

is thrown in the $watch on the line:

var objKeys = attrs.datarows.split('.'),

I suspect this also causes the $watch to only work intermittently, as I am seeing the object bound to dataRows update sometimes but not always.

Since 7962acb when you removed the jQuery depenedency, there doesn't seem to be a way for me to get hold of the handsontable instance so I can callmethods (render(), destroy() etc) on it.

Before I was just getting the instance via container.data('handsontable') but now that jQuery is not being used this no longer exists.

I agree it is best not to use jquery inside this directive, I just wonder if there is a way to allow us to call methods on the instance in our controllers?

Hello,

I couldn't find how to activate the search plugin of Handsontable. Setting search: true in ngHandsontable hot-table declaration doesn't help since this option doesn't belong to Handsontable.DefaultSettings keys or Handsontable.PluginHooks.

The only workaround I found is to add a settings.search=true; line in the setHandsontableSettingsFromScope function.

Thanks.

Hi, @warpech

Is there any way attach ajax complete to angular-ui-handsontable?

I tried, but without success.

As of commit 6d61aa0,
uiDatagrid.settings.afterChange overrides function specified in afterChange attribute.

My current hack is to add
(scope.afterChange || angular.noop).apply(this, arguments);
on the first line of uiDatagrid.settings.afterChange function.

Is there a timeline for Angular 1.3 compatibility? It looks like there's an explicit 1.2 dependency:
https://github.com/handsontable/ngHandsontable/blob/master/bower.json#L5

Now when Handsontable 0.12.0 is released, ngHandsontable should not require jQuery to operate

Custom borders doesn't work.

Any plans to add this feature?

I have a object with below structure,
{
lossName: 'TEST 1',
lossType: "type",
lossNo: 1,
params: [
{val1: 1, val2: 2},
{val1: 1, val2: 2}
]
}

And I would like to show each attributes available in "params" array in separate column. i.e
params[0].val1, params[0].val2, params[1].val1 , params[1].val2

In the examples I see, which shows the possibility of using object available inside the main object. But I am not sure how to show the the array elements.

Can you please guide me.

Changing the setInterval.... bit in split-screen.js to

setInterval(function () {
if( $scope.dynamicColumns[0].title == 'ID') {
$scope.dynamicColumns.shift();
} else {
$scope.dynamicColumns.unshift({value: 'item.id', title: 'ID'});
}
$scope.$apply();
}, 3000);

Demonstrates the problem.

Documentation doesn't say you need to put ngHandsontable in the angular.module block. Also when i change datarows binding in the controller nothing works anymore because you cant load data via angular http in controller in the datarows binding variable, the scope.$parent.watch only check the scope of the table not the controller https://handsontable.com/demo/ajax.html

if we have something like that it won't work
columns="columns[dynamic.id]"

The fix is to add
Line 160
'$parse',
function (settingFactory, autoCompleteFactory, $rootScope, $parse) {

Line 227
// var settingKeys = columnSetting.split('.');
// while (settingKeys.length > 0) {
// var key = settingKeys.shift();
// settingToCheck = settingToCheck[key];
// }
// return angular.toJson([settingToCheck]);
return angular.toJson($parse(columnSetting)(settingToCheck));

Line 253 (after shift of lines inserted in 227)

// while(objKeys.length > 0) {
// var key = objKeys.shift();
// objToCheck = objToCheck[key];
// }
//
// return angular.toJson([objToCheck]);
return angular.toJson($parse(attrs.datarows)(objToCheck));

And it works for me

Thank you for this handsonTable

Handsometable supports validator property.

I don't think ngHandsometable does, or at least I cannot get validator to work by doing:

        <hot-column
          data="username"
          title="'Username'"
          validator="validate">
        </hot-column>

where validate is a function on the scope of the model.

Should validator work?

Could anyone provide a more advanced example not just using static data for the table as using data Form a rest service allways returns an empty table. Don't know how the correct binding can be setup

Hello! Our team are using nghandsontable in our Rails application. It works well under local development environment but when we switch to production environment, we got following error:
https://docs.angularjs.org/error/$injector/unpr?p0=eProvider%20%3C-%20e%20%3C-%20autoCompleteFactory%20%3C-%20hotTableDirective

We resolved the problem by making following changes.
(1) .factory('settingFactory'....)

Remove '[' and ']' which wraps the return{...}

(2) .factory('autoCompleteFactory'....)

Change

.factory( 'autoCompleteFactory', function (settingFactory) { ... })

to

.factory('autoCompleteFactory', ['settingFactory', function (settingFactory) {...}])

I hope the information will help.

On line 23735 I keep getting this error. I included all of the libraries, the hot-table template and the controller. I haven't touched any of the code, it just doesn't compile.

In angular，Usd Button assignment data to datarows，View not changing doesn't work

code
function ($scope) {
$scope.db = {};
$scope.db.items = [];

$scope.button=button;

function button()
{
var products = [ {"description": "Big Mac" }, {"description": "Bic" }];
$scope.db.items = products ;
}