dropdown list - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Button, DropDownList, export, Exportdata, grid, item, jqxDropDownList, jqxgrid, text

This topic contains 8 replies, has 2 voices, and was last updated by josh 11 years, 1 month ago.

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

Author

dropdown list Posts

March 10, 2014 at 7:29 am dropdown list #50750

josh

Participant

Hi,
I want to put the the export buttons on a dropdown list and have a go button so that when I select either export to excel,export to csv etc from dropdown and click on go,i get to export the data from grid to selected format.
I have used the jqxDropdown.is there a way i can remove the buttons and replace them with text on dropdown? presently the dropdown displays buttons
Regards,
Josh

March 10, 2014 at 1:20 pm dropdown list #50780

Dimitar

Participant

Hello Josh,

The jqxDropDownList widget displays styled text values in its dropdown, not buttons. Could you, please, clarify your issue?

Best Regards,
Dimitar

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

March 10, 2014 at 6:43 pm dropdown list #50793

josh

Participant

Hi Dimitar,
My issue is I want to put the export buttons(export to excel,export to csv etc)in a dropdown instead of the default one (across the page) so that a user selects the export format and click on a GO button beside the dropdown to export grid data to selected format.
Thanks in advance

March 11, 2014 at 5:55 am dropdown list #50805

Dimitar

Participant

Hi josh,

You can load your options as items in the dropdownlist (like in this JSFiddle) and when you click the “GO” button, you can check which item is selected (via the jqxDropDownList val method).

Best Regards,
Dimitar

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

March 11, 2014 at 2:28 pm dropdown list #50861

josh

Participant

Thanks Dimitar,
perhaps an example on how to use the jqxDropDownList method?
I will appreciate much

March 12, 2014 at 6:32 am dropdown list #50878

Dimitar

Participant

Hi josh,

You can find a JSFIddle example for each method, property and event available to jqxDropDownList in its API Documentation.

Best Regards,
Dimitar

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

March 14, 2014 at 7:17 am dropdown list #51035

josh

Participant

Hi Dimitar,
I have followed the API as you adviced..am able to put the buttons in dropdown,but on clicking the GO button,where do i lead the page so that it can export the data to selected format?
Hope you understand my question

March 14, 2014 at 10:15 am dropdown list #51044

Dimitar

Participant

Hi josh,

Here is a complete example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(100);

            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                altrows: true,
                sortable: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 90 },
                  { text: 'Last Name', datafield: 'lastname', width: 90 },
                  { text: 'Product', datafield: 'productname', width: 177 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellsalign: 'center', align: 'center' },
                  { text: 'Ship Date', datafield: 'date', width: 90, align: 'right', cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', align: 'right', cellsformat: 'c2' }
                ]
            });

            $("#exportOptions").jqxDropDownList({ theme: theme, source: ['xls', 'xml', 'csv', 'tsv', 'html', 'json'] });

            $("#go").jqxButton();
            $("#go").click(function () {
                var selectedOption = $("#exportOptions").jqxDropDownList('getSelectedItem');
                if (selectedOption) {
                    $("#jqxgrid").jqxGrid('exportdata', selectedOption.label, 'jqxGrid');
                };
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div style="float: left; margin-top: 15px;" id="exportOptions">
        </div>
        <button style="float: left; margin: 15px;" id="go">
            GO</button>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

March 14, 2014 at 5:24 pm dropdown list #51074

josh

Participant

Thanks a bunch Dimitar

Author

Posts

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

You must be logged in to reply to this topic.