This is a migrated thread and some comments may be shown as answers.

Upload dynamic into detail template of grid

1 Answer 64 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Jack
Top achievements
Rank 1
Jack asked on 03 Apr 2019, 08:41 AM

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:

 

 

 

 

1 Answer, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 05 Apr 2019, 07:36 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Upload
Asked by
Jack
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Share this question
or