jQuery UI Widgets Forums Angular jqxGrid inside jqxLayout

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • jqxGrid inside jqxLayout #99555

    asorg
    Participant

    Dear All

    I’m trying to show jqxGrid inside jqxLayout.

    my App.Component.ts as follows :

    import {AfterViewInit, Component} from '@angular/core';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
    })
    
    export class AppComponent implements AfterViewInit {
        sourcegrid: any =
            {
                datatype: 'xml',
                datafields: [
                    { name: 'ProductName', type: 'string' },
                    { name: 'QuantityPerUnit', type: 'int' },
                    { name: 'UnitPrice', type: 'float' },
                    { name: 'UnitsInStock', type: 'float' },
                    { name: 'Discontinued', type: 'bool' }
                ],
                root: 'Products',
                record: 'Product',
                id: 'ProductID',
                url: '../assets/products.xml'
            };
    
        dataAdapter: any = new jqx.dataAdapter(this.sourcegrid);
    
        cellsrenderer = (row: number, columnfield: string, value: string | number, defaulthtml: string, columnproperties: any, rowdata: any): string => {
            if (value < 20) {
                return <code><span style='margin: 4px; float:${columnproperties.cellsalign}; color: #ff0000;'>${value}</span></code>;
            }
            else {
                return <code><span style='margin: 4px; float:${columnproperties.cellsalign}; color: #008000;'>${value}</span></code>;
            }
        };
    
        columns: any[] =
            [
                { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
                { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right' },
                { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2' },
                { text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: this.cellsrenderer, width: 100 },
                { text: 'Discontinued', columntype: 'checkbox', datafield: 'Discontinued', align: 'center' }
            ];
    
        columngroups: any[] =
            [
                { text: 'Product Details', align: 'center', name: 'ProductDetails' }
            ];
    
        source: any[] =
            [{
                icon: '../images/earth.png',
                label: 'Project',
                expanded: true,
                items: [{
                    icon: '../images/folder.png',
                    label: 'css',
                    expanded: true,
                    items: [{
                        icon: '../images/nav1.png',
                        label: 'jqx.base.css'
                    }, {
                        icon: '../images/nav1.png',
                        label: 'jqx.energyblue.css'
                    }, {
                        icon: '../images/nav1.png',
                        label: 'jqx.orange.css'
                    }]
                }, {
                    icon: '../images/folder.png',
                    label: 'scripts',
                    items: [{
                        icon: '../images/nav1.png',
                        label: 'jqxcore.js'
                    }, {
                        icon: '../images/nav1.png',
                        label: 'jqxdata.js'
                    }, {
                        icon: '../images/nav1.png',
                        label: 'jqxgrid.js'
                    }]
                }, {
                    icon: '../images/nav1.png',
                    label: 'index.htm'
                }]
            }];
    
        layout: any[] =
            [{
                type: 'layoutGroup',
                orientation: 'vertical',
                height:800,
                items: [{
                    type: 'autoHideGroup',
                    alignment: 'top',
                    items: [{
                        type: 'layoutPanel',
                        title: 'Toolbox',
                        contentContainer: 'ToolboxPanel'
                    }, {
                        type: 'layoutPanel',
                        title: 'Help',
                        contentContainer: 'HelpPanel'
                    }]
                }, {
                    type: 'layoutGroup',
                    orientation: 'horizontal',
                    height: 400,
                    width: 500,
                    items: [{
                        type: 'documentGroup',
                        width:500,
                        items: [{
                            type: 'documentPanel',
                            title: 'Document 1',
                            contentContainer: 'Document1Panel'
                        }]
                    }]
                }, {
                        type: 'tabbedGroup',
                        height: 200,
                        pinnedHeight: 30,
                        items: [{
                            type: 'layoutPanel',
                            title: 'Error List',
                            contentContainer: 'ErrorListPanel'
                        }, {
                            type: 'layoutPanel',
                            title: 'Output',
                            contentContainer: 'OutputPanel',
                            selected: true
                        }]
                    }]
            }];
    
        ngAfterViewInit(): void {
    
            const myGrid = jqwidgets.createInstance('#myjqGrid', 'jqxGrid', {
                width: "400",
                source: "dataAdapter",
                columns: "columns",
                pageable:" true",
                autoheight: "true",
                sortable: "true",
                altrows: "true",
                enabletooltips: "true",
                editable: "true",
                selectionmode: "'multiplecellsadvanced'",
                columngroups: "columngroups"
            });
    
        }
    
    }

    my app.component.html as follows :

    <jqxLayout [width]="800" [height]="900" [layout]="layout">
        <!--The panel content divs can have a flat structure-->
        <!--autoHideGroup-->
        <div data-container="ToolboxPanel">
            List of tools
        </div>
        <div data-container="HelpPanel">
            Help topics
        </div>
        <!--documentGroup-->
        <div data-container="Document1Panel">
            <div id="myjqGrid"></div>
    
            <!--<jqxGrid
                    [width]="300" [source]="dataAdapter" [columns]="columns"
                    [pageable]="true" [autoheight]="true" [sortable]="true"
                    [altrows]="true" [enabletooltips]="true" [editable]="true"
                    [selectionmode]="'multiplecellsadvanced'" [columngroups]="columngroups">
            </jqxGrid>-->
        </div>
        <!--bottom tabbedGroup-->
        <div data-container="ErrorListPanel">
            List of errors
        </div>
        <div data-container="OutputPanel">
            Output
        </div>
    
    </jqxLayout>
    

    It shows the Layout and Grid but, the Grid only shows the animation ‘Loading…’.
    No data is shown. But if I remove all the jqxLayout code, the Grid shows the data.
    The angular app was generated by create-jqwidgets-angular-app plus some additional code for jqxLayout of course.

    Help please ?

    Thank you in advance.

    • This topic was modified 2 years, 3 months ago by  asorg.
    • This topic was modified 2 years, 3 months ago by  asorg.
    • This topic was modified 2 years, 3 months ago by  asorg.
    • This topic was modified 2 years, 3 months ago by  asorg.
    • This topic was modified 2 years, 3 months ago by  asorg.
    jqxGrid inside jqxLayout #99571

    Stanislav
    Participant

    Hello asorg,

    Here is an example:

    app.compoment.html

    
    <jqxLayout [width]="800" [height]="600" [layout]="layout">
    	<!--The panel content divs can have a flat structure-->
    	<!--autoHideGroup-->
    	<div data-container="ToolboxPanel">
    		List of tools
    	</div>
    	<div data-container="HelpPanel">
    		Help topics
    	</div>
    	<!--documentGroup-->
    	<div data-container="Document1Panel">
    
    		<div id="gridContainer" style="border: none;"></div>
    
    	</div>
    	<div data-container="Document2Panel">
    		Document 2 content
    	</div>
    </jqxLayout>
    

    app.component.ts

    
    import { Component } from '@angular/core';
    
    import { generatedata } from '../assets/sampledata/generatedata';
    
    @Component({
    	selector: 'app-root',
    	templateUrl: './app.component.html'
    })
    
    export class AppComponent {
        source: any =
        {
            datatype: 'xml',
            datafields: [
                { name: 'ProductName', type: 'string' },
                { name: 'QuantityPerUnit', type: 'int' },
                { name: 'UnitPrice', type: 'float' },
                { name: 'UnitsInStock', type: 'float' },
                { name: 'Discontinued', type: 'bool' }
            ],
            root: 'Products',
            record: 'Product',
            id: 'ProductID',
            url: '../assets/sampledata/products.xml'
        };
        dataAdapter: any = new jqx.dataAdapter(this.source);
    
        columns: any[] =
        [
            { text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250 },
            { text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right' },
            { text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2' }
        ];
    
        layout: any[] =
        [{
            type: 'layoutGroup',
            orientation: 'horizontal',
            items: [{
                type: 'autoHideGroup',
                alignment: 'left',
                width: 80,
                unpinnedWidth: 200,
                items: [{
                    type: 'layoutPanel',
                    title: 'Toolbox',
                    contentContainer: 'ToolboxPanel'
                }, {
                    type: 'layoutPanel',
                    title: 'Help',
                    contentContainer: 'HelpPanel'
                }]
            }, {
                type: 'layoutGroup',
                orientation: 'vertical',
                width: 720,
                items: [{
                    type: 'documentGroup',
                    height: 600,
                    minHeight: 200,
                    items: [{
                        type: 'documentPanel',
                        title: 'Document 1',
                        contentContainer: 'Document1Panel',
                        initContent: () => {
                            jqwidgets.createInstance('#gridContainer', 'jqxGrid', { source: this.dataAdapter, columns: this.columns, width: 700, height: 500 });
                        }
                    }, {
                        type: 'documentPanel',
                        title: 'Document 2',
                        contentContainer: 'Document2Panel'
                    }]
                }]
            }]
        }];
    }
    

    Best Regards,
    Stanislav

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

    jqxGrid inside jqxLayout #99576

    asorg
    Participant

    thank you very much Stanislav, it works !

    jqxGrid inside jqxLayout #99577

    asorg
    Participant

    btw is there a way to integrate Grid’s scroll bar into Document1Panel’s scroll bar ?
    right now it is showing 2 scroll bars, 1 from the grid, 1 from the layout.

    Thank you

    jqxGrid inside jqxLayout #99583

    Stanislav
    Participant

    Hello asorg,

    Can you please give us some more information?
    1) How are you setting the width and height of the grid in the document panel?
    2) What values are you giving the width and height?
    3) How are you setting the Layout?

    I did a test with my example, and I set up the grid like this:

    
    initContent: () => {
    	jqwidgets.createInstance('#gridContainer', 'jqxGrid', { source: this.dataAdapter, columns: this.columns, width: '100%', height: '100%' });
    }
    

    The grid filled the whole space in the document panel. A scrollbar for the panel did not show.
    But I don’t have a lot of panels in my Layout.
    Just the panel on the left(pinned panel with ‘Toolbox’ and ‘Help’) and the document panels (‘document 1’ and ‘document 2’)
    If you have panels to the right of the document panels, they might be causing the issues.

    Best Regards,
    Stanislav

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

    jqxGrid inside jqxLayout #99594

    asorg
    Participant

    Thank you once again Stanislav,
    It is perfect as I wanted to be.

    I remember I tried to use HTML format

    <jqxGrid
                    [width]="100%" [source]="dataAdapter" [columns]="columns"
                    [pageable]="true" [autoheight]="true" [sortable]="true"
                    [altrows]="true" [enabletooltips]="true" [editable]="true"
                    [selectionmode]="'multiplecellsadvanced'" [columngroups]="columngroups">
    </jqxGrid>
    

    If I’m not mistaken, compiler rejected [width]=”100%”, showing error.

    jqxGrid inside jqxLayout #99595

    Stanislav
    Participant

    Hello asorg,

    Thanks for the update!
    Glad to hear you managed things on your own!

    Best Regards,
    Stanislav

    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.