Upload Control In Kendo Grid Batch Edit

[mayank]

Hi All,

I want to use Upload Control (Editor Template) Inside kendo Grid with Batch Editing .

How Should I do ?

Can any one help me

Thanks,

[Daniel]

Hi,

I is possible to use the upload widget in the template of the column. To initialize the input you could use the dataBound event and the row ID can be sent as metadata to the server in the upload event so that is known for which item the file is sent. For example:

columns: [
        {field: "FileName", template: "<input type='file' name='files' />"},

function dataBound(e) {
    var grid = this;
    this.tbody.find("input[name=files]").kendoUpload({
        multiple: false,
        async: {
            saveUrl: 'url',
        },
        upload: function (e) {
            var item = grid.dataItem(this.element.closest("tr"));
            e.data = {id: item.id};
        },
        success: function (e) {
            var FileName = e.response.FileName;
            var item = grid.dataItem(this.element.closest("tr"));
            item.FileName = FileName;
            item.dirty = true;
        }
    });
}

Regards,
Daniel
the Telerik team

[mayank]

HI Daniel ,

Thnaks For Your Quick Responce.

But In my case i want to Upload File Data And Additional data On click on submit Button..

View.cshtml

 @(Html.Kendo().Grid<FileAttachments>()
                      .Name("ImportData1")
                      .Columns(columns =>
                      {

                          columns.Bound(o => o.FileName);
                          columns.Bound(o => o.FileType);
                          //columns.Bound(o => o.FileData);
                          columns.Bound(o => o.FileData).ClientTemplate("<input type='file' name='dataFile'/>");
                      })
                .DataSource(source =>
                {
                    source.Ajax()
                          .Model(model =>
                          {
                              model.Field(p => p.FileName).Editable(false);
                              model.Field(p => p.FileData).Editable(false);
                          })

                    
                        .Model(model =>
                        {
                            model.Id(p => p.Id);
                        })
                        .ServerOperation(false)
                        .Batch(true);
  })
 .Editable(editing => editing.Mode(Kendo.Mvc.UI.GridEditMode.InCell).CreateAt(Kendo.Mvc.UI.GridInsertRowPosition.Bottom))
                                        .Navigatable()
                                        .Selectable(s => s.Type(GridSelectionType.Row))
                                        .Resizable(resizable => resizable.Columns(true))
                                        .Reorderable(reorderable => reorderable.Columns(false))
                                        .EnableCustomBinding(true)
                                        .Navigatable()
                                        .Scrollable(action => action.Enabled(true).Height("auto"))
                                )


In controller Method

public ActionResult Attachment(List<HttpPostedFileBase> attachments, FormCollection formValues)
{
/*I DONT GET FIle Collection here*/
}


If you hava any sample Example please provide me.it is very useful to me

Thnaks
Mayank

[Daniel]

Hello again Mayank,

The files cannot be sent via Ajax. Thus you should use an asynchronous upload and upload the file before saving the changes. In order to send data associated with the file when submitting the changes, you can use the approach from my previous reply and set it to the dataItem in the success event. 

Regards,
Daniel
the Telerik team