jqxGrid - Example

by mogador

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="jqxgrid"></div>

JavaScript

var datafields = [
                    {name: 'id', type: 'number'},
                    {name: 'start', type: 'date'},
                    {name: 'name', type: 'string'}
                ],
                source =
                {
                    localdata: [
                        {id: 1, start: '', name: 'Unit-A'},
                        {id: 2, start: '2015-01-01', name: 'Unit-B'},
                        {id: 3, start: '2017-01-01', name: 'Unit-C'},
                        {id: 4, start: '2016-01-01', name: 'Unit-D'}
                    ],
                    datatype: 'array',
                    datafields: datafields,
                    id: 'id'
                },
                dataAdapter = new $.jqx.dataAdapter(source);

            $('#jqxgrid').jqxGrid(
                {
                    width: 600,
                    autoheight: true,
                    source: dataAdapter,
                    sortable: true,
                    editable: true,
                    columns: [
                        {text: 'ID', datafield: 'id', hidden: true},
                        {
                            text: 'Start',
                            datafield: 'start',
                            width: 120,
                            cellsformat: 'dd.MM.yyyy',
                            columntype: 'datetimeinput',
                       
                        },
                        {text: 'Name', datafield: 'name'}
                    ]
                }
            );