jQuery UI Widgets Forums Angular angular jqxdocking layout questions

This topic contains 9 replies, has 3 voices, and was last updated by  Hristo 3 months, 3 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • angular jqxdocking layout questions #106157

    wonwoostar
    Participant

    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 4 months ago by  wonwoostar.
    angular jqxdocking layout questions #106161

    wonwoostar
    Participant

    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.

    angular jqxdocking layout questions #106174

    wonwoostar
    Participant

    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>
    
    angular jqxdocking layout questions #106213

    Hristo
    Participant

    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

    angular jqxdocking layout questions #106232

    wonwoostar
    Participant

    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 months, 3 weeks ago by  wonwoostar.
    angular jqxdocking layout questions #106237

    Peter Stoev
    Keymaster

    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

    angular jqxdocking layout questions #106247

    wonwoostar
    Participant

    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 months, 3 weeks ago by  wonwoostar.
    angular jqxdocking layout questions #106254

    Hristo
    Participant

    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 months, 3 weeks ago by  Peter Stoev.
    angular jqxdocking layout questions #106264

    wonwoostar
    Participant

    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 months, 3 weeks ago by  wonwoostar.
    angular jqxdocking layout questions #106276

    Hristo
    Participant

    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

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

You must be logged in to reply to this topic.