reactables icon indicating copy to clipboard operation
reactables copied to clipboard

Is there a way to have an in-place edit link in a column ?

Open MichaelF77 opened this issue 7 years ago • 4 comments

I'd like to do something like this:

          columnOpts: [
		     {
		       render: function (data, row, type) {
		         return (<div>
		            <a href="#" onClick={that.handleEdit} id={"bEdit" + data} recordid={edit}>Edit</a>
					</div>);
		       },
		       target: "recordid"
		   }
		   ]

And when clicking "edit" - invoke editor just like "edit" button does in the top-left corner, but for selected row only.

MichaelF77 avatar Feb 14 '18 03:02 MichaelF77

GT have 3 options:

  • normal Edit, like you mentioned with rows selection and pressing the button
  • real-time cell editing with editableCells: true
  • and self-supported buttons/functions via columnOpts.render, where you can implement anything u need ex.: your that.handleEdit function can remove the link and set the field with button to send to your server

PS it seems like a duplicate functionality to trigger pop-up either on pressing buttons in the buttons bar and in the row/cell, probably you have a good example and maybe I can see other profits from this proposal, if u can show this by providing a ref - would be great.

arthurkushman avatar Feb 14 '18 20:02 arthurkushman

For my use case I need a popup but I do not need an Edit button for two reasons: (1) It requires 2 clicks (select - click) (2) Not all rows are editable, only some of them should be. By implementing self-supported function in column render I can control it based on data (flag from the server). But I can't figure out a way to call "Edit" functionality programmatically short of manually selecting the row that was clicked on and then imitating edit click, but that requires having an edit button. Can you please point me towards a method that can be called to initiate popup edit ?

MichaelF77 avatar Feb 14 '18 20:02 MichaelF77

I think from this point of view/example u can do anything:

    columnOpts: [
        {
            render: (data, row, type) => (
                <div>
                    <form method="post" action="">
                        <input type="hidden" name="action" value="forms"/>
                        <input type="hidden" name="id" value={row.id}/>
                        <div>{data}</div>
                        <button onClick={function(e) {
                            e.preventDefault();
                            console.log("I'm flying away... weeee");
                            console.log(data); // the cell data
                            console.log(row); // the entire row
                            console.log(type); // the column type ex.: title, description etc
                        }}>Send</button>
                    </form>
                </div>),

moreover as it is a closure you can see any data up-down.

arthurkushman avatar Feb 18 '18 16:02 arthurkushman

What I need is a way to invoke Gigtables edit dialog. Something like this.showEditDialogForRow(row.id) And have the dialog configured in the "edit" pop up.

MichaelF77 avatar Feb 18 '18 20:02 MichaelF77