jQuery UI Widgets Forums Grid changing localization dynamically

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • 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

    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/

    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

    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/

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

You must be logged in to reply to this topic.