rstaib / jquery-bootgrid

Nice, sleek and intuitive. A grid control especially designed for bootstrap.
http://www.jquery-bootgrid.com
MIT License
972 stars 362 forks source link

How to add custom content in a new row, below the managed row #331

Open skotl opened 7 years ago

skotl commented 7 years ago

Thanks for your efforts, by the way - a great tool!

I am using Ajax to populate the rows and I have a button marked "VV" which is intended to expand the row to show child records. I planned to do this by selecting the row and then running;

row.after("<tr><td colspan='4'/><table><tr><td>All the shiny new text</td></tr></table></td></tr>");

I would then use other jquery/javascript magic to populate the new table inside the appended row. Note that I don't expect this table to survive any re-querying / sorting, etc. I'm quite happy for the row/table to be thrown away and they need to press the "VV" button to expand the row again.

The problem that I face is that when I call .after, I guess bootgrid is stripping out all of the attributes, so what I get left with is;

<td>All the shiny new text</td>

I'm guessing that bootgrid is firing on the new row being added and applying the default table styles. Is there a way for it to ignore this and/or accept raw HTML being inserted into the table?

Thanks

skotl commented 7 years ago

Apologies - I may have fixed it already! I'm adding a div with after;

row.after("<div><table>....");

And that seems to be working, albeit on Chrome and IE11

It's perhaps an interesting feature to document; how to introduce a custom child table or child elements per row?

stvowi commented 7 years ago

try out http://gijgo.com/grid/configuration/detailTemplate