Upload dynamic into detail template of grid

2 posts, 0 answers
  1. Jack
    Jack avatar
    1 posts
    Member since:
    Apr 2019

    Posted 03 Apr 2019 Link to this post

    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:

     

     

     

     

  2.
  3. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1228 posts

    Posted 05 Apr 2019 Link to this post

    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.
Back to Top