Setting Data Type and Column Format

Wijgrid allows you to set the data type of individual column by using the dataType option. The wijgrid widget supports various data types including string, number, currency, datetime and boolean.

The example below shows how you can set data type for individual columns to represent different types of data in wijgrid. You can also format the column values by using dataFormatString option. By default, its value is not defined. For example, datetime data type shows the date as "dd-MM-yyyy", which can be displayed as "MM-dd-yyyy" and other combinations.

The dataFormatString option does not work when data type of a column is set to String.

Live Widget
Script

Script	Copy Code
<script id="scriptInit" type="text/javascript"> require(["wijmo.wijgrid"], function () { $(document).ready(function () { $("#wijgrid").wijgrid({ cellClicked: function (e, args) { alert(args.cell.value()); }, allowSorting: true, data: [ ['Ipsum LLC', 63.57, 209, .11, '02-01-2014', 'True'], ['Lorem Inc', 74.85, 73, .19, '02-01-2014', 'False'], ['Dolor International', 29.86, 45, .20, '02-01-2014', 'False'], ['Blandit Enterprises', 81.68, 28, .25, '02-01-2014', 'True'], ['Vivamus Services', 76.30, 67, .12, '02-01-2014', 'True'], ], columns: [ { headerText: "Product Name", dataType: 'string' }, //sets data type value to string. { headerText: "Unit Price", dataType: 'currency' }, //sets data type value to currency. { headerText: "Quantity", dataType: 'number', dataFormatString: 'n0' }, //sets data type value to number. //sets format of data as n0. { headerText: "Discount", dataType: 'number', dataFormatString: 'p0' }, { headerText: "Order Date", dataType: 'datetime', dataFormatString: 'MMM-dd-yyyy' }, //sets data type value to datetime. { headerText: "Overseas", dataType: 'boolean' }, //sets data type value to boolean. ] }); }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
        $(document).ready(function () {
            $("#wijgrid").wijgrid({

                cellClicked: function (e, args) {
                    alert(args.cell.value());
                },
                allowSorting: true,
                data: [
                    ['Ipsum LLC', 63.57, 209, .11, '02-01-2014', 'True'],
                    ['Lorem Inc', 74.85, 73, .19, '02-01-2014', 'False'],
                    ['Dolor International', 29.86, 45, .20, '02-01-2014', 'False'],
                    ['Blandit Enterprises', 81.68, 28, .25, '02-01-2014', 'True'],
                    ['Vivamus Services', 76.30, 67, .12, '02-01-2014', 'True'],
                ],
                columns: [
                    { headerText: "Product Name", dataType: 'string' }, //sets data type value to string.
                    { headerText: "Unit Price", dataType: 'currency' }, //sets data type value to currency.
                    { headerText: "Quantity", dataType: 'number', dataFormatString: 'n0' }, //sets data type value to number.
                          //sets format of data as n0.
                    { headerText: "Discount", dataType: 'number', dataFormatString: 'p0' },
                    { headerText: "Order Date", dataType: 'datetime', dataFormatString: 'MMM-dd-yyyy' }, //sets data type value to datetime.
                    { headerText: "Overseas", dataType: 'boolean' }, //sets data type value to boolean.
         
                ]
            });
        });
    });

</script>