Unable to click on jqxGrid in jqxLayout - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: disable click, jqxGrid ;, jqxLayout

This topic contains 2 replies, has 2 voices, and was last updated by Martin 4 years, 5 months ago.

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

Author

Unable to click on jqxGrid in jqxLayout Posts

June 8, 2020 at 8:52 am Unable to click on jqxGrid in jqxLayout #112151

Participant

Hi;
I placed one jqxGrid in jqxLayout. jqxGrid is not clicking now. What am I missing?
I tested it with chromium browser (jqwidgets version 9.1.6) and jseditor.io on my own computer. I could not run it in either test environment.

Thanks in advance for the help.

Here is my code example below.

———————————————–
Html
———————————————–

<HTML>
	<HEAD>
	</HEAD>
	<BODY>
        <div id="jqxLayout">
            <div data-container="ToolboxPanel">
                List of tools</div>
            <div data-container="HelpPanel">
                Help topics</div>
            <!--documentGroup-->
            <div data-container="Document1Panel">
                Document 1 content</div>
            <div data-container="Document2Panel">
                Document 2 content</div>
            <!--bottom tabbedGroup-->
            <div data-container="ErrorListPanel">
                List of errors</div>
            <div data-container="OutputPanel">
                <div>
                    <div id="grid"> </div>
                </div>
                Grid</div>
            <!--right tabbedGroup-->
            <div data-container="SolutionExplorerPanel">
                Solution structure</div>
            <div data-container="PropertiesPanel">
                List of properties</div>
        </div>
	</BODY>
</HTML>

———————————————–
javascript
———————————————–

$(document).ready(function () {
            
            var source =
            {
                localdata: [
                    ["Alfreds Futterkiste", "Maria Anders", "Sales Representative", "Obere Str. 57", "Berlin", "Germany"],
                    ["Ana Trujillo Emparedados y helados", "Ana Trujillo", "Owner", "Avda. de la Constitucin 2222", "Mxico D.F.", "Mexico"],
                    ["Antonio Moreno Taquera", "Antonio Moreno", "Owner", "Mataderos 2312", "Mxico D.F.", "Mexico"],
                    ["Around the Horn", "Thomas Hardy", "Sales Representative", "120 Hanover Sq.", "London", "UK"],
                    ["Berglunds snabbkp", "Christina Berglund", "Order Administrator", "Berguvsvgen 8", "Lule", "Sweden"],
                    ["Blauer See Delikatessen", "Hanna Moos", "Sales Representative", "Forsterstr. 57", "Mannheim", "Germany"],
                    ["Blondesddsl pre et fils", "Frdrique Citeaux", "Marketing Manager", "24, place Klber", "Strasbourg", "France"],
                    ["Blido Comidas preparadas", "Martn Sommer", "Owner", "C\/ Araquil, 67", "Madrid", "Spain"],
                    ["Bon app'", "Laurence Lebihan", "Owner", "12, rue des Bouchers", "Marseille", "France"],
                    ["Bottom-Dollar Markets", "Elizabeth Lincoln", "Accounting Manager", "23 Tsawassen Blvd.", "Tsawassen", "Canada"],
                    ["B's Beverages", "Victoria Ashworth", "Sales Representative", "Fauntleroy Circus", "London", "UK"],
                    ["Cactus Comidas para llevar", "Patricio Simpson", "Sales Agent", "Cerrito 333", "Buenos Aires", "Argentina"],
                    ["Centro comercial Moctezuma", "Francisco Chang", "Marketing Manager", "Sierras de Granada 9993", "Mxico D.F.", "Mexico"],
                    ["Chop-suey Chinese", "Yang Wang", "Owner", "Hauptstr. 29", "Bern", "Switzerland"],
                    ["Comrcio Mineiro", "Pedro Afonso", "Sales Associate", "Av. dos Lusadas, 23", "Sao Paulo", "Brazil"],
                    ["Consolidated Holdings", "Elizabeth Brown", "Sales Representative", "Berkeley Gardens 12 Brewery", "London", "UK"],
                    ["Drachenblut Delikatessen", "Sven Ottlieb", "Order Administrator", "Walserweg 21", "Aachen", "Germany"],
                    ["Du monde entier", "Janine Labrune", "Owner", "67, rue des Cinquante Otages", "Nantes", "France"],
                    ["Eastern Connection", "Ann Devon", "Sales Agent", "35 King George", "London", "UK"],
                    ["Ernst Handel", "Roland Mendel", "Sales Manager", "Kirchgasse 6", "Graz", "Austria"]
                ],
                datafields: [
                    { name: 'CompanyName', type: 'string', map: '0'},
                    { name: 'ContactName', type: 'string', map: '1' },
                    { name: 'Title', type: 'string', map: '2' },
                    { name: 'Address', type: 'string', map: '3' },
                    { name: 'City', type: 'string', map: '4' },
                    { name: 'Country', type: 'string', map: '5' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            
            $("#grid").jqxGrid(
            {
                width: '100%',
                source: dataAdapter,
                columnsresize: true,
                sortable: true,
                columns: [
                  { text: 'Company Name', datafield: 'CompanyName', width: 200 },
                  { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                  { text: 'Contact Title', datafield: 'Title', width: 100 },
                  { text: 'Address', datafield: 'Address', width: 100 },
                  { text: 'City', datafield: 'City', width: 100 },
                  { text: 'Country', datafield: 'Country' }
                ]
            });    
    
    var layout = [{
        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: 500,
            items: [{
                type: 'documentGroup',
                height: 400,
                minHeight: 200,
                items: [{
                    type: 'documentPanel',
                    title: 'Document 1',
                    contentContainer: 'Document1Panel'

                }, {
                    type: 'documentPanel',
                    title: 'Document 2',
                    contentContainer: 'Document2Panel'
                }]
            }, {
                type: 'tabbedGroup',
                height: 200,
                pinnedHeight: 30,
                items: [{
                    type: 'layoutPanel',
                    title: 'Error List',
                    contentContainer: 'ErrorListPanel'
                }, {
                    type: 'layoutPanel',
                    title: 'Output',
                    contentContainer: 'OutputPanel',
                    selected: true
                }]
            }]
        }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
                type: 'layoutPanel',
                title: 'Solution Explorer',
                contentContainer: 'SolutionExplorerPanel'
            }, {
                type: 'layoutPanel',
                title: 'Properties',
                contentContainer: 'PropertiesPanel'
            }]
        }]
    }];

    $('#jqxLayout').jqxLayout({ theme: 'energyblue', width: 800, height: 600, layout: layout, resizable: false });
});

