kendo 使用 kendo 上传控件编辑网格

Question

有人在 kendo 网格中添加 kendo 上传控件吗？我想添加它，这样我就不必构建额外的面板来存储控件了吗？

Would I add it as a template?

       if (!kendoGrid) {
        $("#kgridDocuments").kendoGrid({
            scrollable: false,
            toolbar: ["search", "create","save", "cancel"],

            ],
            noRecords: {
                template: "No Result Found."
            },
        });
    }

    var kendoUpload = $("#uploadMeetingDocument").data("kendoUpload");
    if (!kendoUpload) {
        $("#uploadMeetingDocument").kendoUpload();
    }

已上传代码

 var uploadInput = '<form method="post" action="#"><div><input name="upload" type="file" /></div></form>';

        if (!kendoGrid) {
            $("#kgridDocuments").kendoGrid({
                scrollable: false,
                toolbar: ["search", "create", "save", "cancel"],
                dataBound: function (e) {
                    $("input[type='file']").kendoUpload();
                },
                columns: [
                    {
                        template: "#= uploadInput #",
                        title: "File Upload"
                    },
                    {
                        field: "FileType",
                        title: "File Type"
                    }
                ],
                noRecords: {
                    template: "No Result Found."
                },
            });
        }

Answer 1

是的，您可以在网格内添加一个上传组件。使用列模板创建输入标签，使用 dataBound 函数初始化 kendoUpload 组件。下面是一个示例，可能会对您有所帮助。

<table id="grid" style="width: 100%"></table>
<script type="text/javascript">

    var uploadInput = '<form method="post" action="#"><div><input name="upload" type="file" /></div></form>';

    $("#grid").kendoGrid({
        dataSource: yourDataSource,
        dataBound: function(e) {
            $("input[type='file']").kendoUpload();
        },
        columns: [
            {
                field: "Id",
                title: "Id",
                filterable: false
            },
            {
                field: "StatusText",
                title: "StatusText"
            },
            {
                title: "Upload",
                filterable: false,
                sortable: false,
                template: "#= uploadInput #"
            }
        ]
    });
</script>

kendo 使用 kendo 上传控件编辑网格

kendo grid editing with kendoUpload control

kendo-ui

kendo-grid