在Kendo Grid中追加文件

Question

I'm trying to upload a file using Kendo Grid , using Kendo Upload is not an option because model and the file are related and upload cannot happen separately.

I've considered two options, having a HttpPostedFileBase field in the model and setting it in the save event. And receiving that file as an argument in the action method and using Data method of update and create configurations. Both of these ways will end up with client-side kendo exceptions like JavaScript runtime error: Argument not optional .

I'll be grateful if you could guide me with this.

Action method signature:

public async Task<ActionResult> Update([DataSourceRequest] DataSourceRequest request, myViewModel model, HttpPostedFileBase file)

Client side functions:

var descRes = new function () {
  this.onSave = function (e) {
        var u2 = $('#upload2');
        var data = new FormData();
        var files = $('#upload2').get(0).files;
        if (files.length > 0)
            data.append('file', files[0]);

        e.model.set('ImageFile', files[0]); // I have tried to set it to `data` too
    };

    this.getFile = function (e) {
        var data = new FormData();
        var files = $('#upload2').get(0).files;
        if (files.length > 0)
            data.append('file', files[0]);

        return { file: data };
        // return data; // I have also tried this, or returning `files[0]` directly
    };
};

Grid's configuration:

@(Html.Kendo().Grid<viewModel>()
    .Name("grid")
    // removed for brevity 
    .Editable(e => e.Mode(GridEditMode.InLine))
    .Events(e => e
        .Save("descRes.onSave")
    )
    .DataSource(ds => ds
        .Ajax()
        .Model(m =>
        {
            m.Id(x => x.Id);
        })
        .Read(r => r.Action("Read", "AssetRes").Data("descRes.readData"))
        .Create(c => c.Action("Create", "AssetRes").Data("descRes.getFile"))
        .Update(u => u.Action("Update", "AssetRes").Data("descRes.getFile"))
        .Destroy("Delete", "AssetRes")
    )
)

I'm also trying to use Kendo Upload separately and use the file's name in the grid's model as in this example , the problem is that the upload object doesn't have any functions, files and getFiles are undefined.

Answer 1

You can write a custom grid editor for the upload. The upload should work asyncly, so you could save your row only when the file is uploaded. In your model you then write the TempFileID returned by the upload. This way I created grids with uploads and further data. It's a little bit tricky, but possible.