swimlane / angular-data-table

A feature-rich but lightweight ES6 AngularJS Data Table crafted for large data sets!
http://swimlane.github.io/angular-data-table/
MIT License
577 stars 142 forks source link

Link inside row #38

Open maxtechera opened 9 years ago

maxtechera commented 9 years ago

Cant navigate clicking a link inside the rows. Placing a "A" tag with either href or s-ref leads to the same result.

Also, if you click inside the table, hitting F5 to refresh doesnt work.

It looks like its preventing or something like that.

amcdnl commented 9 years ago

Can you provide a demo?

maxtechera commented 9 years ago

You can see it in the basic demo at http://swimlane.github.io/angular-data-table/

Click on a table row then hit F5 or F12 to open devtools (chrome), it wont work click outside the table makes it work again.

My workaround for the link was using a funcion with on-row-click, is there any way to get the click event ?

EDIT: Keyboard inputs is fixed by removing ev.preventDefault() in the keydown function.

function keyDown(ev, index, row) {
        ev.preventDefault();

        if (ev.keyCode === KEYS.DOWN) {
          var next = ev.target.nextElementSibling;
          if (next) {
            next.focus();
          }
        } else if (ev.keyCode === KEYS.UP) {
          var prev = ev.target.previousElementSibling;
          if (prev) {
            prev.focus();
          }
        } else if (ev.keyCode === KEYS.RETURN) {
          this.selectRow(index, row);
        }
      }
}

And I think the same is happening with the click for links, you are preventing default before checking if its selectable. Maybe move this prevent to the function "selectRow" method after checking "this.options.selectable".

function rowClicked(event, index, row) {
        if (!this.options.checkboxSelection) {
          event.preventDefault();
          this.selectRow(index, row);
        }

        this.$scope.onRowClick({ row: row});
      }
lnramirez commented 8 years ago

any updates on this bug?

I have the following rendering function and doesn't work

columns: [{
    name: 'A column',
    cellRenderer: () => '<a ui-sref="someController({someParam: {{$cell}}})">{{$cell}}</a>'}]
amcdnl commented 8 years ago

@lnramirez sorry haven't had time to dive in, if you wanna do a PR and ensure the other scenarios still work, I'll happily accept.

I use the row click event myself for this so have no had this problem.

lnramirez commented 8 years ago

@amcdnl a coworker suggested to add checkbox options and links started working without having to add a row click listener

this.options = {
checkboxSelection: true,
columns: [{
          name: 'A column',
          cellRenderer: () => '<a ui-sref="someController({someParam: {{$cell}}})">{{$cell}}</a>
          }] }
amcdnl commented 8 years ago

Haha, thats silly.