how to create docking layout dynamically using java script and jquery?

[kaltura47]

Hi how can I add dynamic tabs and panel in docking layout . I want to create dynamic tabs on java script function click and add content to that tab dynamically using another java script function . I am using visual studio docking layout . The first panel is static and at index n+1 I am pushing new panel in the docking array.
object1 = {
id: ‘item’ + count1, label: ‘Folder ‘ + count1,
items: [{
label: ‘Solution Explorer’,
content: ‘<div id=”cardOpenArea’ + count1 + ‘” ></div>’,
}],
tabPosition: ‘hidden’
};
layout = document.querySelector(‘smart-docking-layout’);
layout.layout = [
{
id: ‘item0’,
label: ‘View’,
items: [{
label: ‘Team Explorer’,
selected: false,
content: ‘This is the first item of the Tabs 0.’,
},
];
layout.layout.push(object1);

[yavordashew]

Hi kaltura,
For your case its better to use insertIntoTop() function as shown in the code snippet below.In the tabsWindowObject you can customize
the code according to your needs and in the insertIntoTop() function ‘1’ indicates the position where the tab to be added.
var tabsWindowObject =
{
type: ‘LayoutPanel’,
id: ‘Your Id’,
label: ‘Solution Explorer’,
items: [{
label: ‘Solution Explorer’,
content: ‘The content you want to add’
}],
tabPosition: ‘hidden’
};
const dockinglayout = document.querySelector(‘smart-docking-layout’);
dockinglayout.insertIntoTop(1,tabsWindowObject);
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[kaltura47]

thank you for your reply .. that works for me!!
 

[kaltura47]

how can i add tabs in one tab panel dynamically using javaScript I already have a panel with a tab and I want to add a new tab in the same panel,I want to add tab label and content on table td click function, somebody know how to do this? below is my code
const dockinglayout = document.querySelector(‘smart-docking-layout’);
dockinglayout.layout = [
];
folderWindowObject =
{
type: ‘LayoutPanel’,
id: ‘Id’ + count1,
label: foldername,
items: [{
label: foldername,
content: ‘<div id=”cardOpenArea’ + count1 + ‘” ></div>’
}],
tabPosition: ‘hidden’
};
dockinglayout.insertLayoutLeft(folderWindowObject);
tabsWindowObject =
{
type: ‘LayoutPanel’,
id: ‘tabPanel’ + count1,
label: ‘Tab’ + count1,
items: [{
label: tabs,
selected: false,
content: ‘<div id=”tabdata’ + count1 + ‘” > </div>’,
}],
headerPosition: ‘none’,
tabCloseButtons: true,
panelContainerSettings: {
size: ‘50%’
}
}
dockinglayout.insertLayoutRight(tabsWindowObject);

[yavordashew]

Hi kaltura,
Thank you for getting back to us.
If you want to add new tab in a tab window you can achieve this by adding new object into the ‘items’ array which can be achieved for example as shown in the code below.
var tabsWindowObject =
{
type: ‘LayoutPanel’,
id: ‘Your Id’,
label: ‘Solution Explorer’,
items: [{
label: ‘Solution Explorer’,
content: ‘The content you want to add’
}],
tabPosition: ‘hidden’
};
//New Tab  object
var newTabInsideTabWindow = {
label: ‘Another Solution Explorer’,
content: ‘Another content you want to add’
}
//Inserting the New Tab in the items array
tabsWindowObject.items.push(newTabInsideTabWindow)
const dockinglayout = document.querySelector(‘smart-docking-layout’);
dockinglayout.insertIntoTop(1,tabsWindowObject);
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[kaltura47]

thanks smart  UI team and specially yavor dashev !
I have a query that does this support drag and drop of content from one panel to other one?. I have done the tabs creation in one panel just after adding second tab the close button from tabs disappear others things works fine! thanks for great response from you and your team!.

[yavordashew]

Hi kaltura,
I’m happy to help you and make things work!
Unfortunately our component doesn’t have the functionality to drag content from one component to another.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[kaltura47]

Hi yavor Dashev,
If the component does not support drag and drop feature can we achieve it using third part tool ?
as i am using html drag and drop api. as shown in link below after applying html UI element it wont work for me.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop
thanks in advance!
regards kaltura

[yavordashew]

Hi 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/
 

[kaltura47]

Hi Yavor Dashev,
I have applied the above code snippet but its not full filling my requirements due to API conflicts of docking layout and html drag and drop!
I am looking forward to know that, Can I use process A as docking Api and process B as html drag and drop? Is there any way to stop (not disable)  and resume the functionality of docking. Thanks in advance and your and Smart UI Team are very fast and responsive that’s appreciable.
regards,
kaltura

[yavordashew]

Hi kaltura,
From the example you have shared from the w3schools.com I have succeded to implement their example with our component.
Once more I have prepared a code snippet for you, which has the functionality of dragging a paragraph tag(this is just for example) into
our component tabs. This is the code snippet to add in your javascript file:
function drag_handler(ev) {
console.log(“Drag Confirmed”);
}
function dragstart_handler(ev) {
console.log(“dragStart Confirmed”);
ev.dataTransfer.setData(“text”, ev.target.id);
}
function drop_handler(ev) {
console.log(“Drop Confirmed”);
ev.preventDefault();
var data = ev.dataTransfer.getData(“text”);
ev.target.appendChild(document.getElementById(data));
}
function dragover_handler(ev) {
console.log(“dragOver Confirmed”);
ev.preventDefault();
}
const dockingLayoutComponent = document.querySelector(‘jqx-docking-layout’);
dockingLayoutComponent.addEventListener(‘stateChange’, function(event){
});
And the code snippet for your HMTL file :
<smart-docking-layout id=”dockingLayout2″ ondrop=”drop_handler(event);” ondragover=”dragover_handler(event);”></smart-docking-layout>
<div>
<p id=”drag1″ draggable=”true” ondrag=”drag_handler(event);” ondragstart=”dragstart_handler(event);”>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[kaltura47]

Hi Yavor Dashev,
Thanks for the above code snippet its very useful but the problem is you have created an html div that is dragging into smart docking tag. But what I need is to  drag from smart docking layout tag and drop also into smart docking layout tag. Something like,
<smart-docking-layout id=”dockingLayout2″ ondrop=”drop_handler(event);” ondragover=”dragover_handler(event);”></smart-docking-layout>
<smart-docking-layout id=”drag1″ draggable=”true” ondrag=”drag_handler(event);” ondragstart=”dragstart_handler(event);”>Lorem, ipsum dolor sit amet consectetur </smart-docking-layout>
But its not working for me.
I am looking forward to have any suggestion from you.
regards,
Kaltura
 

[yavordashew]

Hi kaltura,
Unfortunately the ‘smart-docking-layout’ doesn’t support dragging the entire ‘smart-docking-layout’ component to be inserted into another ‘smart-docking-layout’ component.The best option is to drag ‘tabs’ from one docking layout into another as I mentioned in my previous post although you mentioned you have some API conflicts using the provided code snippet. If the option for drag and drop a ‘tab’ into another docking layout suits your purposes you can share some of your code to help you solve the API conflicts you mentioned.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[kaltura47]

Hi Yavor Dashev,
Thank you for the quick response. I don’t want to drag whole docking layout .What I really want to do is for example
<smart-dock-layout id=”d1″><p id=”p1″>abcd</p></smart-dock-layout>
<smart-dock-layout id=”d2″><p id=”p2″>xyz</p></smart-dock-layout>
I want to drag p1 content into smart dock (d2) or vice versa. Hope soo you got my point.
Best regards,
Kaltura
 

[yavordashew]

Hi kaltura,
In this case you cant have ‘<p>’ tag inside the smart-docking-layout component like in your last reply therefore you can’t have the functionality to drag and drop the ‘<p>’.
The closest thing in to what you want to achieve is to drag a tab from the docking layout and insert it into another docking layout component.
In a previous reply from 4th of January I have made a code snippet with you can achieve this functionality.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts