jQuery UI Widgets Forums Layouts Layout and Docking Layout jqxDockingLayout Add Icon to Title

This topic contains 6 replies, has 3 voices, and was last updated by  Dimitar 3 years, 4 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • jqxDockingLayout Add Icon to Title #78154

    jqwidgetsdev
    Participant

    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.

    jqxDockingLayout Add Icon to Title #78163

    Dimitar
    Participant

    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/

    jqxDockingLayout Add Icon to Title #78315

    jqwidgetsdev
    Participant

    Thank you, Dimitar.

    Your suggestion works well.

    Best regards.

    jqxDockingLayout Add Icon to Title #88833

    chandrika.sharma
    Participant

    Hi,

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

    jqxDockingLayout Add Icon to Title #88867

    Dimitar
    Participant

    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/

    jqxDockingLayout Add Icon to Title #88899

    chandrika.sharma
    Participant

    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.

    jqxDockingLayout Add Icon to Title #88917

    Dimitar
    Participant

    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/

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.