See the next screenshots and you will see why I don't want I tried with the dr-controll class and assigned it to the "age" column, which is the one I actually want to hide or show according to the view, but it is not working as I want, see: Regarding the class logic, I already tried to set the age column to "mobile" and "table-p", but that's not the result I want.
#DATATABLES RESPONSIVE RESIZE FULL#
one() handler will be executed only one however, I need to show/hide the column each time that the user enters or leaves the responsive view, which on my case it would be the mobile and tablet-p modes the other modes will show the full table.
#DATATABLES RESPONSIVE RESIZE HOW TO#
Any idea on how to achieve this? Is there perhaps a better way of achieving what I want?īest Regarding your answer: as far as I know the. So, basically what I need is to temporary disable the responsive-resize event. * Adding and removing a css class -> It keeps running It will run only once, so, it won't be re-enabled. * Appending a boolean flag to the e.data -> It keeps running It says always: undefinedįrom this Stackoverflow answer:, I tried everything: * Adding a global variable, but it seems that inside the event handler that global variable can't be read. * Stop event propagation with: e.stopPropagation(). I really need those two lines since the idea is to hide the age column while on a desktop or a landscape tablet and show it on the other devices. So, this two lines trigger the event again and that's why it will be kept running infinitely. Basically this two:ĭata_lumns( ).visible( true ) ĭata_lumns( ).visible( false ) I saw that this behavior will stop if I comment the lines: 24 and 27 from the jsFiddle. Press: Run, open the iframe in a new tab, press F12 and put the break-point.
If you debug the Fiddle using the Developer Tool from Mozilla or Chrome and put a break-point inside the responsive-resize handler (line 34 in the js iFrame), then you will see that that event will be infinitely triggered. The row should be shown only on mobiles and portrait tablets. I hot fixed it by adding an arbitrary width to the flexbox (for example width:1px, which gets overridden by the flexbox attributes) and the flexbox shrank accordingly, which let the datatable recalculate its available space accordingly.Right now, I'm working on a responsive Datatable, where I want to hide a column while showing the table on a desktop and on a landscape table. 1200px) and table wrapper recalculates its available space to 1200px, but as I decreased the window size, the flexbox kept its larger width (to wrap the table wrapper) and therefore it didnt forced the shrink on the datatable. But the flexbox wraps its content and therefore always includes its child elements (the tablewrapper)Īs soon as I increased the window size, the flexbox grew (100% windowsize, i.e. The ngx-datatable calculates a fixed width based on the available space of the parent element (i.e 100% of flexbox, lets say 1000px wide window) and applies an width attribute to the tablewrapper (width:1000px). Not sure if its relevant, but my problem was the fixed child width of the datatable. I had a similar issue, but in conjunction with flexbox and the datatable scrollbars. What is the motivation / use case for changing the behavior?īrowser: I'll try to get a plunker up but it's entirely possible that there something else causing this that is specific to my app.
It would re-render the width for enlarging and shrinking window. When rendering the datatable in a view and not absolutely positioned, the initial width is set and making the window larger triggers a resize, but shrinking it does not. support request => Please do not submit support request here, post on Stackoverflow or Gitter Bug report => search github for a similar issue or PR before submitting
0 kommentar(er)