June 8, 2020 at 10:05 am Unable to click on jqxGrid in jqxLayout #112155

mustafaseker

Participant

It worked when the code was corrected as follows 🙂

Grid (or other things) should be used after the layout is created. I found it in API documentation

thanks.

———————————————–
javascript
———————————————–

$(document).ready(function () {
            
            var source =
            {
                localdata: [
                    ["Alfreds Futterkiste", "Maria Anders", "Sales Representative", "Obere Str. 57", "Berlin", "Germany"],
                    ["Ana Trujillo Emparedados y helados", "Ana Trujillo", "Owner", "Avda. de la Constitucin 2222", "Mxico D.F.", "Mexico"],
                    ["Antonio Moreno Taquera", "Antonio Moreno", "Owner", "Mataderos 2312", "Mxico D.F.", "Mexico"],
                    ["Around the Horn", "Thomas Hardy", "Sales Representative", "120 Hanover Sq.", "London", "UK"],
                    ["Berglunds snabbkp", "Christina Berglund", "Order Administrator", "Berguvsvgen 8", "Lule", "Sweden"],
                    ["Blauer See Delikatessen", "Hanna Moos", "Sales Representative", "Forsterstr. 57", "Mannheim", "Germany"],
                    ["Blondesddsl pre et fils", "Frdrique Citeaux", "Marketing Manager", "24, place Klber", "Strasbourg", "France"],
                    ["Blido Comidas preparadas", "Martn Sommer", "Owner", "C\/ Araquil, 67", "Madrid", "Spain"],
                    ["Bon app'", "Laurence Lebihan", "Owner", "12, rue des Bouchers", "Marseille", "France"],
                    ["Bottom-Dollar Markets", "Elizabeth Lincoln", "Accounting Manager", "23 Tsawassen Blvd.", "Tsawassen", "Canada"],
                    ["B's Beverages", "Victoria Ashworth", "Sales Representative", "Fauntleroy Circus", "London", "UK"],
                    ["Cactus Comidas para llevar", "Patricio Simpson", "Sales Agent", "Cerrito 333", "Buenos Aires", "Argentina"],
                    ["Centro comercial Moctezuma", "Francisco Chang", "Marketing Manager", "Sierras de Granada 9993", "Mxico D.F.", "Mexico"],
                    ["Chop-suey Chinese", "Yang Wang", "Owner", "Hauptstr. 29", "Bern", "Switzerland"],
                    ["Comrcio Mineiro", "Pedro Afonso", "Sales Associate", "Av. dos Lusadas, 23", "Sao Paulo", "Brazil"],
                    ["Consolidated Holdings", "Elizabeth Brown", "Sales Representative", "Berkeley Gardens 12 Brewery", "London", "UK"],
                    ["Drachenblut Delikatessen", "Sven Ottlieb", "Order Administrator", "Walserweg 21", "Aachen", "Germany"],
                    ["Du monde entier", "Janine Labrune", "Owner", "67, rue des Cinquante Otages", "Nantes", "France"],
                    ["Eastern Connection", "Ann Devon", "Sales Agent", "35 King George", "London", "UK"],
                    ["Ernst Handel", "Roland Mendel", "Sales Manager", "Kirchgasse 6", "Graz", "Austria"]
                ],
                datafields: [
                    { name: 'CompanyName', type: 'string', map: '0'},
                    { name: 'ContactName', type: 'string', map: '1' },
                    { name: 'Title', type: 'string', map: '2' },
                    { name: 'Address', type: 'string', map: '3' },
                    { name: 'City', type: 'string', map: '4' },
                    { name: 'Country', type: 'string', map: '5' }
                ],
                datatype: "array"
            };
            
            var dataAdapter = new $.jqx.dataAdapter(source);
            

    
    var layout = [{
        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: 500,
            items: [{
                type: 'documentGroup',
                height: 400,
                minHeight: 200,
                items: [{
                    type: 'documentPanel',
                    title: 'Document 1',
                    contentContainer: 'Document1Panel'

                }, {
                    type: 'documentPanel',
                    title: 'Document 2',
                    contentContainer: 'Document2Panel'
                }]
            }, {
                type: 'tabbedGroup',
                height: 200,
                pinnedHeight: 30,
                items: [{
                    type: 'layoutPanel',
                    title: 'Error List',
                    contentContainer: 'ErrorListPanel'
                }, {
                    type: 'layoutPanel',
                    title: 'Output',
                    contentContainer: 'OutputPanel',
                    selected: true
                }]
            }]
        }, {
            type: 'tabbedGroup',
            width: 220,
            minWidth: 200,
            items: [{
                type: 'layoutPanel',
                title: 'Solution Explorer',
                contentContainer: 'SolutionExplorerPanel'
            }, {
                type: 'layoutPanel',
                title: 'Properties',
                contentContainer: 'PropertiesPanel'
            }]
        }]
    }];
    
    $('#jqxLayout').on('create', function () {
           $("#grid").jqxGrid(
                {
                    width: '100%',
                    source: dataAdapter,
                    columnsresize: true,
                    sortable: true,
                    columns: [
                      { text: 'Company Name', datafield: 'CompanyName', width: 200 },
                      { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                      { text: 'Contact Title', datafield: 'Title', width: 100 },
                      { text: 'Address', datafield: 'Address', width: 100 },
                      { text: 'City', datafield: 'City', width: 100 },
                      { text: 'Country', datafield: 'Country' }
                    ]
                });   
            
        });      

    $('#jqxLayout').jqxLayout({ theme: 'energyblue', width: 800, height: 600, layout: layout, resizable: false });
    
    
});

June 9, 2020 at 8:33 am Unable to click on jqxGrid in jqxLayout #112166

Martin

Participant

Hello mustafaseker,

Thank you for the update.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.