Build Responsive Child Rows As Soon As Columns Collapse

Build Responsive Child Rows As Soon As Columns Collapse

zepernickzepernick Posts: 32Questions: 7Answers: 0

Is it possible to trigger a method that would run through the tables rows and build out the child rows for the parent as hidden every time a column collapses or expands? We are storing some checkboxes in the DataTable and allowing some to collapse in responsive. However, the checkboxes do not exist in the dom unless the child row is shown.

Answers

  • allanallan Posts: 61,895Questions: 1Answers: 10,145 Site admin

    If you don't might using, as yet, unreleased software, then yes it is possible. This unreleased example shows how it can be done with the next version of Responsive, which you can also find in that repo.

    Expect the release to be next week.

    Allan

  • zepernickzepernick Posts: 32Questions: 7Answers: 0

    Thanks Allan, I upgraded to the new release today. Is there any way to have the child row hide instead of remove from the dom on the collapse? I also see that the wrapped column is retained as a hidden element now on the parent row. In my particular scenario, I would have my checkbox duplicated in the dom. I was looking to see if you had any thoughts before I take a look at the repsonsive source and trying to modify it.

  • allanallan Posts: 61,895Questions: 1Answers: 10,145 Site admin

    Is there any way to have the child row hide instead of remove from the dom on the collapse?

    As in use display:none or similar when the child row is not needed? There is no option for that built into Responsive. It might be possible to do using a custom renderer, but it isn't something I've tried myself.

    <input> elements such as in your use case are a particular difficulty for Responsive. There isn't really a good way to use the DOM elements in the host and child rows, with the element switching between them when required by the display. Sorry! That is something I hope to add in future, but it presents a number of challenges, specifically in the table width calculations.

    Allan

  • zepernickzepernick Posts: 32Questions: 7Answers: 0

    I checked into the custom renderer and it does not look like I would be able to do it there. It does not have control of the table row, only the content inside of it. I will be looking into it a little bit more tomorrow to see what I have to modify in the responsive plugin. Would you consider a pull request for this if I made it a configurable option?

  • allanallan Posts: 61,895Questions: 1Answers: 10,145 Site admin

    Possibly if the change were small. The reason I hesitate is that I'm not sure I see the use case for it to be honest and I'd rather not commit in something that then needs to supported and maintained if it is only very rarely used.

    It sounds like the best possible fix would be to have the DOM elements moved form the parent row to the child row - which is something that I would like Responsive to do, but found it a bit too complicated for the time I had available to do it last time I looked at it.

    Allan

  • zepernickzepernick Posts: 32Questions: 7Answers: 0

    Yeah that is actually the road I am heading down now. I will track that in a separate branch so you can evaluate and see if you like the implementation.

    I also need the child row to be in the table at all times regardless if it is expanded or collapsed. Right now it is removing the child from the dom on the collapse.

This discussion has been closed.