Skip to content

Instantly share code, notes, and snippets.

@RainerAtSpirit

RainerAtSpirit/jqGrid-index.html

Created May 2, 2013 10:21
Show Gist options
  • Save RainerAtSpirit/5501358 to your computer and use it in GitHub Desktop.
Save RainerAtSpirit/5501358 to your computer and use it in GitHub Desktop.
Download ZIP
Durandal jqGrid integration
Raw
jqGrid-index.html
<div id='jqxWidget'>
<div style="margin-bottom: 10px;">
<input id="addButton" type="button" data-bind="click: addItem, jqxButton: { theme: getDemoTheme() }" value="Add Item" />
<input id="removeButton" type="button" data-bind="click: removeItem, jqxButton: { theme: getDemoTheme() }" value="Remove Last Item" />
<input id="updateButton" type="button" data-bind="click: updateItem, jqxButton: { theme: getDemoTheme() }" value="Update First Item" />
<div data-bind="jqxCheckBox: { checked: disabled, theme: getDemoTheme() }" style='margin-top: 5px;' id="checkBox">Disabled</div>
</div>
<div data-bind="jqxGrid: {
source: items, disabled: disabled, autoheight: true,
theme: getDemoTheme(),
editable: true,
selectionmode: 'singlecell',
columns: [
{ text: 'Name', dataField: 'name', width: 200 },
{ text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
{ text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
]
}" id="jqxgrid">
</div>
<table style="margin-top: 20px;">
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: sales"></td>
<td data-bind="text: price"></td>
</tr>
</tbody>
</table>
</div>
Raw
jqGrid-index.js
define(['durandal/app'], function (app) {
var initialData = [
{ name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
{ name: "Speedy Coyote", sales: 89, price: 190.00 },
{ name: "Furious Lizard", sales: 152, price: 25.00 },
{ name: "Indifferent Monkey", sales: 1, price: 99.95 },
{ name: "Brooding Dragon", sales: 0, price: 6350 },
{ name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
{ name: "Optimistic Snail", sales: 420, price: 1.50 }
];
var GridModel = function () {
this.items = ko.observableArray([]);
this.disabled = ko.observable(false);
this.addItem = function () {
// add a new item.
if (this.items().length < 20) {
this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
}
};
this.removeItem = function () {
// remove the last item.
this.items.pop();
};
this.updateItem = function () {
// update the first item.
var item = {};
if (initialData.length > 0) {
item.name = initialData[Math.floor(Math.random() * initialData.length)].name;
item.sales = Math.floor(Math.random() * 500);
item.price = Math.floor(Math.random() * 200);
this.items.replace(this.items()[0], item);
}
};
this.activate = function () {
//Populate items
this.items(initialData);
return true;
}
};
GridModel.prototype.getDemoTheme = function () {
var theme = $.data(document.body, 'theme');
if (theme == null) {
theme = '';
}
else {
return theme;
}
var themestart = window.location.toString().indexOf('?');
if (themestart == -1) {
return '';
}
var theme = window.location.toString().substring(1 + themestart);
var url = "../../jqwidgets/styles/jqx." + theme + '.css';
if (document.createStyleSheet != undefined) {
var hasStyle = false;
$.each(document.styleSheets, function (index, value) {
if (value.href != undefined && value.href.indexOf(theme) != -1) {
hasStyle = true;
return false;
}
});
if (!hasStyle) {
document.createStyleSheet(url);
}
}
else $(document).find('head').append('<link rel="stylesheet" href="' + url + '" media="screen" />');
return theme;
};
return GridModel;
});
Raw
root-index.js
<!DOCTYPE html>
<html>
<head>
<title>Durandal</title>
<link rel="apple-touch-startup-image" href="Content/images/ios-startup-image-landscape.png" media="(orientation:landscape)" />
<link rel="apple-touch-startup-image" href="Content/images/ios-startup-image-portrait.png" media="(orientation:portrait)" />
<link rel="apple-touch-icon" href="Content/images/icon.png"/>
<!--Durandal does not require Bootstrap or Font Awesome.
They are used to make the samples look nice.-->
<link rel="stylesheet" href="Content/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="Content/bootstrap-responsive.min.css" type="text/css"/>
<link rel="stylesheet" href="Content/font-awesome.min.css" type="text/css"/>
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
<!--The css in this file makes the modal dialogs work right.-->
<link rel="stylesheet" href="Content/durandal.css" type="text/css"/>
<!--Css specific to the samples.-->
<link rel="stylesheet" href="Content/app.css" type="text/css"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no"/>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div id="applicationHost"></div>
<script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="Scripts/knockout-2.2.1.js"></script>
<!--Durandal's core does not require SammyJS. The router plugin uses it.-->
<script type="text/javascript" src="Scripts/sammy-0.7.4.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="jqwidgets/jqxknockout.js"></script>
<script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="app/durandal/amd/require.js" data-main="app/main"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment