jQWidgets Forums

Tagged: datagrid control, jqxgrid control

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 8 months ago.

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

Author

jqxGrid – edit textbox with Localization with jQWidgets 3.0.3 Posts

October 3, 2013 at 1:31 pm jqxGrid – edit textbox with Localization with jQWidgets 3.0.3 #30161

Participant

When I change to german localization, that is, the symbol “.” as thousands separator and “,” as decimal separator,
those cells with a float value and type “TextBox” don’t show correct decimalseparator “,” after editing the cell.

* localizationobj.decimalseparator = “,”;
* localizationobj.thousandsseparator = “.”;
* { text: ‘Preis’, datafield: ‘price’, columntype: ‘textbox’, filtertype: ‘textbox’, cellsformat: “f2”, cellsalign: ‘left’, width: 260 }

* datafields: [
{ name: ‘Id’, type: ‘string’ },
{ name: ‘Date’, type: ‘date’ },
{ name: ‘price’, type: ‘number’ },
{ name: ‘Comment’, type: ‘string’ }

With these changes, if I introduce a number in Preis column, when I try to edit it, the value of cell after updaterow (this works correct) has no german decimalseparator, it remains with english decimalseparator.

Please, see the topic from sergio 20 September 2013. I can reproduce this behaviour with jQWidgets 3.0.3.

October 3, 2013 at 5:08 pm jqxGrid – edit textbox with Localization with jQWidgets 3.0.3 #30182

Peter Stoev

Keymaster

Hi reggaeone13,

According to us, there is no problem with the TextBox Editing.

Let me explain it:

1. Take a look at the sample below with German localization:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example illustrates the Grid filtering feature. Enter some data into the Filter Row.</title>
    <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/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/gettheme.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            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);
            var getLocalization = function () {
                var localizationobj = {};
                localizationobj.pagergotopagestring = "Gehe zu:";
                localizationobj.pagershowrowsstring = "Zeige Zeile:";
                localizationobj.pagerrangestring = " von ";
                localizationobj.pagernextbuttonstring = "voriger";
                localizationobj.pagerpreviousbuttonstring = "nächster";
                localizationobj.sortascendingstring = "Sortiere aufsteigend";
                localizationobj.sortdescendingstring = "Sortiere absteigend";
                localizationobj.sortremovestring = "Entferne Sortierung";
                localizationobj.firstDay = 1;
                localizationobj.percentsymbol = "%";
                localizationobj.currencysymbol = "€";
                localizationobj.currencysymbolposition = "after";
                localizationobj.decimalseparator = ",";
                localizationobj.thousandsseparator = ".";
                var days = {
                    // full day names
                    names: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
                    // abbreviated day names
                    namesAbbr: ["Sonn", "Mon", "Dien", "Mitt", "Donn", "Fre", "Sams"],
                    // shortest day names
                    namesShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]
                };
                localizationobj.days = days;
                var months = {
                    // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
                    names: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", ""],
                    // abbreviated month names
                    namesAbbr: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dez", ""]
                };
                var patterns = {
                    d: "dd.MM.yyyy",
                    D: "dddd, d. MMMM yyyy",
                    t: "HH:mm",
                    T: "HH:mm:ss",
                    f: "dddd, d. MMMM yyyy HH:mm",
                    F: "dddd, d. MMMM yyyy HH:mm:ss",
                    M: "dd MMMM",
                    Y: "MMMM yyyy"
                }
                localizationobj.patterns = patterns;
                localizationobj.months = months;
                localizationobj.todaystring = "Heute";
                localizationobj.clearstring = "Löschen";
                return localizationobj;
            }
            $("#jqxgrid").jqxGrid(
            {
                width: 685,
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                pageable: true,
                autoheight: true,
                editable: true,
                
                theme: theme,
                localization: getLocalization(),
                selectionmode: 'singlecell',
                columns: [
                  { text: 'Name', columntype: 'textbox', filtertype: 'textbox', datafield: 'name', width: 115 },
                  { 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: 'textbox', filtertype: 'textbox', cellsformat: "c2", cellsalign: 'right' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

2. Open the first cell from the Preis column for editing and type: 3,34. The result is 3,34€ after leaving the edit mode. According to me, that is the correct value.

Best Regards,
Peter Stoev

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

October 4, 2013 at 3:42 pm jqxGrid – edit textbox with Localization with jQWidgets 3.0.3 #30251

reggaeone13

Participant

Hi Peter,

thank you very much for the reply.

Yes, I test even now this grid with the values from the local array. This works fine, but I don’t have the data into an local array.
My data comes from SQL Database by using a .asmx Web Service and dataType: ‘json’. So, when I call the Web Method to get the data (GetData), the values into the column Preis are correctly displayed (with “,” decimal separator), but after the cell was edited the localization change to en-EN. If I make a reload of the grid, then the edited cells are with “,” decimal separator again.

Please, what can I do to make this to work?

Thanks a lot for the answer!!!

October 4, 2013 at 4:31 pm jqxGrid – edit textbox with Localization with jQWidgets 3.0.3 #30255

Peter Stoev

Keymaster

Hi reggaeone13,

That actually should not be a problem. Do you set the “type” member of your data fields array during the source object’s initialization? Could you provide the JSON or some sample JSON that you try to load in the Grid? Then I will try to modify the above sample?

Best Regards,
Peter Stoev

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.