jQWidgets Forums

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

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

Author

openColumnChooser questions Posts

July 9, 2020 at 11:36 am openColumnChooser questions #112367

Participant

Hello,

1. I can’t find the localization strings for the ColumnChooser in documentation:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-localization.htm

2. Is there a way to use the ColumnChooser to set the columns, that will be used for export? If I reduce the number of columns and than print – everything is as expected – I get only the reduced columns. If I try to export to for example xlsx, I always get all columns as a resault in the export. What I want to achieve is that I use the ColumnChooser to select a number of columns and then ONLY these columns are also exported.

Thanks.

July 9, 2020 at 2:50 pm openColumnChooser questions #112371

Hristo

Participant

Hello DeployDuck,

You could use the localization object as in the example below:

<!DOCTYPE html>
<html lang="en">

<head>
    <title id="Description">In this sample is demonstrated the jqxGrid column choooser.</title>
    <meta name="description" content="JavaScript Grid which has multiple built-in aggregates" />
    <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxwindow.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.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(200);

            var source = {
                localdata: data,
                datatype: "array",
                datafields: [{
                    name: "firstname",
                    type: "string"
                }, {
                    name: "lastname",
                    type: "string"
                }, {
                    name: "productname",
                    type: "string"
                }, {
                    name: "available",
                    type: "bool"
                }, {
                    name: "quantity",
                    type: "number"
                }, {
                    name: "price",
                    type: "number"
                }],
                updaterow: function(rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };

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

            // initialize jqxGrid
            $("#grid").jqxGrid({
                width: getWidth("Grid"),
                source: dataAdapter,
                showStatusBar: true,
                statusBarHeight: 50,
                editable: true,
                selectionMode: "multiplecellsadvanced",
                localization: {
                    okstring: "OK",
                    cancelstring: "CANCEL"
                },
                columns: [{
                    text: "First Name",
                    columnType: "textbox",
                    dataField: "firstname",
                    width: 170
                }, {
                    text: "Last Name",
                    dataField: "lastname",
                    columnType: "textbox",
                    width: 170
                }, {
                    text: "Product",
                    dataField: "productname",
                    width: 170
                }, {
                    text: "In Stock",
                    dataField: "available",
                    columnType: "checkbox",
                    width: 125
                }, {
                    text: "Quantity",
                    dataField: "quantity",
                    width: 85,
                    cellsAlign: "right",
                    cellsFormat: "n2"
                }, {
                    text: "Price",
                    dataField: "price",
                    cellsAlign: "right",
                    cellsFormat: "c2"
                }]
            });

            $("#openButton").jqxButton();

            $("#openButton").on("click", function() {
                $("#grid").jqxGrid("openColumnChooser");
            });
        });
    </script>
</head>

<body class="default">
    <div id="grid"></div>
    <br>
    <button id="openButton">Open Column Chooser</button>
</body>

</html>

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

July 9, 2020 at 4:06 pm openColumnChooser questions #112373

DeployDuck

Participant

Hello Hristo,
thank you for your (part) answer.

Sorry, I can’t see the localisation-string for the columnchooser dialog header.

Also my question 2 is still open.

Thanks

July 10, 2020 at 8:41 am openColumnChooser questions #112384

Hristo

Participant

Hello DeployDuck,

I would like to purpose your attention to the localization property.
If you try this example you could see that naming of the buttons in the “column chooser” dialog is changed.
About exporting, you need to handle it with your own logic.
The exportable: false option as a member of the desired column will be useful.
You could get all columns that are visible and set it for these of them that are not visible.
Please, take a look at this example:
http://jsfiddle.net/txhi/9d36n7Lo/

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

July 10, 2020 at 9:40 am openColumnChooser questions #112390

DeployDuck

Participant

Hello Hristo,
thank you for the example. It helps a lot with export.

————
But… the localisation problem still exists – sorry.
I have seen the localisation for the Buttons – no problem.

Missing is the localisation-string for the HEADER “Columns” of the dialog.
I’m commercial customer and have access to the source-code, so I took a look into jqxgrig.js
It seems you have hardcoded the dialogs header in jqxgrid.js in the function “openColumnChooser” in row 2075:

openColumnChooser: function (columns, header) {
            var that = this;

            if (!header) {
                header = "Columns";
            }
...

Therefore a translationstring for the header is missing in the loalisationobj.

Best regards.

July 22, 2020 at 11:00 am openColumnChooser questions #112466

Hristo

Participant

Hello DeployDuck,

I will create a work item for this case.
Meanwhile, you could try this approach:
$(".jqx-window-header").first().text("New Collumns");
Use it after opening the Column Chooser.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.