wice_grid add row dynamically

Question

I want to create a "details" row dynamically like below:

I'd like to be able to toggle details for every item on the grid. Can you advise how I can achieve this functionality? I'm using rails 4 with wice_grid gem

Answer 1

I found out how to do this:

VIEW:

<%= grid(@items_grid) do |g|

    g.after_row do |fill, number_of_columns|
        content_tag(:tr, class: 'extra-row') do
              content_tag(:td,
                   content_tag(:div) do
                       # without buffer only the last tag will appear
                       buffer = content_tag(:p,"data1: #{item.add_data1}")
                       buffer += content_tag(:p,"data2: #{item.add_data2}")
                       raw buffer
                   end,
                   colspan: number_of_columns)
         end

  g.column name: "ID", attribute: 'id' do |item|
    item.id
  end

  g.column name: "Data", attribute: 'data' do |item|
    item.data
  end

  g.column do |item|
    button_tag("Details", class: "btn btn-default toggle-trigger")
  end

end -%>

.JS:

$(document).on("page:load ready", function(){
    $(".toggle-trigger").click(function(){
        $(this).parents('tr').next('.extra-row').slideToggle("fast");
        return false;
    });
});

.CSS:

.extra-row {
  display: none;
}