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 Unit-C aesrtauietrsaetrset '},
                        {id: 4, start: '2016-01-01', name: 'Unit-D'},
                        {id: 4, start: '2016-01-01', name: 'Unit-D'},
                        {id: 4, start: '2016-01-01', name: 'Unit-D'},
                        {id: 4, start: '2016-01-01', name: 'Unit-D'},
                        {id: 4, start: '2016-01-01', name: 'Unit-D'},
                        {id: 4, start: '2016-01-01', name: 'Unit-D'},
                        
                    ],
                    datatype: 'array',
                    datafields: datafields,
                    id: 'id'
                },
                dataAdapter = new $.jqx.dataAdapter(source);

            $('#jqxgrid').jqxGrid(
                {
                    width: 600,
                    source: dataAdapter,
                    selectionmode: 'singlecell',
                editable: true,
                editmode: "click",
                columnsresize: true,
                sortable: false,
                sortmode: 'many',
                autoheight: true,
                autorowheight: true,
                    columns: [
                        {text: 'ID', datafield: 'id', hidden: true},
                        {
                            text: 'Start',
                            datafield: 'start',
                            minwidth: 100, width: '5%',
                            cellsformat: 'dd.MM.yyyy',
                           ...