[Solved] Upload dynamic into detail template of grid

[Jack]

Hello, i have a Upload dynamic into detail template of grid.

This is my kendo template:

<script id="myscript" type="text/x-kendo-template">
        <div class="row">
            <input name="myNameupload" id="myupload#:id#"
                type="file"
                data-role="upload"
                data-async="false"
                data-multiple="false"
                data-show-file-list="false"
                data-bind="events: {
                    select: Upload.onSelect,
                    upload: Upload.onUpload
                }" />
        </div>
    </script>

 

 

My js file:

 

Upload: {
                onSelect: function (e) {
                    e.preventDefault();
                    console.log(e);
                    debugger;
                },
                onUpload: function(e){
                    e.preventDefault();
                    console.log(e);
                    debugger;
                }
            },

 

Upload is a widget into detail template

detail template is defined in the grid.

The error is shown before the event:

 

 

 

 

[Veselin Tsvetanov]

Hello Jack,

The error observed should be related to the event handlers of the Upload widget (select and upload), which are not found in the scope, where they are expected to be. In case those are defined in the "master" view model, like this:

var ovm = kendo.observable({
  PersonData: [{
    id: '1',
    FirstName: "Joe",
    LastName: "Smith"
  },{
    id: '2',
    FirstName: "Jane",
    LastName: "Smith"
  }],
  Upload: {
    onUpload: function(e) {
      console.log('upload')
    },
    onSelect: function(e) {
      console.log(e.sender)
    }
  }
});

you should use the kendo.Observable.parent() method to find them:

<input name="myNameupload" id="myupload#:id#"
       type="file"
       data-role="upload"
       data-async="false"
       data-multiple="false"
       data-show-file-list="false"
       data-bind="events: {
           select: parent().parent().Upload.onSelect,
           upload: parent().parent().Upload.onUpload
       }" />

In the above configuration, the first parent() call will return the observable array holding the dataitems, while the second one will return the "master" view model.

Here you will find a small sample implementing the above.

Regards,
Veselin Tsvetanov
Progress Telerik