jQWidgets Forums

Tagged: data table, group, groupsrenderer, jqxdatatable, jqxMenu, Menu, percent, percentage, setItemOpenDirection, width

This topic contains 10 replies, has 2 voices, and was last updated by my_2000 9 years, 3 months ago.

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

Author

whether to support jqxmenu? Posts

January 18, 2016 at 3:38 am whether to support jqxmenu? #80460

my_2000

Participant

DataTable groups attributes whether to support jqxmenu? Can give an example?

<script type="text/javascript">

        $(document).ready(function () {
            // prepare the data
            var source =
            {
                dataType: "xml",
                dataFields: [
                     { name: 'SupplierName', type: 'string' },
                     { name: 'Quantity', type: 'number' },
                     { name: 'OrderDate', type: 'date' },
                     { name: 'OrderAddress', type: 'string' },
                     { name: 'Freight', type: 'number' },
                     { name: 'Price', type: 'number' },
                     { name: 'City', type: 'string' },
                     { name: 'ProductName', type: 'string' },
                     { name: 'Address', type: 'string' }
                ],
                url: 'orderdetailsextended.xml',
                root: 'DATA',
                record: 'ROW'
            };

            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {
                    // data is loaded.
                }

            });
            $("#dataTable").jqxDataTable(
            {
                source: dataAdapter,
                pageable: true,
                altRows: true,
                sortable: true,
                groups: ['SupplierName'],
                width: 850,
                groupsRenderer: function(value, rowData, level)
                {
                	return'<div id="jqxMenu"><ul><li>1</li><li>2</li></ul></div>'
                },
                columns: [
                  { text: 'Supplier Name', hidden: true, cellsAlign: 'left', align: 'left', dataField: 'SupplierName', width: 280},
                  { text: 'Product Name', cellsAlign: 'left', align: 'left', dataField: 'ProductName', width: 250 },
                  { text: 'Quantity', dataField: 'Quantity', cellsformat: 'd', cellsAlign: 'right', align: 'right', width: 80 },
                  { text: 'Price', dataField: 'Price', cellsformat: 'c2', align: 'right', cellsAlign: 'right', width: 70 },
                  { text: 'Address', cellsAlign: 'center', align: 'center', dataField: 'Address', width: 250 },
                  { text: 'City', cellsAlign: 'center', align: 'center', dataField: 'City' }
                ]

            });
            $("#jqxMenu").jqxMenu({ width: '100px', height: '32px', autoSizeMainItems: true});
            $("#jqxMenu").jqxMenu('minimize');
            $("#jqxMenu").css('visibility', 'visible');
        });
    </script>
</head>
<body class='default'>
    <div id="dataTable"></div>
</body>

January 18, 2016 at 7:41 am whether to support jqxmenu? #80473

Dimitar

Participant

Hello my_2000,

Please try modifying your code as follows:

<script type="text/javascript">
    $(document).ready(function() {
        // prepare the data
        var source = {
            dataType: "xml",
            dataFields: [{
                name: 'SupplierName',
                type: 'string'
            }, {
                name: 'Quantity',
                type: 'number'
            }, {
                name: 'OrderDate',
                type: 'date'
            }, {
                name: 'OrderAddress',
                type: 'string'
            }, {
                name: 'Freight',
                type: 'number'
            }, {
                name: 'Price',
                type: 'number'
            }, {
                name: 'City',
                type: 'string'
            }, {
                name: 'ProductName',
                type: 'string'
            }, {
                name: 'Address',
                type: 'string'
            }],
            url: 'orderdetailsextended.xml',
            root: 'DATA',
            record: 'ROW'
        };

        var dataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function() {
                // data is loaded.
            }

        });
        $("#dataTable").jqxDataTable({
            source: dataAdapter,
            pageable: true,
            altRows: true,
            sortable: true,
            groups: ['SupplierName'],
            width: 850,
            groupsRenderer: function(value, rowData, level) {
                return '<div class="jqxMenu"><ul><li>1</li><li>2</li></ul></div>'
            },
            columns: [{
                text: 'Supplier Name',
                hidden: true,
                cellsAlign: 'left',
                align: 'left',
                dataField: 'SupplierName',
                width: 280
            }, {
                text: 'Product Name',
                cellsAlign: 'left',
                align: 'left',
                dataField: 'ProductName',
                width: 250
            }, {
                text: 'Quantity',
                dataField: 'Quantity',
                cellsformat: 'd',
                cellsAlign: 'right',
                align: 'right',
                width: 80
            }, {
                text: 'Price',
                dataField: 'Price',
                cellsformat: 'c2',
                align: 'right',
                cellsAlign: 'right',
                width: 70
            }, {
                text: 'Address',
                cellsAlign: 'center',
                align: 'center',
                dataField: 'Address',
                width: 250
            }, {
                text: 'City',
                cellsAlign: 'center',
                align: 'center',
                dataField: 'City'
            }],
            ready: function() {
                $(".jqxMenu").jqxMenu({
                    width: '100px',
                    height: '32px',
                    autoSizeMainItems: true
                });
                $(".jqxMenu").jqxMenu('minimize');
                $(".jqxMenu").css('visibility', 'visible');
            }
        });
    });
