将剑道网格的行数据与文本框绑定? [英] bind a row data of kendo grid with text boxes onclick?
问题描述
这是我的 html 代码，我必须通过单击剑道网格的内联编辑按钮将剑道网格数据发送到文本框，但我不想进行内联编辑.通过文本框编辑后，我想在剑道网格中将其显示为编辑值
<div id="示例"><div id="kendoGrid" data-role="grid" data-pageable="true" data-sortable="true" data-filterable="true" data-toolbar="['create','save','取消']" 数据列="[{'字段':'Id'，'宽度':100}，{ 'field': 'CurrentCurrencyCode', 'width': 100 },{ 'field': 'ShortName', 'width': 100 },{'字段':'全名'，'宽度':100}，{'字段':'联系人'，'宽度':100}，{'字段':'地址1'，'宽度':100}，{'字段':'公司城市'，'宽度':100}，{ 'field': 'CompanyState', 'width': 100 },{'字段':'公司国家'，'宽度':100}，{'字段':'邮政编码'，'宽度':100}，{ 'field': 'TelArea', 'width': 100 },{命令:['编辑']，title: '动作',宽度:'250px'},]" data-bind="source: products" style=" height :500px"></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"/>
这是我的 javascript 代码，有人可以将我的剑道行值与内联按钮点击的文本框绑定
document.onreadystatechange = function () {功能显示数据(e){警报(数据显示")；}var viewModel = kendo.observable({产品:新 kendo.data.DataSource({运输: {//读取:函数(){//type = "GET";//url = "/api/Companies/GetAllCompanies2";//数据类型 = "json";//},读: {类型:获取"，url: "/api/Companies/GetAllCompanies2",数据类型:json"，异步:假},创建: {类型:PUT"，url: "/api/Companies/UpdateDefCompny",contentType: "application/json; charset=utf-8",数据类型:json"，异步:假},更新: {url:"/api/Companies/SaveDefCompny",异步:假，内容类型:应用程序/json"，数据类型:json"，类型:POST"//这里你需要正确的api url},破坏: {url: "/api/Companies/Delete",//这里需要正确的api url数据类型:json"},参数映射:函数(数据，操作){如果(操作！==读取"&&数据){返回 JSON.stringify(data.models[0]);}}},服务器分页:真，服务器过滤:真，页面大小:10，架构:{//数据:数据"，总数"，模型: {id: "身份证",字段:{ID: {类型:int"},当前货币代码:{可真实，类型:int"},简称: {可真实，类型:字符串"},全名: {可真实，类型:字符串"},联络人: {可真实，类型:字符串"},地址1: {可真实，类型:字符串"},公司城市:{可真实，类型:字符串"},公司状态:{可真实，类型:字符串"},公司国家:{可真实，类型:字符串"},邮政编码:{可真实，类型:字符串"},电话区:{可真实，类型:字符串"}}}},批次:真实，})});kendo.bind(document.getElementById("example"), viewModel);}或在内联编辑按钮单击时调用 javascript 的函数来传输值，但如何在按钮单击时调用函数还告诉我?更新函数在单击时也不起作用
基本上，您只需要传递您选择的项目并将其绑定到文本框、日期选择器、数字文本框或复选框，方法是将其添加到更改事件中网格
change: function (e) {selectedRow = this.select();var item = this.dataItem(selectedRow);kendo.bind($("#gridEditor"), item);},我可能有一个适合您需求的示例，这是我在尝试学习剑道网站上的一些教程时创建的.请检查这个 jsfiddle
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>
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);
}
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
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);
},
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
这篇关于将剑道网格的行数据与文本框绑定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
