changing localization dynamically - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: change, dynamically, grid, jqxgrid, localization, localization object, localizestrings

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

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

Author

changing localization dynamically Posts

March 24, 2015 at 7:55 pm changing localization dynamically #69102

NetMan

Participant

Is there a way to change the localization object as the grid is rendering based on currency type? (we need to use different currency formats) I tried cellsrenderer but appears localizationobj can only be set once. None of your demo’s or forum arguments address this functionality.

Appreciate any advice.
NetMan

March 25, 2015 at 6:40 am changing localization dynamically #69110

Dimitar

Participant

Hello NetMan,

Here is an example that shows how to set the localization dynamically. It is based on the Localization demo.

<!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.11.1.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/jqxscrollbar.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="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.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/jqxpanel.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript" src="localization.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = generatedata(250);
            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'name', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ],
                datatype: "array"
            };

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

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                pageable: true,
                autoheight: true,
                editable: true,
                localization: getLocalization('de'),
                selectionmode: 'singlecell',
                columns: [
                  { text: 'Name', columntype: 'textbox', filtertype: 'textbox', datafield: 'name', width: 180 },
                  { text: 'Produkt', filtertype: 'textbox', datafield: 'productname', width: 220 },
                  { text: 'Datum', datafield: 'date', columntype: 'datetimeinput', filtertype: 'date', width: 210, cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Qt.', datafield: 'quantity', columntype: 'numberinput', filtertype: 'textbox', cellsalign: 'right', width: 60 },
                  { text: 'Preis', datafield: 'price', columntype: 'numberinput', filtertype: 'textbox', cellsformat: "c2", cellsalign: 'right' }
                ]
            });

            $('#jqxdropdownlist').jqxDropDownList({ source: ['de', 'en'], selectedIndex: 0, width: '200', height: '25', autoDropDownHeight: true });
            $('#jqxdropdownlist').on('change', function (event) {
                var args = event.args;
                if (args) {
                    var label = args.item.label;
                    $("#jqxgrid").jqxGrid('localizestrings', getLocalization(label));
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <br />
    <div id='jqxdropdownlist'>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

March 25, 2015 at 11:22 am changing localization dynamically #69133

NetMan

Participant

Hi Dimitar,

Not quite what I was asking. As the grid renders there are different currencies in a currency column. So I need to change localization based on the currency column. Cellsrenderer it seems is the necessary approach but can only change localizationobj once. Is it possible to change the localizationobj as the grid renders?

Appreciate any further advice.
NetMan

March 25, 2015 at 1:53 pm changing localization dynamically #69141

Dimitar

Participant

Hi NetMan,

I am not sure what your scenario is without any sample code. The localization object can be applied during run time with localizestrings, as shown in our example. With cellsrenderer, you can customize the cell text however you like. Maybe you would like to invoke cellsrenderer programmatically so it refreshes the cells? If so, you can do this by calling the grid’s refresh method.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.