Tabulator: Create an action button with link to edit a row item

[venkatrams]

Hello,

Thanks in advance.
I just started exploring Tabulator and it is very resourceful so far.
I am looking to create an action button on each row of the table auto generated (probably by mutator or Formatter) to edit the row item by taking the user to an edit form. as I currently see cell click event rather than a custom button/control click event.

Is there an example I missed on your site?

Please suggest/recommend an approach

[olifolkerd]

This should be fairly simple to implement. I will break this down into parts for you to make the explanation simpler

Triggering Dialog Load

You could do this in a number of ways, in each of these method i wlil assume you have your own loadDialog function that opens a dialog with the provided row data object, i would suggest the jQuery UI dialog, i have used it many times.

You could use the rowClicked callback to open the dialog when a user click anywhere on a row:

$("#example-table").tabulator({
    columns:[
        {title:"Name", field:"name", sorter:"string", width:150},
        {title:"Rating", field:"rating", formatter:"star", align:"center", width:100},
        {title:"Favourite Color", field:"col", sorter:"string", sortable:false},
    ],
    rowClick:function(e, id, data, row){
        loadDialog(data);
    },
});

Another option would be to use an icon in one of the columns and use the columns onClick function to load the table when the user clicks on that cell (in this case i am use a fontawesome vector font icon:

//custom formatter definition
var openIcon = function(value, data, cell, row, options){ //plain text value
    return "<i class='fa fa-search'></i>"
};

$("#example-table").tabulator({
    columns:[
        {title:"Name", field:"name", sorter:"string", width:150},
        {title:"Rating", field:"rating", formatter:"star", align:"center", width:100},
        {title:"Favourite Color", field:"col", sorter:"string", sortable:false},
        {title:"" , sortable:false, formatter:openIcon, onClick:function(e, cell, value, data){
                loadDialog(data);
        }},
    ],
});

Another option would be to have a button element added in a custom formatter and have the user click that to open the dialog:

//custom formatter definition
var openButton = function(value, data, cell, row, options){ //plain text value
    var button = $("<button>Edit Row</button>");

    button.on("click", function(){
        loadDialog(data);
    });

    return button;
};

$("#example-table").tabulator({
    columns:[
        {title:"Name", field:"name", sorter:"string", width:150},
        {title:"Rating", field:"rating", formatter:"star", align:"center", width:100},
        {title:"Favourite Color", field:"col", sorter:"string", sortable:false},
        {title:"" , sortable:false, formatter:openButton},
    ],
});

Updating Table After Edit

When the data has been edited in the dialog, the table can then be updated using the updateData function.

You should convert the data in your form back into a object in the same form it was given in the above step and the send it back to Tabulator:

$("#example-table").tabulator("updateData", [data]); 

Let me know if this has answered your question.

Cheers

Oli

[venkatrams]

Thank you. Will explore all these options.

What I am trying to do is to create a button to take the user to the edit form of the record instead of a dialog.

[venkatrams]

And Preferably pass on the item id to the query string variable for the button click event link

like EditForm.aspx?id=20

[olifolkerd]

Ahhh, then that is even simpler!

You can use all the same code as above, just replace the line:

loadDialog(data);

with the line:

location.href = "EditForm.aspx?id=" + data.id;

And you should be all sorted.

Oli

[venkatrams]

Hello Oli.

Thank you for your prompt response but the data.id returns undefined and the page refreshes and reloads instead of redirecting to the edit page.

Thanks again

[olifolkerd]

The property you need to use depends on the data structure you are passing into tabulator. i was just assuming you used the id property. you will need to use which ever one is appropriate base on the row object you pass in the data array.

The path you pass in is also down to you to put in, the code i provided only demonstrates how to load a page in the browser and how to assign a property from the table into it.

if you have an example of your row object then i would be happy to tweak the example to fit your data.

[venkatrams]

Hello Oli,

Thanks for your response for more clarity here is my code that I am using.

var editButton = function(value, Dashboard1, cell, row, options){ //plain text value
var button = $("Edit");

button.on("click", function(){
alert(Dashboard1.id);
    window.location = "/EditForm.aspx?id=" + data.id;
    // location.href = "/EditForm.aspx?id="  data.id;

});

return button;
};

var Dashboard1 = CreateDash(options);

$("#FirstDash").tabulator(
{
data:Dashboard1,
columns:col,
fitColumns:true,
movableCols: true,
paginationSize:5,
groupby:"Title",
pagination:"local"});
});

[venkatrams]

Thank you. It worked for me. I ignored case sensitivity.

For the redirect, I had to use window.open instead of location.href.

Thanks a ton and for a great tool

[ramshadken]

how to add two more icons in a same column and trigger as separate one ,
example in the case of product table we need an action column for view update delete and may be set status .

[AlainEdwards]

@ramshadken I found the best and simplest way to do this is to put each button in its' own cell and utilize the cell onclick trigger.

I was trying to do the same thing and found it difficult to get the row objects to manipulate the table data; esp. when using a tree structure.