Bootstrap-table: Toggle detail view by clicking on the row

[DavidKrupi]

Hello, I would like to ask how to toggle $detail view (expand-row.bs.table) by clicking on the row.
I mean the same behaviour as "detail-icon" object.
I'm sorry if it is obvious...

[tannermccoleman]

Right now it doesn't look like it's that easy to do. The selector is hardcoded as tr[data-index] > td > .detail-icon so your best option would likely be to just trigger click on .detail-icon. Something like this:

$("#my-table").on("click", "tr", function(e){
    e.preventDefault();
    $(this).find(".detail-icon").trigger("click");
});

[DavidKrupi]

Thanks for the hint. Unfortunately after a while it throws the error:
SyntaxError: Invalid regular expression: /(^|.)bs.(?:.*.|)table(.|$)/: Stack overflow
and it displays only the text "detailFormatter"

This works:

$("#my-table").on("click", "tr", function(e){
    $(this).find(".detail-icon").triggerHandler("click");
});

However, clicking on plus-icon doesn't work now. It's regargded as click on tr, but nothing happens..

[dabros]

@DavidKrupi - could you please provide fiddle so we can help you with this?

[tmorehouse]

You could listen for the click-row.bs.table event on the table, and then trigger a clickevent on the detail icon button for that particular row. Basically:

$table.on(`click-row.bs.table',function(e,row,$tr){
    $tr.find('>td>.detail-icon').trigger('click');
})

Not overly elegant, but works as long as you have the detailView option enabled.

Clicking the row a second time will hide the detail view.

[tmorehouse]

Not sure what happen when you click on the detail icon itself with this row click event enabled. This may fire the click event twice though. causing the detail view to show and then immediately hide. You could check the event object to see the target element that was clicked, and if it has the class .detail-icon class then ignore it

[tmorehouse]

Like this:

$table.on(`click-row.bs.table',function(e,row,$tr){
    if (!$(e.target).hasClass('detail-icon')) {
        $tr.find('>td>.detail-icon').trigger('click');
    }
});

And if you prefer doubleclicks, then listen for the event dbl-click-row.bs.table instead.

[DavidKrupi]

Hello,
thanks for try. It really seems that the click event triggers twice. Btw, trigger('click') expands row with detailFormatter text in my real scenario (but not in fiddle), triggerHandler works...
https://jsfiddle.net/2nr3Lfwa/2/

[wenzhixin]

I will consider to add a method to expand the detail view.

[felipecocco]

I second the request - I have a project that is working really nicely on mobile, but especially due to size constraints the ability to turn the entire row into the clickable event would be great!

[brauliobo]

+1

[wenzhixin]

Added onExpandRow and onCollapseRow events. http://bootstrap-table.wenzhixin.net.cn/documentation/#events

[brauliobo]

@wenzhixin I have to fire them manually (on row click), right?

[wenzhixin]

Added expandRow and collapseRow methods.
Examples here: http://issues.wenzhixin.net.cn/bootstrap-table/#methods/expandRow-collapseRow.html

[corina10]

Hi,

Since expandRow and collapseRow methods are available, would it be possible to remove the plus column?

Thank you.

[dabros]

EDIT updated when noticed using older bootstrap-table.js version and not new methods

@corina10 - to remove plus icon column, use a simple combo of css and js

In old method, the detail-icon had to be in accessible tr, but no longer, so we can just display:none that whole thing, then use a simple if-else to decide what to do on click-row event.

https://jsfiddle.net/dabros/6ony6cs2/1/

NOTES:

• I didnt bother to affect tr.detail-view colspan, cant imagine issues if its just +1 above actual column count, but keep in mind just in case.
• This fiddle uses a version specific bootstrap-table.min (10.1 to be exact). NOT what I would normally do, but it was already so I just updated version instead of master, easy enough to change when viewing later if discrepancies.
• To account for missing column, simple css to remove border-left on next column.
• The if-else was taken from a.detail-icon.click handler in bootstrap-table.js, no real knowledge needed since they already doing that kind of thing there.

[corina10]

Thank you, Dabros! This was very helpful.

[binhoscray]

As only leave an open line? When I click to open close to another?

[dabros]

@binhoscray - ???

See the fiddle included and read other posts. Its quite clear what this topic is about and the solution provided.

After you have thoroughly tried to implement yourself, if still having issues then either post here with a clear question and expected output vs actual output description, OR create a new issue (ONLY post here if about exactly the same issue as the title and first post, if at all different create new issue and use #issueid to link back to here)

[dabros]

@binhoscray - dont post on closed issues then create new issues and completely fail to include a link on either side

2420

[harryizquierdo]

I use:

$('#table').bootstrapTable({
    onClickRow: function(row, element){
        $(element[0]).find('.detail-icon').triggerHandler("click")
    }
});

[tylerecouture]

I added a bit to these suggestions to get a sliding detailed view:
https://jsfiddle.net/43Tesseracts/mpr63ezm/

[djhvscf]

@tylerecouture it looks great

[danger89]

Added expandRow and collapseRow methods.
Examples here: http://issues.wenzhixin.net.cn/bootstrap-table/#methods/expandRow-collapseRow.html

I think a toggleRow made more sense..