Issues with searchbuilder margin misaligning when using "stateLoadCallback" to load the state

zan123

CODE:
live.datatables.net/dibekogo/1/edit

Link to test case:
live.datatables.net/dibekogo/1

Description of problem:
I am saving state of the datatables in the URL and loading it back using the callbacks. The issue that I am facing is that searchBuilder's view has misaligned margins after loading the state.

Link to same test case with some filters saved in the URL: (click 'Filter Data'; this will have misaligned margins)
live.datatables.net/dibekogo/1?example_state=eyJ0aW1lIjoxNjE3Mzg5NzM2ODQ5LCJzdGFydCI6MCwibGVuZ3RoIjoxMCwib3JkZXIiOltbMCwiYXNjIl1dLCJzZWFyY2giOnsic2VhcmNoIjoiIiwic21hcnQiOnRydWUsInJlZ2V4IjpmYWxzZSwiY2FzZUluc2Vuc2l0aXZlIjp0cnVlfSwiY29sdW1ucyI6W3sidmlzaWJsZSI6dHJ1ZSwic2VhcmNoIjp7InNlYXJjaCI6IiIsInNtYXJ0Ijp0cnVlLCJyZWdleCI6ZmFsc2UsImNhc2VJbnNlbnNpdGl2ZSI6dHJ1ZX19LHsidmlzaWJsZSI6dHJ1ZSwic2VhcmNoIjp7InNlYXJjaCI6IiIsInNtYXJ0Ijp0cnVlLCJyZWdleCI6ZmFsc2UsImNhc2VJbnNlbnNpdGl2ZSI6dHJ1ZX19LHsidmlzaWJsZSI6dHJ1ZSwic2VhcmNoIjp7InNlYXJjaCI6IiIsInNtYXJ0Ijp0cnVlLCJyZWdleCI6ZmFsc2UsImNhc2VJbnNlbnNpdGl2ZSI6dHJ1ZX19LHsidmlzaWJsZSI6dHJ1ZSwic2VhcmNoIjp7InNlYXJjaCI6IiIsInNtYXJ0Ijp0cnVlLCJyZWdleCI6ZmFsc2UsImNhc2VJbnNlbnNpdGl2ZSI6dHJ1ZX19LHsidmlzaWJsZSI6dHJ1ZSwic2VhcmNoIjp7InNlYXJjaCI6IiIsInNtYXJ0Ijp0cnVlLCJyZWdleCI6ZmFsc2UsImNhc2VJbnNlbnNpdGl2ZSI6dHJ1ZX19LHsidmlzaWJsZSI6dHJ1ZSwic2VhcmNoIjp7InNlYXJjaCI6IiIsInNtYXJ0Ijp0cnVlLCJyZWdleCI6ZmFsc2UsImNhc2VJbnNlbnNpdGl2ZSI6dHJ1ZX19XSwic2VhcmNoQnVpbGRlciI6eyJjcml0ZXJpYSI6W3siY29uZGl0aW9uIjoiIW51bGwiLCJkYXRhIjoiUG9zaXRpb24iLCJ2YWx1ZSI6W119XSwibG9naWMiOiJBTkQifSwicGFnZSI6MH0%3D

Any help or suggestions would be appreciated.

colin

Thanks for those test cases. I took a look, but I'm not seeing any differences between the original layout, and after stateSave has kicked in. Please could you give some steps on how to reproduce, please.

Colin

zan123

@colin ,
I apologize for the inconvenience but it seems like the link I was working with expired the "Live View". These links I am creating here, hopefully, would be permanent. Make sure to look at the output in the "Live View" on JS Bin if the view links doesn't take you there already.

Link to the code:
live.datatables.net/jerisera/1/edit

Link with initial view with no saved state:
live.datatables.net/jerisera/1

