Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add link or onclik on whole row #55

Closed
sebgos opened this issue Sep 22, 2015 · 3 comments
Closed

add link or onclik on whole row #55

sebgos opened this issue Sep 22, 2015 · 3 comments

Comments

@sebgos
Copy link

sebgos commented Sep 22, 2015

How can I easily add link to row?
It looks you use .text() to format results in table but I couldn't found it in code.
I'm trying to add link Link to page from JSON as separate column but I got <a href="page-n.html">Link to page</a>

Other solution would be adding onclick to whole row but I didn't found it in your documentation.

Let me know how I can quickly add links.

@AllenFang
Copy link
Owner

HI @gos-sebastian, I think if add link to whole row is impossible, but if cell, it work. You can use cell format to solve this problem

@paulmoliva
Copy link

hacky way to do it:

 cellID(theCell, that){
      that.style = {
          backgroundColor: 'transparent',
          zIndex: theCell,
          minWidth: '470px',
          minHeight: '38px',
          maxHeight: '76px',
          marginRight: '-470px',
          position: 'absolute',
          content: `${theCell}`
      };
      let that2 = this;
      that.onClick = (function(){
          setTimeout(() => {
              let cell = $(`td[style*="z-index: ${theCell}"]`)
              $.each(cell, (i, el) => {
                  if(el.style['z-index'] === theCell.toString()){
                      let row = $(el).parent();
                      let theHtml = row[0].innerHTML;
                      row[0].innerHTML = `<a style='z-index: ${theCell + 1}; position: absolute; opacity: 0.2; min-height: 38px; min-width: 470px;' id="${theCell}-link" href="/campaigns/${theCell}">${theHtml}</a>`
                  }
              })
          }, 1000)
      })();
      that.title = theCell;
      return `${theCell}`;
  }

<BootstrapTable data={this.props.campaigns.campaigns} striped={true} hover={true} pagination={true} options={options}>
            <TableHeaderColumn dataField="id" isKey={true} dataFormat={function(cell){
                that.cellID(cell, this);
            }} dataAlign="center" dataSort={true}>Campaign ID</TableHeaderColumn>
              <TableHeaderColumn dataField="name" dataFormat={cell => (cell.slice(0,54) + (cell.length > 54 ? '...' : ''))} dataSort={true}>Campaign Name</TableHeaderColumn>
            <TableHeaderColumn dataField="leans" dataFormat={function(cell){
                that.cellColor(cell, this);
            }}
            dataSort={true}>Campaign Leans</TableHeaderColumn>
          </BootstrapTable>

@awitherow
Copy link

@AllenFang could we revisit this issue and potentially turn it into a feature request instead of closing it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants