Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Benjamin Müller
70
Problem with localizing number format in grid when adding required resources manually
posted

Hi guys. In my scenario I cannot use the igLoader to load my resources. So I need to manually load Skript and Style resources.

Now I want to make the igGrid display numbers in German number Format ("." as number Group, "," as decimal divider). All I tried to do this so far went wrong.

Can anyone give me a full example on how to localize the grid to German?
Any help would be appreciated.

Regards, Benjamin

PS: What I'm currently doing is:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <script src="Scripts/jquery-1.11.0.js"></script>
    <script src="Scripts/modernizr-2.8.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.10.4.js" type="text/javascript"></script>
    <script src="Scripts/ig/modules/i18n/infragistics.util-de.js" type="text/javascript"></script>
 <script src="Scripts/ig/modules/infragistics.util.js" type="text/javascript"></script>
    <script src="Scripts/ig/i18n/infragistics-de.js" type="text/javascript"></script>
    <script src="Scripts/ig/modules/i18n/regional/infragistics.ui.regional-de.js" type="text/javascript"></script>
 <script src="Scripts/ig/modules/i18n/infragistics.datasource-de.js" type="text/javascript"></script>
    <script src="Scripts/ig/modules/i18n/infragistics.ui.grid-de.js" type="text/javascript"></script>
 <script src="Scripts/ig/modules/i18n/infragistics.ui.editors-de.js" type="text/javascript"></script>
    <script src="Scripts/ig/infragistics.core.js" type="text/javascript"></script>
    <script src="Scripts/ig/infragistics.lob.js" type="text/javascript"></script>
    <script src="Scripts/ig/infragistics.dv.js" type="text/javascript"></script>
    <link href="Styles/ig/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="Styles/ig/structure/infragistics.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }

        th, td {
            height: 20px;
            font-size:11px;
        }

        .tableHeading {
            background-color: lightgray;
            font-weight: bold;
        }
    </style>

    <!--Grid event handlers-->
    <script type="text/javascript">
        var products = [
                { "Id": "1", "newLine": "", "netPricePerItem": 10000, "chapter": "", "item": "", "productNumber": 1, "amount": 1, "description": "Adjustable Race", "netPosition": true, "netPrice": 10000, "posPrice": 12000, "discount": 5 },
                { "Id": "2", "newLine": "", "netPricePerItem": 12000, "chapter": "", "item": "", "productNumber": 2, "amount": 1, "description": "Adjustable Race", "netPosition": false, "netPrice": 12000, "posPrice": 12000, "discount": 5 },
                { "Id": "3", "newLine": "", "netPricePerItem": 11000, "chapter": "", "item": "", "productNumber": 3, "amount": 1, "description": "Adjustable Race", "netPosition": true, "netPrice": 11000, "posPrice": 12000, "discount": 5 },
                { "Id": "4", "newLine": "", "netPricePerItem": 7000, "chapter": "", "item": "", "productNumber": 4, "amount": 1, "description": "Adjustable Race", "netPosition": true, "netPrice": 7000, "posPrice": 12000, "discount": 5 },
                { "Id": "5", "newLine": "", "netPricePerItem": 500, "chapter": "", "item": "", "productNumber": 5, "amount": 1, "description": "Adjustable Race", "netPosition": false, "netPrice": 500, "posPrice": 12000, "discount": 5 },
        ];

        
    </script>

    <title></title>
</head>
<body style="font-family: Segoe UI; font-size: 11px">
    <div id="summationTableDiv" style="position:fixed;top:30px;left:890px;width:380px;">
        <table id="summationTable" style="font-family: Segoe UI; border: 1px solid black; border-collapse: collapse; width: 380px">
            <colgroup>
                <col class="tableHeading" style="text-align:left;width:200px" />
                <col style="width:80px" />
                <col style="width:100px" />
            </colgroup>
            <tr>
                <td class="tableHeading">Gesamtsumme netto (€)</td>
                <td></td>
                <td></td>
            </tr>
            <tr><td></td><td></td><td></td></tr>
            <tr><td class="tableHeading">Wareneinsatz (€)</td><td></td><td></td></tr>
            <tr><td class="tableHeading">- Verkaufshilfe (€)</td><td></td><td></td></tr>
            <tr><td class="tableHeading">+ Vermittlerprovision (€)</td><td></td><td></td></tr>
            <tr>
                <td class="tableHeading">+ Ausgangsfracht Aufw. (€)</td>
                <td><select id="storageLocationSelect" tabindex="100000" style="width:100%;height:100%" /></td>
                <td></td>
            </tr>
            <tr><td class="tableHeading">= EK (€)</td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td></tr>
            <tr><td class="tableHeading">Deckungsbeitrag (€)</td><td></td><td></td></tr>
            <tr><td class="tableHeading">Deckungsbeitrag (%)</td><td></td><td></td></tr>
        </table>
    </div>
    <div id="positionTableDiv" style="position:absolute;top:30px;left:30px;">
        <table id="positionTable" />

        <script type="text/javascript">
            $(function () {
                $("#positionTable").igGrid({
                    primaryKey: "Id",
                    autoFormat: true,
                    autoGenerateColumns: false,
                    fixedHeaders: true,
                    columns: [
                        { headerText: "", key: "Id", dataType: "string", width: "20px", hidden: true },
                        { headerText: "", key: "netPricePerItem", dataType: "number", width: "20px", hidden: true },
                        { headerText: "", key: "newLine", dataType: "string", width: "20px" },
                        { headerText: "", key: "chapter", dataType: "number", width: "20px" },
                        { headerText: "", key: "item", dataType: "number", width: "20px" },
                        { headerText: "Artikel-Nr.", key: "productNumber", dataType: "string", width: "80px" },
                        { headerText: "Menge", key: "amount", dataType: "number", width: "50px" },
                        { headerText: "Kurztext", key: "description", dataType: "string", width: "230px" },
                        { headerText: "", key: "netPosition", dataType: "bool", format: "checkbox", width: "40px" },
                        { headerText: "Netto aus Liste (€)", key: "netPrice", dataType: "number", format: "#.##", width: "120px" },
                        { headerText: "Pos.-Preis (€)", key: "posPrice", dataType: "number", format: "#.##", width: "120px" },
                        { headerText: "Rabatt (%)", key: "discount", dataType: "number", format: "#.#", width: "80px" },
                    ],
                    width: '840px',
                    dataSource: products,
                    features: [
                        {
                            name: "Updating",
                            editMode: "cell",
                            enableAddRow: false,
                            enableDeleteRow: true,
                            columnSettings: [
                                { columnKey: "newLine", readOnly: true },
                                { columnKey: "amount", required: true },
                                { columnKey: "description", required: true },
                                { columnKey: "netPosition", readOnly: true },
                                { columnKey: "netPrice", readOnly: true },
                                { columnKey: "posPrice", required: true },
                            ]
                        }
                    ],
                });

                addNewRow();
                $("#positionTable").igGridUpdating("startEdit", 1, 1);
            });

        </script>
    </div>
    <div id="termsTableDiv"></div>
    <div id="printingOptionsTableDiv"></div>
    <div id="printButtonDiv"></div>
</body>
</html>

Parents
No Data
Reply
  • 70
    Verified Answer
    posted

    Sorry to bother you guys. It simply depends on the loading sequence of the scripts.

    This is how it works (note that the regional scripts are the last to be loaded):

    <script src="Scripts/modernizr-2.8.1.js" type="text/javascript"></script>

    <script src="Scripts/jquery-ui-1.10.4.js" type="text/javascript"></script>

    <script src="Scripts/ig/modules/infragistics.util.js" type="text/javascript"></script>

    <script src="Scripts/ig/i18n/infragistics-de.js" type="text/javascript"></script>

    <script src="Scripts/ig/infragistics.core.js" type="text/javascript"></script>

    <script src="Scripts/ig/infragistics.lob.js" type="text/javascript"></script>

    <script src="Scripts/ig/infragistics.dv.js" type="text/javascript"></script>

    <script src="Scripts/ig/modules/i18n/regional/infragistics.ui.regional-de.js" type="text/javascript"></script>

    <script src="Scripts/ig/modules/i18n/infragistics.ui.grid-de.js" type="text/javascript"></script>

    <link href="Styles/ig/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />

    <link href="Styles/ig/structure/infragistics.css" rel="stylesheet" type="text/css" />

Children