用文本框onclick绑定kendo网格的行数据？ [英] bind a row data of kendo grid with text boxes onclick?
问题描述
这是我的HTML代码，我必须将kendo gridrow数据发送到文本框，点击kendo网格的内联编辑按钮，但我不想编辑内联。在编辑文本框之后，我想在kendo网格中将其显示为已编辑的值
Here is my html code , i have to send kendo gridrow data to textboxes onclicking inline edit button of kendo grid but i no want to edit inline. after editting through textboxes i want to show it in kendo grid as edited value
<!--data-editable="inline"-->
<div id="example">
<div id="kendoGrid" data-role="grid" data-pageable=" true" data-sortable=" true" data-filterable="true" data-toolbar="['create','save', 'cancel']" data-columns="[
{ 'field': 'Id', 'width': 100 },
{ 'field': 'CurrentCurrencyCode', 'width': 100 },
{ 'field': 'ShortName', 'width': 100 },
{ 'field': 'FullName', 'width': 100 },
{ 'field': 'ContactPerson', 'width': 100 },
{ 'field': 'Address1', 'width': 100 },
{ 'field': 'CompanyCity', 'width': 100 },
{ 'field': 'CompanyState', 'width': 100 },
{ 'field': 'CompanyCountry', 'width': 100 },
{ 'field': 'ZipPostCode', 'width': 100 },
{ 'field': 'TelArea', 'width': 100 },
{
command: ['edit'],
title: 'Actions',
width: '250px'
},
]" data-bind="source: products" style=" height :500px"></div>
</div>
<div>
<input id="ii" class="k-textbox" data-bind="value: data-columns.Id " />
<input id="ii" class="k-textbox" data-bind="value: data-columns.CurrentCurrencyCode " type="text" />
<input id="ii" class="k-textbox" data-bind="value: data-columns.ShortName " type="text" />
<input id="ii" class="k-textbox" data-bind="value: data-columns.FullName " type="text" />
<input id="ii" class="k-textbox" data-bind="value: data-columns.ContactPerson " type="text" />
<input id="ii" class="k-textbox" data-bind="value: data-columns.Address1 " type="text" />
<input id="ii" class="k-textbox" data-bind="value: data-columns.CompanyCity " type="text" />
<input id="ii" class="k-textbox" data-bind="value: data-columns.CompanyState " type="text" />
<input id="ii" class="k-textbox" data-bind="value: data-columns.CompanyCountry " type="text" />
<input id="ii" class="k-textbox" data-bind="value: data-columns.ZipPostCode " type="text" />
<input id="ii" class="k-textbox" data-bind="value: data-columns.TelArea " type="text" />
<input id="Update" type="submit" value="Update" />
</div>
这里是我的javascript代码，有些人可以用内联按钮上的文本框绑定我的剑道行值而不是x
here is my javascript code , can some one bind my kendo row values with textboxes on inline button click thanx
document.onreadystatechange = function () {
function showdata(e) {
alert("dataShown");
}
var viewModel = kendo.observable({
products: new kendo.data.DataSource({
transport: {
//read: function () {
// type = "GET";
// url = "/api/Companies/GetAllCompanies2";
// dataType = "json";
//},
read: {
type: "GET",
url: "/api/Companies/GetAllCompanies2",
dataType: "json",
async: false
},
create: {
type: "PUT",
url: "/api/Companies/UpdateDefCompny",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false
},
update: {
url:"/api/Companies/SaveDefCompny",
async: false,
contentType: "application/json",
dataType: "json",
type: "POST"
// here you need correct api url
},
destroy: {
url: "/api/Companies/Delete", // here you need correct api url
dataType: "json"
},
parameterMap: function (data, operation) {
if (operation !== "read" && data) {
return JSON.stringify(data.models[0]);
}
}
},
serverPaging: true,
serverFiltering: true,
pageSize: 10,
schema: {
//data:"Data",
total: "Count",
model: {
id: "Id",
fields: {
Id: {
type: "int"
},
CurrentCurrencyCode: {
editable: true,
type: "int"
},
ShortName: {
editable: true,
type: "string"
},
FullName: {
editable: true,
type: "string"
},
ContactPerson: {
editable: true,
type: "string"
},
Address1: {
editable: true,
type: "string"
},
CompanyCity: {
editable: true,
type: "string"
},
CompanyState: {
editable: true,
type: "string"
},
CompanyCountry: {
editable: true,
type: "string"
},
ZipPostCode: {
editable: true,
type: "string"
},
TelArea: {
editable: true,
type: "string"
}
}
}
},
batch: true,
})
});
kendo.bind(document.getElementById("example"), viewModel);
}
或在内联编辑按钮上调用javascript函数点击转移值，但如何点击按钮点击功能也告诉我？更新功能也无法点击
or invoke a function of javascript on inline edit button click that transfer values but how to invoke a function on button click also tell me?update function is also not working on click
推荐答案
基本上你只需要通过您选择的项目，并将其绑定到文本框，datepicker，numerictextbox或复选框，方法是将其添加到网格上的更改事件
Basically you just need to pass the item that you select and bind it to the textbox, datepicker, numerictextbox, or checkbox by adding this to the change event on the grid
change: function (e) {
selectedRow = this.select();
var item = this.dataItem(selectedRow);
kendo.bind($("#gridEditor"), item);
},
我可能有一个例子可以满足你的需求，我创造了这个我试着在kendo网站上关注一些教程。请查看此 jsfiddle
I may have one example that may suit your needs, i created this when i tried to follow some tutorial on kendo website. please check this jsfiddle
这篇关于用文本框onclick绑定kendo网格的行数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