</script>
</head>

<body class='default'>
    <div id="dataTable"></div>
</body>

Best Regards,
Dimitar

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

January 18, 2016 at 9:51 am whether to support jqxmenu? #80481

my_2000

Participant

Thanks for the reply but there are two questions

<script type="text/javascript">
    $(document).ready(function() {
        // prepare the data
        var source = {
            dataType: "xml",
            dataFields: [{
                name: 'SupplierName',
                type: 'string'
            }, {
                name: 'Quantity',
                type: 'number'
            }, {
                name: 'OrderDate',
                type: 'date'
            }, {
                name: 'OrderAddress',
                type: 'string'
            }, {
                name: 'Freight',
                type: 'number'
            }, {
                name: 'Price',
                type: 'number'
            }, {
                name: 'City',
                type: 'string'
            }, {
                name: 'ProductName',
                type: 'string'
            }, {
                name: 'Address',
                type: 'string'
            }],
            url: 'orderdetailsextended.xml',
            root: 'DATA',
            record: 'ROW'
        };

        var dataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function() {
                // data is loaded.
            }

        });
        $("#dataTable").jqxDataTable({
            source: dataAdapter,
            pageable: true,
            altRows: true,
            sortable: true,
            groups: ['SupplierName'],
            width: 850,
            groupsRenderer: function(value, rowData, level) {
                return '<div style="width:90%;text-align:center;float:left;padding-top:6px;">' + value + '</div><div class="jqxMenu" style="float: right;" id="grid_menu"><ul><li>Option<ul><ul><li v="'+value+'">1</li><li v="'+value+'">2</li></ul></li></ul></div>'
            },
            columns: [{
                text: 'Supplier Name',
                hidden: true,
                cellsAlign: 'left',
                align: 'left',
                dataField: 'SupplierName',
                width: 280
            }, {
                text: 'Product Name',
                cellsAlign: 'left',
                align: 'left',
                dataField: 'ProductName',
                width: 250
            }, {
                text: 'Quantity',
                dataField: 'Quantity',
                cellsformat: 'd',
                cellsAlign: 'right',
                align: 'right',
                width: 80
            }, {
                text: 'Price',
                dataField: 'Price',
                cellsformat: 'c2',
                align: 'right',
                cellsAlign: 'right',
                width: 70
            }, {
                text: 'Address',
                cellsAlign: 'center',
                align: 'center',
                dataField: 'Address',
                width: 250
            }, {
                text: 'City',
                cellsAlign: 'center',
                align: 'center',
                dataField: 'City'
            }],
            ready: function() {
                $(".jqxMenu").jqxMenu({
                    width: '79px',
                    height: '30px',
                    mode: 'horizontal', 
                    showTopLevelArrows: true
                });
                $(".jqxMenu").jqxMenu('setItemOpenDirection', 'grid_menu','left', 'up');
                $(".jqxMenu").css('visibility', 'visible');
                $(".jqxMenu").on('itemclick', function (event){
					var element = event.args;
					alert(element.v);
				});
            }
        });
    });
</script>
</head>

<body class='default'>
    <div id="dataTable"></div>
</body>

1. $(".jqxMenu").jqxMenu('setItemOpenDirection', 'grid_menu','left', 'up'); don’t run!
2. itemclick alert(element.v); is undefined!

January 18, 2016 at 1:12 pm whether to support jqxmenu? #80488

Dimitar

Participant

Hi my_2000,

Here is a fixed version of your JavaScript:

<script type="text/javascript">
    $(document).ready(function() {
        // prepare the data
        var source = {
            dataType: "xml",
            dataFields: [{
                name: 'SupplierName',
                type: 'string'
            }, {
                name: 'Quantity',
                type: 'number'
            }, {
                name: 'OrderDate',
                type: 'date'
            }, {
                name: 'OrderAddress',
                type: 'string'
            }, {
                name: 'Freight',
                type: 'number'
            }, {
                name: 'Price',
                type: 'number'
            }, {
                name: 'City',
                type: 'string'
            }, {
                name: 'ProductName',
                type: 'string'
            }, {
                name: 'Address',
                type: 'string'
            }],
            url: '../sampledata/orderdetailsextended.xml',
            root: 'DATA',
            record: 'ROW'
        };

        var dataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function() {
                // data is loaded.
            }

        });
        $("#dataTable").jqxDataTable({
            source: dataAdapter,
            pageable: true,
            altRows: true,
            sortable: true,
            groups: ['SupplierName'],
            width: 850,
            groupsRenderer: function(value, rowData, level) {
                return '<div style="width:90%;text-align:center;float:left;padding-top:6px;">' + value + '</div><div class="jqxMenu" style="float: right;"><ul><li id="Option">Option<ul><ul><li v="' + value + '">1</li><li v="' + value + '">2</li></ul></li></ul></div>'
            },
            columns: [{
                text: 'Supplier Name',
                hidden: true,
                cellsAlign: 'left',
                align: 'left',
                dataField: 'SupplierName',
                width: 280
            }, {
                text: 'Product Name',
                cellsAlign: 'left',
                align: 'left',
                dataField: 'ProductName',
                width: 250
            }, {
                text: 'Quantity',
                dataField: 'Quantity',
                cellsformat: 'd',
                cellsAlign: 'right',
                align: 'right',
                width: 80
            }, {
                text: 'Price',
                dataField: 'Price',
                cellsformat: 'c2',
                align: 'right',
                cellsAlign: 'right',
                width: 70
            }, {
                text: 'Address',
                cellsAlign: 'center',
                align: 'center',
                dataField: 'Address',
                width: 250
            }, {
                text: 'City',
                cellsAlign: 'center',
                align: 'center',
                dataField: 'City'
            }],
            ready: function() {
                $(".jqxMenu").jqxMenu({
                    width: '79px',
                    height: '30px',
                    mode: 'horizontal',
                    showTopLevelArrows: true
                });
                $(".jqxMenu").jqxMenu('setItemOpenDirection', 'Option', 'left', 'up');
                $(".jqxMenu").css('visibility', 'visible');
                $(".jqxMenu").on('itemclick', function(event) {
                    var element = event.args;
                    alert($(element).attr('v'));
                });
            }
        });
    });
</script>

Best Regards,
Dimitar

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

January 19, 2016 at 8:04 am whether to support jqxmenu? #80503

my_2000

Participant

Thank you for your reply

$("#dataTable").jqxDataTable({
   ....
   width: 850,
   ....
},

is ok but

$("#dataTable").jqxDataTable({
   ....
   width: '100%',
   ....
},

display error!

January 19, 2016 at 10:02 am whether to support jqxmenu? #80512

my_2000

Participant

ready: function() {
   ....               
   var rows = $("#dataTable").jqxDataTable('getRows');
   for (var i = 0; i < rows.length; i++) {
       $("#dataTable").jqxDataTable('setCellValue', i, 'ProductName', '<div onclick="alert(1);">'+rows[i].ProductName+'</div>');
   }

display error!

January 21, 2016 at 3:38 am whether to support jqxmenu? #80610

my_2000

Participant

I solved it myself, but the first question, the table setting 100% width error of the problem, or do not know, I was so resolved, width: document.body.clientWidthI hope to tell me a good solution.

January 25, 2016 at 9:10 am whether to support jqxmenu? #80732

Dimitar

Participant

Hi my_2000,

Please specify what error is thrown in your browser’s console. Here is a working example of a data table with percentage width: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/javascript-datatable-fluid-size.htm?arctic.

Best Regards,
Dimitar

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

January 26, 2016 at 1:48 am whether to support jqxmenu? #80764

my_2000

Participant

No, you understand the error, you look at your January 18, 2016 of the reply, find `$(“#dataTable”).jqxDataTable({
…………..
width: 850,
……`
width: 850 modified into width:’100%’, you run!!!!!!!!

January 27, 2016 at 6:06 am whether to support jqxmenu? #80826

Dimitar

Participant

Hi my_2000,

I understand the issue now. Here is what you can try as a workaround (if your own solution with width: document.body.clientWidth does not suit you):

<script type="text/javascript">
    $(document).ready(function () {
        // prepare the data
        var source = {
            dataType: "xml",
            dataFields: [{
                name: 'SupplierName',
                type: 'string'
            }, {
                name: 'Quantity',
                type: 'number'
            }, {
                name: 'OrderDate',
                type: 'date'
            }, {
                name: 'OrderAddress',
                type: 'string'
            }, {
                name: 'Freight',
                type: 'number'
            }, {
                name: 'Price',
                type: 'number'
            }, {
                name: 'City',
                type: 'string'
            }, {
                name: 'ProductName',
                type: 'string'
            }, {
                name: 'Address',
                type: 'string'
            }],
            url: '../sampledata/orderdetailsextended.xml',
            root: 'DATA',
            record: 'ROW'
        };

        var dataAdapter = new $.jqx.dataAdapter(source, {
            loadComplete: function () {
                // data is loaded.
            }

        });
        $("#dataTable").jqxDataTable({
            source: dataAdapter,
            pageable: true,
            altRows: true,
            sortable: true,
            groups: ['SupplierName'],
            width: '100%',
            groupsRenderer: function (value, rowData, level) {
                setTimeout(function () {
                    initMenus();
                }, 0);
                return '<div style="width:90%;text-align:center;float:left;padding-top:6px;">' + value + '</div><div class="jqxMenu" style="float: right;"><ul><li id="Option">Option<ul><ul><li v="' + value + '">1</li><li v="' + value + '">2</li></ul></li></ul></div>'
            },
            columns: [{
                text: 'Supplier Name',
                hidden: true,
                cellsAlign: 'left',
                align: 'left',
                dataField: 'SupplierName',
                width: 280
            }, {
                text: 'Product Name',
                cellsAlign: 'left',
                align: 'left',
                dataField: 'ProductName',
                width: 250
            }, {
                text: 'Quantity',
                dataField: 'Quantity',
                cellsformat: 'd',
                cellsAlign: 'right',
                align: 'right',
                width: 80
            }, {
                text: 'Price',
                dataField: 'Price',
                cellsformat: 'c2',
                align: 'right',
                cellsAlign: 'right',
                width: 70
            }, {
                text: 'Address',
                cellsAlign: 'center',
                align: 'center',
                dataField: 'Address',
                width: 250
            }, {
                text: 'City',
                cellsAlign: 'center',
                align: 'center',
                dataField: 'City'
            }]
        });

        function initMenus() {
            $(".jqxMenu").off();
            $(".jqxMenu").jqxMenu({
                width: '79px',
                height: '30px',
                mode: 'horizontal',
                showTopLevelArrows: true
            });
            $(".jqxMenu").jqxMenu('setItemOpenDirection', 'Option', 'left', 'up');
            $(".jqxMenu").css('visibility', 'visible');
            $(".jqxMenu").on('itemclick', function (event) {
                var element = event.args;
                alert($(element).attr('v'));
            });
        }
    });
</script>

Best Regards,
Dimitar

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

January 28, 2016 at 2:25 am whether to support jqxmenu? #80870

my_2000

Participant

Thank you, right now, I see you add a line setTimeout (function) {() {initMenus}, 0);

Author

Posts

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

You must be logged in to reply to this topic.