Как поймать событие save row встроенного редактирования сетки Kendo ui и сохранить изменения, основанные на каждом изменении ячейки
У меня есть встроенная редактируемая сетка кендо, я уже привязываю редактируемую сетку к этой форме.
Ссылка http://jsfiddle.net/alexyu/A2J9e/
мне нужно сохранить данные после изменения ячейки означает, что после редактирования ячейки, когда я перемещу другую ячейку, она автоматически сохранит данные в базу данных
я уже нашел некоторые решения, но не правильное решение.Кто-нибудь может мне помочь???
Вот мой код для встроенной редактируемой сетки
<div id="grid"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
// the remote service url
url: '@Url.Action("GetData","Agent")',
// the request type
type: "get",
// the data type of the returned result
dataType: "json"
}
},
schema: {
model: {
fields: {
OrderID: {
type: "string"
},
ADRPONumber: {
type: "string"
},
Hauler: {
type: "string"
},
CustomerCharges: {
type: "string"
},
CustomerPaid: {
type: "string"
},
HaulerCharges: {
type: "string"
},
GrossProfit: {
type: "string"
},
ExpectedCommission: {
type: "string"
},
TotalPaidToAgent: {
type:"string"
}
}
}
},
//serverFiltering: true,
//serverSorting: true
serverPaging: false
},
height: 430,
filterable: true,
sortable: true,
pageable: true,
navigatable: true,
editable: "incell",
columns: [{
field: "OrderID",
filterable: false
},
{
field: "Hauler",
filterable: true,
},
{
field: "ADRPONumber",
title: "PO",
filterable: true,
},
{
field: "CustomerCharges",
title: "Charges",
filterable: true
},
{
field: "CustomerPaid",
title: "Received",
filterable: true
},
{
field: "HaulerCharges",
title: "Hauler Charges",
filterable: true
},
{
field: "GrossProfit",
title: "Gross Profit",
filterable: true
},
{
field: "ExpectedCommission",
title: "Commission",
filterable: true
},
{
field: "TotalPaidToAgent",
title: "Agent Paid",
filterable: true
}
]
});
var grid = $("#grid").data("kendoGrid");
grid.table.bind("keypress", function (e) {
debugger
if (e.which !== 0 && e.charCode !== 0 && !e.ctrlKey && !e.metaKey && !e.altKey) {
debugger
//get currently navigated cell, this id follows user's navigation
var activeCell = $("#grid_active_cell");
//don't do anything if already editing cell
if (activeCell.hasClass("k-edit-cell")) return;
grid.editCell(activeCell);
var input = activeCell.find("input");
//number datatype editor loses key press character when entering edit
if (input.last().attr('data-type') === 'number') {
input.val(String.fromCharCode(e.keyCode | e.charCode));
} else {
input.val("");
}
}
});
//Kendo "Enter" key input is captured through this binding
$("#grid table").on("keydown", "tr", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
debugger
if (code == 13) { //If key is ENTER
//find index of the td element
var a = $(e.target).val();
var tdIndex = $(e.target).closest('td').index();
//get the next row's cell
var nextRow = $(e.target).closest('tr').next();
var nextRowCell = $(nextRow).find('td:eq(' + tdIndex + ')');
//focus the next cell on a different context
setTimeout(function () {
var grid = $("#grid").data("kendoGrid");
grid.current(nextRowCell);
}, 0);
}
});
});
</script>
Пожалуйста, помогите мне, как это сделать???
I уже получил это событие изменения ячейки, как это, но как получить данные и как сохранить эти данные в базе данных на событие изменения ячейки
$("body").on("blur", "table tr.k-grid-edit-row input", function () {
debugger
/////
});
1 ответ:
Вы пытались установить свойству autoSync значение true ? В этом случае он должен автоматически сохранять все измененные элементы данных, вызывая метод синхронизации.
<script> var dataSource = new kendo.data.DataSource({ autoSync: true, transport: { read: { url: "https://demos.telerik.com/kendo-ui/service/products", dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests }, update: { url: "https://demos.telerik.com/kendo-ui/service/products/update", dataType: "jsonp" // "jsonp" is required for cross-domain requests; use "json" for same-domain requests } }, schema: { model: { id: "ProductID" } } }); dataSource.fetch(function() { var product = dataSource.at(0); product.set("UnitPrice", 20); // auto-syncs and makes request to https://demos.telerik.com/kendo-ui/service/products/update }); </script>Вы можете посмотреть пример и документацию здесь:
Https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/autosync
Надеюсь, это поможет.
Comments