jqxGrid inside jqxLayout

[asorgParticipant]

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.

[StanislavParticipant]

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/

[asorgParticipant]

thank you very much Stanislav, it works !

[asorgParticipant]

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

[StanislavParticipant]

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/

[asorgParticipant]

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.

[StanislavParticipant]

Hello asorg,

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

Best Regards,
Stanislav

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

[Author]

Posts