jQWidgets Forums

jQuery UI Widgets Forums Grid Edit cell with money format

This topic contains 8 replies, has 2 voices, and was last updated by  romulo.headthink 8 years, 6 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Edit cell with money format #90460

    romulo.headthink
    Participant

    Hello.

    I’m in a trouble with edit cell.

    Money format here (Brasil) is ‘,’ to decimal places and ‘.’ to thousand.

    When I load data from database, all is correct. But when I edit cell, que value is not converted and my calcs be strong.

    I try:

    
    <script type="text/javascript">
    
        var localizationobj = $("#GridItens").jqxGrid('gridlocalization');
        localizationobj.currencysymbol = "R$";
        localizationobj.currencysymbolposition = "before";
        localizationobj.decimalseparator = ",";
        localizationobj.thousandsseparator = ".";
        localizationobj.percentsymbol = "%";
    
    </script>
    

    OR

    
    localization: getLocalization('pt')
    

    This function getLocalization :

    
    var getLocalization = function (culture) {
        var localization = null;
        switch (culture) {
            case "pt":
                localization =
                {
                    // separator of parts of a date (e.g. '/' in 11/05/1955)
                    '/': "/",
                    // separator of parts of a time (e.g. ':' in 05:44 PM)
                    ':': ":",
                    // the first day of the week (0 = Sunday, 1 = Monday, etc)
                    firstDay: 0,
                    days: {
                        // full day names
                        names: ["Domingo", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
                        // abbreviated day names
                        namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
                        // shortest day names
                        namesShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
                    },
                    months: {
                        // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
                        names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""],
                        // abbreviated month names
                        namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ""]
                    },
                    // AM and PM designators in one of these forms:
                    // The usual view, and the upper and lower case versions
                    //      [standard,lowercase,uppercase]
                    // The culture does not use AM or PM (likely all standard date formats use 24 hour time)
                    //      null
                    AM: ["AM", "am", "AM"],
                    PM: ["PM", "pm", "PM"],
                    eras: [
                    // eras in reverse chronological order.
                    // name: the name of the era in this culture (e.g. A.D., C.E.)
                    // start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.
                    // offset: offset in years from gregorian calendar
                    { "name": "A.D.", "start": null, "offset": 0 }
                    ],
                    twoDigitYearMax: 2029,
                    patterns: {
                        // short date pattern
                        d: "M/d/yyyy",
                        // long date pattern
                        D: "dddd, MMMM dd, yyyy",
                        // short time pattern
                        t: "h:mm tt",
                        // long time pattern
                        T: "h:mm:ss tt",
                        // long date, short time pattern
                        f: "dddd, MMMM dd, yyyy h:mm tt",
                        // long date, long time pattern
                        F: "dddd, MMMM dd, yyyy h:mm:ss tt",
                        // month/day pattern
                        M: "MMMM dd",
                        // month/year pattern
                        Y: "yyyy MMMM",
                        // S is a sortable format that does not vary by culture
                        S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss",
                        // formatting of dates in MySQL DataBases
                        ISO: "yyyy-MM-dd hh:mm:ss",
                        ISO2: "yyyy-MM-dd HH:mm:ss",
                        d1: "dd.MM.yyyy",
                        d2: "dd-MM-yyyy",
                        d3: "dd-MMMM-yyyy",
                        d4: "dd-MM-yy",
                        d5: "H:mm",
                        d6: "HH:mm",
                        d7: "HH:mm tt",
                        d8: "dd/MMMM/yyyy",
                        d9: "MMMM-dd",
                        d10: "MM-dd",
                        d11: "MM-dd-yyyy",
                        d12: "dd/MM/yyyy"
                    },
                    percentsymbol: "%",
                    currencysymbol: "R$",
                    currencysymbolposition: "before",
                    decimalseparator: ',',
                    decimalplaces: 2,
                    decimalprecision: 2,
                    thousandsseparator: '.',
                    pagergotopagestring: "Ir para página:",
                    pagershowrowsstring: "Exibir linhas:",
                    pagerrangestring: " de ",
                    pagerpreviousbuttonstring: "anterior",
                    pagernextbuttonstring: "próximo",
                    pagerfirstbuttonstring: "primeiro",
                    pagerlastbuttonstring: "último",
                    groupsheaderstring: "Arraste uma coluna para fazer um agrupamento",
                    sortascendingstring: "Ordem Crescente",
                    sortdescendingstring: "Ordem Decrescente",
                    sortremovestring: "Remover Ordenação",
                    groupbystring: "Agrupar por esta coluna",
                    groupremovestring: "Remover dos grupos",
                    filterclearstring: "Limpar",
                    filterstring: "Filtro",
                    filtershowrowstring: "Exibir linhas onde:",
                    filterorconditionstring: "OU",
                    filterandconditionstring: "E",
                    filterselectallstring: "(Selecionar Todos)",
                    filterchoosestring: "Selecione:",
                    filterstringcomparisonoperators: ['empty', 'not empty', 'enthalten', 'enthalten(match case)',
                       'does not contain', 'does not contain(match case)', 'starts with', 'starts with(match case)',
                       'ends with', 'ends with(match case)', 'equal', 'equal(match case)', 'null', 'not null'],
                    filternumericcomparisonoperators: ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'],
                    filterdatecomparisonoperators: ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'],
                    filterbooleancomparisonoperators: ['equal', 'not equal'],
                    validationstring: "Valor informado não é válido",
                    emptydatastring: "Sem informações para exibir",
                    filterselectstring: "Selecionar Filtro",
                    loadtext: "Carregando...",
                    clearstring: "Limpar",
                    todaystring: "Hoje"
                }
                break;
            case "de":
                localization =
                 {
                     // separator of parts of a date (e.g. '/' in 11/05/1955)
                     '/': "/",
                     // separator of parts of a time (e.g. ':' in 05:44 PM)
                     ':': ":",
                     // the first day of the week (0 = Sunday, 1 = Monday, etc)
                     firstDay: 1,
                     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"]
                     },
    
                     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", ""]
                     },
                     // AM and PM designators in one of these forms:
                     // The usual view, and the upper and lower case versions
                     //      [standard,lowercase,uppercase]
                     // The culture does not use AM or PM (likely all standard date formats use 24 hour time)
                     //      null
                     AM: ["AM", "am", "AM"],
                     PM: ["PM", "pm", "PM"],
                     eras: [
                     // eras in reverse chronological order.
                     // name: the name of the era in this culture (e.g. A.D., C.E.)
                     // start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.
                     // offset: offset in years from gregorian calendar
                     { "name": "A.D.", "start": null, "offset": 0 }
                     ],
                     twoDigitYearMax: 2029,
                     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"
    
                      },
                     percentsymbol: "%",
                     currencysymbol: "€",
                     currencysymbolposition: "after",
                     decimalseparator: '.',
                     thousandsseparator: ',',
                     pagergotopagestring: "Gehe zu",
                     pagershowrowsstring: "Zeige Zeile:",
                     pagerrangestring: " von ",
                     pagerpreviousbuttonstring: "nächster",
                     pagernextbuttonstring: "voriger",
                     pagerfirstbuttonstring: "first",
                     pagerlastbuttonstring: "last",
                     groupsheaderstring: "Ziehen Sie eine Kolumne und legen Sie es hier zu Gruppe nach dieser Kolumne",
                     sortascendingstring: "Sortiere aufsteigend",
                     sortdescendingstring: "Sortiere absteigend",
                     sortremovestring: "Entferne Sortierung",
                     groupbystring: "Group By this column",
                     groupremovestring: "Remove from groups",
                     filterclearstring: "Löschen",
                     filterstring: "Filter",
                     filtershowrowstring: "Zeige Zeilen, in denen:",
                     filterorconditionstring: "Oder",
                     filterandconditionstring: "Und",
                     filterselectallstring: "(Alle auswählen)",
                     filterchoosestring: "Bitte wählen Sie:",
                     filterstringcomparisonoperators: ['leer', 'nicht leer', 'enthält', 'enthält(gu)',
                        'nicht enthalten', 'nicht enthalten(gu)', 'beginnt mit', 'beginnt mit(gu)',
                        'endet mit', 'endet mit(gu)', 'equal', 'gleich(gu)', 'null', 'nicht null'],
                     filternumericcomparisonoperators: ['gleich', 'nicht gleich', 'weniger als', 'kleiner oder gleich', 'größer als', 'größer oder gleich', 'null', 'nicht null'],
                     filterdatecomparisonoperators: ['gleich', 'nicht gleich', 'weniger als', 'kleiner oder gleich', 'größer als', 'größer oder gleich', 'null', 'nicht null'],
                     filterbooleancomparisonoperators: ['gleich', 'nicht gleich'],
                     validationstring: "Der eingegebene Wert ist ungültig",
                     emptydatastring: "Nokeine Daten angezeigt",
                     filterselectstring: "Wählen Sie Filter",
                     loadtext: "Loading...",
                     clearstring: "Löschen",
                     todaystring: "Heute"
                 }
                break;
            case "en":
            default:
                localization =
                {
                    // separator of parts of a date (e.g. '/' in 11/05/1955)
                    '/': "/",
                    // separator of parts of a time (e.g. ':' in 05:44 PM)
                    ':': ":",
                    // the first day of the week (0 = Sunday, 1 = Monday, etc)
                    firstDay: 0,
                    days: {
                        // full day names
                        names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
                        // abbreviated day names
                        namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
                        // shortest day names
                        namesShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
                    },
                    months: {
                        // full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
                        names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""],
                        // abbreviated month names
                        namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ""]
                    },
                    // AM and PM designators in one of these forms:
                    // The usual view, and the upper and lower case versions
                    //      [standard,lowercase,uppercase]
                    // The culture does not use AM or PM (likely all standard date formats use 24 hour time)
                    //      null
                    AM: ["AM", "am", "AM"],
                    PM: ["PM", "pm", "PM"],
                    eras: [
                    // eras in reverse chronological order.
                    // name: the name of the era in this culture (e.g. A.D., C.E.)
                    // start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.
                    // offset: offset in years from gregorian calendar
                    { "name": "A.D.", "start": null, "offset": 0 }
                    ],
                    twoDigitYearMax: 2029,
                    patterns: {
                        // short date pattern
                        d: "M/d/yyyy",
                        // long date pattern
                        D: "dddd, MMMM dd, yyyy",
                        // short time pattern
                        t: "h:mm tt",
                        // long time pattern
                        T: "h:mm:ss tt",
                        // long date, short time pattern
                        f: "dddd, MMMM dd, yyyy h:mm tt",
                        // long date, long time pattern
                        F: "dddd, MMMM dd, yyyy h:mm:ss tt",
                        // month/day pattern
                        M: "MMMM dd",
                        // month/year pattern
                        Y: "yyyy MMMM",
                        // S is a sortable format that does not vary by culture
                        S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss",
                        // formatting of dates in MySQL DataBases
                        ISO: "yyyy-MM-dd hh:mm:ss",
                        ISO2: "yyyy-MM-dd HH:mm:ss",
                        d1: "dd.MM.yyyy",
                        d2: "dd-MM-yyyy",
                        d3: "dd-MMMM-yyyy",
                        d4: "dd-MM-yy",
                        d5: "H:mm",
                        d6: "HH:mm",
                        d7: "HH:mm tt",
                        d8: "dd/MMMM/yyyy",
                        d9: "MMMM-dd",
                        d10: "MM-dd",
                        d11: "MM-dd-yyyy"
                    },
                    percentsymbol: "%",
                    currencysymbol: "$",
                    currencysymbolposition: "before",
                    decimalseparator: '.',
                    thousandsseparator: ',',
                    pagergotopagestring: "Go to page:",
                    pagershowrowsstring: "Show rows:",
                    pagerrangestring: " of ",
                    pagerpreviousbuttonstring: "previous",
                    pagernextbuttonstring: "next",
                    pagerfirstbuttonstring: "first",
                    pagerlastbuttonstring: "last",
                    groupsheaderstring: "Drag a column and drop it here to group by that column",
                    sortascendingstring: "Sort Ascending",
                    sortdescendingstring: "Sort Descending",
                    sortremovestring: "Remove Sort",
                    groupbystring: "Group By this column",
                    groupremovestring: "Remove from groups",
                    filterclearstring: "Clear",
                    filterstring: "Filter",
                    filtershowrowstring: "Show rows where:",
                    filterorconditionstring: "Or",
                    filterandconditionstring: "And",
                    filterselectallstring: "(Select All)",
                    filterchoosestring: "Please Choose:",
                    filterstringcomparisonoperators: ['empty', 'not empty', 'enthalten', 'enthalten(match case)',
                       'does not contain', 'does not contain(match case)', 'starts with', 'starts with(match case)',
                       'ends with', 'ends with(match case)', 'equal', 'equal(match case)', 'null', 'not null'],
                    filternumericcomparisonoperators: ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'],
                    filterdatecomparisonoperators: ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'],
                    filterbooleancomparisonoperators: ['equal', 'not equal'],
                    validationstring: "Entered value is not valid",
                    emptydatastring: "Sem informações para exibir",
                    filterselectstring: "Select Filter",
                    loadtext: "Loading...",
                    clearstring: "Clear",
                    todaystring: "Today"
                }
                break;
        }
        return localization;
    }
    

    My problem is: when I edit cell value, the symbols aren’t respected.

    Edit cell with money format #90473

    Peter Stoev
    Keymaster

    Hi romulo.headthink,

    You can use NumberInput widget for editing such Grid cells. Please, check the Grid’s editing demos where that editor is demonstrated.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Edit cell with money format #90490

    romulo.headthink
    Participant

    Hello Peter.

    Now I’m using NumberInput for editin, but the problems continue.

    See (example test):

    
    Novo["Id"] = 0;
                    Novo["Sequencia"] = rowscounts + 1;
                    Novo["ProdutoId"] = $("#ProdutoId").val();
                    Novo["Descricao"] = $("#Descricao").val();
                    Novo["VlrUnitario"] = "1,30";  // HERE!
                    Novo["Unidade"] = Unidade;
                    Novo["Quantidade"] = QtdAux;
                    Novo["VlrTotal"] = Total;
                    
                    var commit = $("#GridItens").jqxGrid('addrow', null, Novo);
    

    If I put “1,30”, the grid show 1,30 but when I click on the cell, the value change to “NaN”.
    If I put “1.30”, the grid show 1.30 but when I click on the cell, the value change to “NaN”.

    Just integer numbers works.

    The column type is Number, and the column’s definition is:

    
    {
      datafield: 'VlrUnitario', text: 'Vlr. Unit.', align: 'right', width: '100',
      cellsalign: 'right', cellsformat: 'n2', cellclassname: classEditavel, columntype: 'numberinput',
          initeditor: function (row, cellvalue, editor) {
               editor.jqxNumberInput({ digits: 6, decimalDigits: 2 });
          }
    },
    

    Can you help me?

    Edit cell with money format #90491

    Peter Stoev
    Keymaster

    I suppose you do not use the Grid’s current version. Example: http://jsfiddle.net/vq0pLsv1/.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Edit cell with money format #90494

    romulo.headthink
    Participant

    Hello.

    My version was out of date. I downloaded and update my files.

    Now it’s working but a new problem.

    With initeditor property, the align of columns are incorrect.

    I define:

    
    cellsalign: 'right',align: 'right'
    

    But columns are with left align. Just in columns with editor.

    How can I fix it?

    Edit cell with money format #90496

    Peter Stoev
    Keymaster

    Hi romulo.headthink,

    Even in the demo I sent you the alignment is correct.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Edit cell with money format #90498

    romulo.headthink
    Participant

    The values are showed on the left. When I click and the editor is showed, but alignment is right.

    
    {
      datafield: 'VlrUnitario', text: 'Vlr. Unit.', align: 'right', width: '100',
      cellsalign: 'right', columntype: 'numberinput', cellsformat: "f2",
      initeditor: function (row, cellvalue, editor) {
               editor.jqxNumberInput({ digits: 6, decimalDigits: 2 });
               }
    },
    

    What can I do?

    Edit cell with money format #90501

    Peter Stoev
    Keymaster

    Hi romulo.headthink,

    Updated demo: http://jsfiddle.net/jc5gmzvj/. If the values are shown on the left, then check whether you updated jQWidgets – Javascript and CSS files and All files.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Edit cell with money format #90502

    romulo.headthink
    Participant

    Now it’s ok.

    Thank you!

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

You must be logged in to reply to this topic.