JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Docking Layout › how to create docking layout dynamically using java script and jquery? › Reply To: how to create docking layout dynamically using java script and jquery?
yavordashewHi kaltura,
I have made a code snippet for you which I think covers your requirements and achieves the functionality you want.
In your html file we have this code :
<body>
<smart-docking-layout ></smart-docking-layout>
<br><br> <br>
<smart-docking-layout id=’dockingLayout2′ ></smart-docking-layout>
</body>
And in your javascript file we have the following code :
const secondDock = document.getElementById(‘dockingLayout2’); // the docking layout component in which we want to drag the tab into
docking.addEventListener(‘stateChange’, function(event ){
var movedTab= event.detail.item
secondDock.dock(movedTab) /*here we use the ‘dock’ method of the docking layout component, you can also use the other methods like(insertIntoTop, insertIntoBottom and etc.)*/
});
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/