angular jqxdocking layout questions

[wonwoostarParticipant]

I’m trying to make web idea tool like as pycharm or intellij by using jqxdocking layout in Angular.

questions
1. How can i disabled floating?, in default docking layout , every group or panel can be floating group or panel when user drag thems.
2. How can i make layoutPanel title verticle. In this link, “Toolbox” , “Help”, “Solution Expoler” , “Properties” these are display horizontal. i want to display each word verticle.
Like below :
T
o
o
l
b
o
x
——–
H
e
l
p

3. also , how can i insert icon in each Panels title?

4. when click pinned left and rightside, each tabgroup title displayed bottom. how can i make each tabgroup title left and right side. In this demo , when i click leftside “Toolbox” pin , “Toolbox” and “Help” words are displayed in bottom layout by tabgroup. I want bottom tabgroup titles in left side.

5. How can i capture every events in docking layout. seleted , pinned , unpinned , ect..

Thank you for helping us.

https://www.jqwidgets.com/angular/angular-dockinglayout/#https://www.jqwidgets.com/angular/angular-dockinglayout/angular-dockinglayout-saveloadlayout.htm

• This topic was modified 3 years, 10 months ago by  wonwoostar.

[wonwoostarParticipant]

extra explain about #4 . side title remains side still , when I just select title. i just want to make like unpinned show as same as selected show.

[wonwoostarParticipant]

another things in jqxdocking layout. in my code

    <jqxDockingLayout #myDockingLayout [width]="getWidth()" [height]="900" [layout]='layout'>
        <!--left group-->
        <div data-container="NeuralNetPanel">
            <jhi-module-example [moduleType]="neuralName"></jhi-module-example>
        </div>
    </jqxDockingLayout>

I’m triying to send string value to other component in jqxDockingLayout. It doen’t work. i don’t know reason. When I send string value to other component without jqxDockingLayout, it works fine.

<jhi-module-example [moduleType]="neuralName"></jhi-module-example>

[HristoParticipant]

Hello wonwoostar,

(1.) If you want the layouts to be not floating then you could use our another widget – jqxLayout.

About the vertical titles (2.), I would like to mention that this is not possible, unfortunately.

On point three (3.) I would suggest you add one img tag next to the title of the layout.
Please, take a look at this example.

Unfortunately, there is no such option for verticalization of the headers of the pinned group. (4.)

(5.) You could find how to use and all available events for the jqxDockingLayout in its API Documentation page.
For example, to bind to pin event you should add “on” plus the name of the event with capital letter – (onPin)="Pin($event)".

We have one another DockingLayout which is a Web Component.
Please, take a look at this example.
You could look on this page for its options and the available features for it.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[wonwoostarParticipant]

Thanks, one more thing i need to know

another things in jqxdocking layout. in my code

    <jqxDockingLayout #myDockingLayout [width]="getWidth()" [height]="900" [layout]='layout'>
        <!--left group-->
        <div data-container="NeuralNetPanel">
            <jhi-module-example [moduleType]="neuralName"></jhi-module-example>
        </div>
    </jqxDockingLayout>

I’m triying to send string value to other component in jqxDockingLayout. It doen’t work. i don’t know reason. When I send string value to other component without jqxDockingLayout, it works fine.

<jhi-module-example [moduleType]="neuralName"></jhi-module-example>

or easy example how can i use initContent() call back funtion if i want use interpolation in docking layout or jqxlayout

    <jqxDockingLayout #myDockingLayout [width]="getWidth()" [height]="900" [layout]='layout'>
        <!--left group-->
        <div data-container="NeuralNetPanel">
            {{ name }}
        </div>
    </jqxDockingLayout>

is .ts file

 name: string = "stars";

Our company buy jqwidgets component commercial version 1year. If we want use another component which you sugguest, is there any chance to use commercial version another components?

Thank for help.

• This reply was modified 3 years, 10 months ago by  wonwoostar.

[Peter StoevKeymaster]

Hi wonwoostar,

The product which we suggest – Smart Web Components is built by jQWidgets and it is part of your annual subscription for updates and support.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[wonwoostarParticipant]

Thanks,

in before question , I need sample code which i question about .

    <jqxDockingLayout #myDockingLayout [width]="getWidth()" [height]="900" [layout]='layout'>
        <!--left group-->
        <div data-container="NeuralNetPanel">
            <jhi-module-example [moduleType]="neuralName"></jhi-module-example>
        </div>
    </jqxDockingLayout>

    <jqxDockingLayout #myDockingLayout [width]="getWidth()" [height]="900" [layout]='layout'>
        <!--left group-->
        <div data-container="NeuralNetPanel">
            {{ name }}
        </div>
    </jqxDockingLayout>

– how can i use initContent() call back funtion if i want use interpolation works in docking layout or jqxlayout
– In your reply means that we can use https://www.htmlelements.com/ component commercial version in our jqwidget annual subscription?

• This reply was modified 3 years, 10 months ago by  wonwoostar.

[HristoParticipant]

Hello wonwoostar,

Could you clarify it – what you mean with “i want use interpolation”?
If you want you could use initContent callback to make some changes in the particular layout.
Meanwhile, please, take a look at this example:
https://stackblitz.com/edit/github-lraahy-mfhmt8

About the “Smart HTML Elements“ https://www.htmlelements.com/ – both products are by jQWidgets and your license is valid for both. Do not hesitate to use the one which fits better in your application.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

• This reply was modified 3 years, 10 months ago by  Peter Stoev.

[wonwoostarParticipant]

Hello Hristo, I means ‘interpolation’ that below code {{ name }} in html . i dont know how to {{name}} works using initContent

    <jqxDockingLayout #myDockingLayout [width]="getWidth()" [height]="900" [layout]='layout'>
        <!--left group-->
        <div data-container="NeuralNetPanel">
            {{ name }}
        </div>
    </jqxDockingLayout>

– second if i want send value to other component using @Input, @Ouput decorator. how can i use initContent fallback function. Example code below.

    <jqxDockingLayout #myDockingLayout [width]="getWidth()" [height]="900" [layout]='layout'>
        <!--left group-->
        <div data-container="NeuralNetPanel">
            <receive-component [name]="name"></receive-component>
        </div>
    </jqxDockingLayout>

• This reply was modified 3 years, 10 months ago by  wonwoostar.

[HristoParticipant]

Hello wonwoostar,

About the jqxDockingLayout it use the internal structure and after its initialization it transform that structure.
The id of the inner elements is saved and for this purpose is used with “createInstance” method to create the internal widgets.

On the other side one I think better approach for your case with custom component it will be the Dynamic Injection approach.
You could use this in the “initContent” callback to add there wanted component.
Please, take a look at this tutorial.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts