Question

我是kendo web UI的新手。我想实现内联编辑网格。当我点击添加/编辑按钮时，我们获得带有更新按钮的内联表单字段，我想获得每行的唯一ID和自定义更新按钮功能，以便我可以更新我的数据库。

<table id="grid11" style="table-layout: fixed; display:none;">
        <colgroup>
                <col style="width:10%">
                <col style="width:20%">
                <col style="width:20%">
                <col style="width:20%">
                <col style="width:30%">
        </colgroup>
    <thead>
        <tr>            
            <th><font style="font-weight:bolder; color:#7ea700; font-size:16px;">Qty</font></th>
            <th><font style="font-weight:bolder; color:#7ea700; font-size:16px;">Unit</font></th>
            <th><font style="font-weight:bolder; color:#7ea700; font-size:16px;">Style Number</font></th>
            <th><font style="font-weight:bolder; color:#7ea700; font-size:16px;">Description</font></th>            <th><font style="font-weight:bolder; color:#7ea700; font-size:16px;">Command</font></th>
        </tr>
       </thead> 
       <tbody>
        <tr>            
            <td>10</td>
            <td>12</td>
            <td>231234</td>
            <td>ItemDescription</td>
             <td></td>          
        </tr>
    </tbody>
</table>



<script>
    $(document).ready(function(){
        $("#grid11").kendoGrid({
            dataSource: {
                schema: {
                        model: { id: "id" },
                            fields: {
                                        id: { editable: false, nullable: true },
                                        Qty: { validation: { required: true } },
                                        Unit: { validation: { required: true } },
                                        StyleNumber: { validation: { required: true } },
                                        Description: { validation: { required: true } },
                                    }
                         },
                pageSize: 5
            },
            pageable: true,
            height: 300,
            sortable: true,
            toolbar: [{name:"create",text:"Add"}],
            editable: "inline",
            columns: [
                  {field: "Qty"},
                  {field: "Unit"},
                  {field: "StyleNumber"},
                  {field: "Description"},
                  { command: ["edit", "destroy"], title: "&nbsp;", width: "172px" }]

        });
        $("#grid11").show();
    });
</script>

请帮帮我。

由于

Answer 1

<script>
    $(document).ready(function(){
        var len                     =   0;
        $("#grid11").kendoGrid({
            dataSource: {
                transport: {
                            read: "your_read_url",
                            update: {
                            url: "url_for_update",
                            type: "POST",
                            complete: function(result) {

                                }
                            },
                             create: {
                                url: "url_for_add",
                                type: "POST",
                                 complete: function(result) {

                                },
                            },
                            destroy: {
                            url: "url_for_delete" ,
                            type: "POST",
                            complete: function(result) {

                                },
                            }
                        },
                schema: {
                        model: { id: "id" },
                            fields: {
                                        id: { editable: false, nullable: true },
                                        Qty: { validation: { required: true } },
                                        Unit: { validation: { required: true } },
                                        StyleNumber: { validation: { required: true } },
                                        Description: { validation: { required: true } },
                                    }
                         },
                pageSize: 5
            },
            pageable: true,
            height: 300,
            sortable: true,
            toolbar: [{name:"create",text:"Add"}],
            editable: "inline",
            columns: [
                  {field: "Qty"},
                  {field: "Unit"},
                  {field: "StyleNumber"},
                  {field: "Description"},
                  { command: ["edit", "destroy"], title: "&nbsp;", width: "172px" }]

        });
        $("#grid11").show();
    });
</script>

Answer 2

 columns: [
                            { field: "FirstName", title: "First Name", width: "140px" },
                            { field: "LastName", title: "Last Name", width: "140px" },
                            { field: "Title" },
                            { command: { text: "View Details", click: showDetails }, title: " ", width: "140px" }]

脚本

  function showDetails(e) {
                    e.preventDefault();
    // your logic on command click

                }

See Kendo Documentation

如何自定义kendo网格更新按钮？

2 个答案: