jqxDockingLayout Add Icon to Title

[jqwidgetsdevParticipant]

Hello.

I am wondering is there a way to add an image besides the title?

<script type="text/javascript">
    $(document).ready(function () {
        // the 'layout' JSON array defines the internal structure of the docking layout
        var layout = [{
            type: 'layoutGroup',
            orientation: 'horizontal',
            items: [{
                type: 'autoHideGroup',
                alignment: 'left',
                width: 80,
                unpinnedWidth: 200,
                items: [{
                    type: 'layoutPanel',
                    title: 'Toolbox',
                    contentContainer: 'ToolboxPanel'
                }
....

Thank you.

[DimitarParticipant]

Hello jqwidgetsdev,

You can add an image by including an img tag in the title, e.g.:

title: '<img src="../../images/tasksIcon.png" />Document 1',

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[jqwidgetsdevParticipant]

Thank you, Dimitar.

Your suggestion works well.

Best regards.

[chandrika.sharmaParticipant]

Hi,

How can i add click event to the title in jqxDockingLayout. Also can i stop dragging of panels after some operation?

[DimitarParticipant]

Hi chandrika.sharma,

1. Here is an example: https://www.jseditor.io/?key=jqxdockinglayout-title-click-event. Try clicking the title “Document 1”.
2. Unfortunately, dragging cannot be disabled at runtime. If you do not need the drag and drop functionality, please use jqxLayout instead.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[chandrika.sharmaParticipant]

Thanks Dimitar for clicking over title. I want dragging on conditional basis so i cannot go for jqxLayout.
dockingLayout is closer to my requirement that’s why i am using this. Having One more query related to ‘type’ of items array of dockingLayout. Actually my requirement is to create two draggable and resizable panel in one dockingLayout. To achieve this i have used documentGroup type. Refer code:
var layout = [
{
type: ‘layoutGroup’,
orientation:’horizontal’,
items: [
{
type: ‘documentGroup’,
width: ‘100%’,
height: ‘100%’,
items: [{
type: ‘documentPanel’,
title: ‘Pane1’,
contentContainer: ‘Panel1’,
}]
},
{
type: ‘documentGroup’,
width: ‘100%’,
height: ‘100%’,
items: [{
type: ‘documentPanel’,
title: ‘Pane2’,
contentContainer: ‘Panel2’
}]
},
]
}];
This returns me two separate panels which is as per my requirement. But the issue is Panel1 is resizing from right side and Panel2 is resizing from left side, also when i resizes the Panel1, Panel2 also gets resized which is not accepted. There is some error while forming layout variable but i am not able to correct it.
Please let me know how can i set the ‘type’ property so that i can have two panels with resizing from same side without effecting each other.

[DimitarParticipant]

Hi chandrika.sharma,

For your layout to be correct, you would have to set the widths of both document panels to values which summed equal 100%, e.g.:

var layout = [{
  type: 'layoutGroup',
  orientation: 'horizontal',
  items: [{
    type: 'documentGroup',
    width: '50%',
    height: '100%',
    items: [{
      type: 'documentPanel',
      title: 'Pane1',
      contentContainer: 'Panel1',
    }]
  }, {
    type: 'documentGroup',
    width: '50%',
    height: '100%',
    items: [{
      type: 'documentPanel',
      title: 'Pane2',
      contentContainer: 'Panel2'
    }]
  }]
}];

Please note, however, that it is not possible for both panels to be independent when they are in the same docking layout. An alternative solution can be using two jqxRibbons inside two jqxWindows.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts