Html5 Grid

Set the width property of the jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<script src="https://jqwidgets.com/public/jqwidgets/globalization/globalize.js"></script>
<div id="jqxgrid"></div>
<div id='jqxdatetimeinput' style="margin: 10px;"></div>
<input type="button" style="margin: 10px;" id="jqxbutton" value="Set cell value to datetimeinput's selection" />

JavaScript

var data = generatedata(500);
var source = {
    localdata: data,
    datafields: [{
        name: 'firstname',
        type: 'string'
    }, {
        name: 'lastname',
        type: 'string'
    }, {
        name: 'productname',
        type: 'string'
    }, {
        name: 'date',
        type: 'date'
    }, {
        name: 'quantity',
        type: 'number'
    }, {
        name: 'price',
        type: 'number'
    }],
    datatype: "array"
};

var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
    width: 800,
    theme: 'energyblue',
    height: 300,
    source: adapter,
    sortable: true,
    editable: true,
    columns: [{
        text: 'First Name',
        datafield: 'firstname',
        width: 90
    }, {
        text: 'Last Name',
        datafield: 'lastname',
        width: 90
    }, {
        text: 'Product',
        datafield: 'productname',
        width: 170
    }, {
        text: 'Order Date',
        datafield: 'date',
        width: 260,
        cellsformat: 'dd-MMMM-yyyy HH:mm:ss',
        columntype: 'datetimeinput'
    }, {
        text: 'Quantity',
        datafield: 'quantity',
        width: 80,
        cellsalign: 'right'
    }, {
        text: 'Unit Price',
        datafield: 'price',
        cellsalign: 'right',
        cellsformat: 'c2'
    }]
});

$("#jqxdatetimeinput").jqxDateTimeInput({
    theme: 'energyblue',
    width: '250px',
    height: '25px',
    formatString: 'dd-MMMM-yyyy HH:mm:ss'
});

$("#jqxbutton").jqxButton({
    theme: 'energyblue',
    height: 30
});

$('#jqxbutton').click(function () {
    selectedDate = $('#jqxdatetimeinput').jqxDateTimeInput('val');
    $("#jqxgrid").jqxGrid('setcellvalue', 0, "date", selectedDate);
});