bind a row data of kendo grid with text boxes onclick?

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/30480814/bind-a-row-data-of-kendo-grid-with-text-boxes-onclick