$(function () {
$.widget("radiantq.gridEditor", {
options: {
editor: function (cell, grid) {
return grid.options.columns[cell[0].cellIndex].editor;
},
editorOptions: function (cell, grid) {
return grid.options.columns[cell[0].cellIndex].editorOptions;
},
items: "td",
},
grid: null,
_create: function () {
grid = this.element.data("grid");
var self = this;
this._on({
dblclick: function (event) {
var that = this;
var target = $(event.target).closest(this.options.items);
property = grid.options.columns[target[0].cellIndex].property;
if (target.length && !target.data("editor")) {
target.editor({
editor: this.options.editor(target, grid),
editorOptions: this.options.editorOptions(target, grid),
//Triggers when user submit the changes,
submit: function (event, ui) {
//To get the bounded object
var data = target.closest("tr").data("grid-item"),
property = grid.options.columns[target[0].cellIndex].property,
dataType = grid.options.columns[target[0].cellIndex].type;
//change the focus to grid.
target.focus();
var td = target.closest("td");
if (self._trigger("submit", event, ui) !== false) {
//To update the value in data source.
self.setNestedValue(data, property, ui.value);
//To update the value in div
$(".editor-wrapper", td).html(ui.value);
}
return false;
},
cancel: function () {
grid.element.focus();
},
start: function (event, ui) {
var data = target.closest("tr").data("grid-item"),
property = grid.options.columns[target[0].cellIndex].property;
var input = target.find("input").focus();
if (self._trigger("start", event, ui) !== false) {
//To update the value in input
input.val(self.getNestedValue(data, property).toString());
}
}
});
target.data("editor").start();
}
}
});
},
getNestedValue: function (obj, prop) {
var props = prop.split('.');
for (var i = 0; i < props.length; i++) {
if (typeof obj != "undefined") {
obj = obj[props[i]];
}
}
return obj || "";
},
setNestedValue: function (obj, prop, newValue) {
var props = prop.split('.')
previousLevel = props.length - 1;
for (var i = 0; i < previousLevel; i++) {
if (typeof obj != "undefined") {
obj = obj[props[i]];
}
}
if (obj[props[previousLevel]] != newValue) obj[props[previousLevel]] = newValue;
}
});
})
var localDevelopers = [{
"firstName": "Richard",
"lastName": "Worth",
"country": "USA",
"twitter": "rworth",
"github": "rdworth",
"bitcoins": 150,
"random": {
"value": 10
},
"favorites": [1, 2, 3],
"date": 174351600000
}, {
"firstName": "Scott",
"lastName": "González",
"country": "USA",
"twitter": "scott_gonzalez",
"github": "scottgonzalez",
"bitcoins": 10,
"random": {
"value": 20
},
"favorites": [1, 2, 3],
"date": 359468280000
}];
$(function () {
debugger;
var developers = $.ui.dataviewlocal({
input: localDevelopers,
paging: {
limit: 8
}
});
var grid = $("#developers-local").grid({
heightStyle: "fill",
source: developers.result
});
grid.gridEditor({
items: "td:not(:has(button))"
});
developers.refresh();
});
<div style="width:80em;">
<table id="developers-local">
<caption>Developers Grid</caption>
<colgroup>
<col width="12%">
<col width="12%">
<col width="12%">
<col width="10.34483%">
<col width="12%">
<col width="13.79310%">
<col width="10.34483%">
<col width="6.896552%">
<col width="10.34483%">
</colgroup>
<thead>
<tr>
<th data-property="firstName">First Name</th>
<th data-property="random.value" data-type="number" data-editor="randomSpinner"
data-editor-options='{"min":-1, "max": 125}'>Random</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<td id="pageDevelopers" colspan="9" class="ui-state-default">
<button data-page="first">First</button>
<button data-page="prev">Prev</button> <span>
Page <input class="current" size="4"/> of <span class="total">0</span>
</span>
<button
data-page="next">Next</button>
<button data-page="last">Last</button> <span class="totals">
Total records <span class="totalRecords">0</span>
</span>
</td>
</tr>
</tfoot>
</table>
</div>
<div>
<button id="addDeveloper">Insert new developer</button>
<button id="addDeveloperAtEnd">Insert new developer at the end</button>
</div>
<form id="editForm">
<fieldset></fieldset>
<input type="submit" value="Save changes" />
</form>
<script id="edit-tmpl" type="text/x-jquery-tmpl">
{
{
if $.isArray(value)
}
} < ul > {
{
each(index, valueX) value
}
} < li > < input type = "text"
name = "${name}"
placeholder = "${label}"
value = "${valueX}"
title = "${label}" / > < /li>
{{/each
}
} < /ul>
{{else}}
<input type="text" name="${name}" placeholder="${label}" value="${value}" title="${label}" / > {
{
/if}}
</script>
<script id="cell-date-tmpl" type="text/x-jquery-tmpl">
< td class = "ui-widget-content" > $ {
Globalize.format(new Date(date), "d")
} < /td>
</script>
<script id="cell-time-tmpl" type="text/x-jquery-tmpl">
< td class = "ui-widget-content" > $ {
Globalize.format(new Date(date), "T")
} < /td>
</script>
<script id="cell-edit-tmpl" type="text/x-jquery-tmpl">
< td class = "ui-widget-content" > < button class = 'edit' > Edit < /button></td >
</script>
<script id="cell-remove-tmpl" type="text/x-jquery-tmpl">
< td class = "ui-widget-content" > < button class = 'remove' > Remove < /button></td >
</script>
<br/>
<p><font size="3"><b>Source for this<a target="_blank"href="http://jqfaq.com/how-to-bind-the-inner-property-in-jqery-ui-grid-with-out-using-observable/"</a> JQFaq question</b></font>
</p>
<iframe id="iframe1" src="http://jqfaq.com/AdPage.html" style="width:100%; height:115px; border:none;"
/>
</body>
</html>
input {
width:100px !important;
}
External resources loaded into this fiddle: