在kendo网格中上传文件后设置列数据

时间:2014-01-13 23:12:59

标签: ajax kendo-ui kendo-grid kendo-asp.net-mvc

我正在研究一个项目,但我遇到了问题。我决定使用kendo网格来帮助创建网格。我的网格有一个字段允许用户在每行上传多个文件。

  • 我想在用户上传文件后,文件名将与FileAttach列对齐,并在我点击保存时发送到服务器。

这些文件还会出现在FileAttach列中,并带有一个小按钮来删除该文件。

我尝试但是没有用

我不擅长kendo tempalte和javascript所以我坚持这个。希望有人帮助我,这需要我一个多星期。

@(Html.Kendo().Grid<TamCao.Core.DomainModel.AcademicDetail>()
        .Name("Academic_Grid")
        .Columns(columns =>
        {
            columns.Bound(a => a.ID).Visible(false);
            columns.Bound(a => a.PlaceName);
            columns.Bound(a => a.From).Format("{0:dd/MM/yyyy}").Width(100);
            columns.Bound(a => a.To).Format("{0:dd/MM/yyyy}").Width(100);
            columns.Bound(a => a.Degree);
            columns.Bound(a => a.DateObtained).Format("{0:dd/MM/yyyy}").Width(180);
            columns.Bound(a => a.FileAttach).Template(@<Text> #= FileAttach # </Text>);
            columns.Template(@<Text></Text>).ClientTemplate("<input type='file' id='uploadAcademicDetail' multiple=multiple name='uploadAcademicDetail'/>").Width(200).Title("File Attatch"); // Upload File
            columns.Command(command => command.Destroy()).Width(90);
        })
        .ToolBar(toolBar =>
        {
            toolBar.Create();
            toolBar.Save();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Sortable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Events(events => events.Error("error_handler"))
            .Model(model =>
            {
                model.Id(a => a.ID);
            })
            .PageSize(20)
            .Read(read => read.Action("AcademicDetail_Read", "AcademicExperience"))
            .Create(create => create.Action("AcademicDetail_Create", "AcademicExperience"))
            .Update(update => update.Action("AcademicDetail_Update", "AcademicExperience"))
            .Destroy(destroy => destroy.Action("AcademicDetail_Destroy", "AcademicExperience"))
        )
        .Events(e =>
        {
            e.DataBound("AcademicDataBound");
        })
    )
        </div>
    <script type="text/javascript">
        function AcademicDataBound(e)
        {
            $("input[type='file']").kendoUpload({
                multiple: true,
                async: {
                    saveUrl: '/AcademicExperience/UploadAcademicDetailAttach',
                },
                upload: function (e) {
                },
                success: function (e) {
                    var grid = $("#Academic_Grid").getKendoGrid();
                    alert(grid.dataItem($("FileAttach")));
                }
            });
        }
    </script>

0 个答案:

没有答案