Link with the saved state in the URL with filtering ( particularly with 'Filter Data'. Click on the 'Filter Data' button to see the issue with margins )
live.datatables.net/jerisera/1?example_state=eyJ0aW1lIjoxNjE3NDY2MzIzMzczLCJzdGFydCI6MCwibGVuZ3RoIjoyNSwib3JkZXIiOltbMCwiYXNjIl1dLCJzZWFyY2giOnsic2VhcmNoIjoiIiwic21hcnQiOnRydWUsInJlZ2V4IjpmYWxzZSwiY2FzZUluc2Vuc2l0aXZlIjp0cnVlfSwiY29sdW1ucyI6W3sidmlzaWJsZSI6dHJ1ZSwic2VhcmNoIjp7InNlYXJjaCI6IiIsInNtYXJ0Ijp0cnVlLCJyZWdleCI6ZmFsc2UsImNhc2VJbnNlbnNpdGl2ZSI6dHJ1ZX19LHsidmlzaWJsZSI6dHJ1ZSwic2VhcmNoIjp7InNlYXJjaCI6IiIsInNtYXJ0Ijp0cnVlLCJyZWdleCI6ZmFsc2UsImNhc2VJbnNlbnNpdGl2ZSI6dHJ1ZX19LHsidmlzaWJsZSI6dHJ1ZSwic2VhcmNoIjp7InNlYXJjaCI6IiIsInNtYXJ0Ijp0cnVlLCJyZWdleCI6ZmFsc2UsImNhc2VJbnNlbnNpdGl2ZSI6dHJ1ZX19LHsidmlzaWJsZSI6dHJ1ZSwic2VhcmNoIjp7InNlYXJjaCI6IiIsInNtYXJ0Ijp0cnVlLCJyZWdleCI6ZmFsc2UsImNhc2VJbnNlbnNpdGl2ZSI6dHJ1ZX19LHsidmlzaWJsZSI6dHJ1ZSwic2VhcmNoIjp7InNlYXJjaCI6IiIsInNtYXJ0Ijp0cnVlLCJyZWdleCI6ZmFsc2UsImNhc2VJbnNlbnNpdGl2ZSI6dHJ1ZX19LHsidmlzaWJsZSI6dHJ1ZSwic2VhcmNoIjp7InNlYXJjaCI6IiIsInNtYXJ0Ijp0cnVlLCJyZWdleCI6ZmFsc2UsImNhc2VJbnNlbnNpdGl2ZSI6dHJ1ZX19XSwic2VhcmNoQnVpbGRlciI6eyJjcml0ZXJpYSI6W3siY29uZGl0aW9uIjoiIW51bGwiLCJkYXRhIjoiUG9zaXRpb24iLCJ2YWx1ZSI6W119XSwibG9naWMiOiJBTkQifSwicGFnZSI6MH0%3D

I am also posting a picture for reference if for some reason the "Live view" gets expired for the links I have posted.

sandy

Hi @zan123 ,

I'm afraid the last link there also does not work for me.

It looks to me that the filters are being restored correctly but the positioning is all off. Is that the issue that you are concerned with?

I would try rebuilding SearchBuilder using the searchBuilder.getDetails() and the searchBuilder.rebuild() methods at the end of your load function. Something like

table.searchBuilder.rebuild(table.searchBuilder.getDetails());

This should trigger it all to rebuild properly.

If this doesn't help could you send me a link to your page? Or try to replicate it in something like JSBin if live.datatables.net is misbehaving.

Thanks,
Sandy

zan123

Hi @sandy ,

That is correct, filters are being restored correctly but the positioning is off. I have already tried rebuilding using suggested methods but it didn't make any difference.

The positions re-aligns properly only after clicking the "+" button within the "Search Builder" View.

I have created the example on JSBin now instead of live.datables.net and hopefully live preview option doesn't expire now.

Following is the link to the JSBin:

https://jsbin.com/xateyak/edit?html,js,output

I would suggest going to the output window and clicking the "Live Preview" to see it in action.

I am also going to try to avoid putting massive link here as it seems that my post goes under "review" every time I am putting a massive link.

Live preview mode option:

• After going to the 'Live preview' mode.
• Click on "Filter Data" and add any condition to it (this would then update the state of the table in the URL).
• Hit refresh button on the browser and it will reload the state back but this time if you open the searchBuilder you will see that positioning is off until user adds another condition by clicking "+" button in this example.

sandy

Hi @zan123 ,

Thanks, I can see the issue now. I've raised an issue internally (DD-1930 for my reference) and will report back here when there is an update (probably on Friday).

Thanks,
Sandy

sandy

Hi @zan123 ,

That should be the issue fixed now, you might need to break the cache on the nightly builds to get it.

This will be available in the next SearchBuilder release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds.

Thanks,
Sandy

zan123

Hi @sandy ,

This is excellent

I have tested it with the nightly and it is working as expected now.

Thanks a lot guys!