Upload in Grid Custom Editor

9 posts, 0 answers
  1. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 30 May 2012 Link to this post

    Is it possible to put an upload widget in the Custom Editor for an editable grid with a CRUD datasource to a web service? 

    Here is my concept:
    I'd like to have a grid that has columns for a description of a document, who uploaded it, the date uploaded/edited and a link to the uploaded file.  With Create in the toolbar, they could add a new record or edit a row to upload an newer version of the file.  The upload widget would be in the column with the link to the uploaded file.
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 31 May 2012 Link to this post

    Hello Cyndie,

    I am not sure if I understand your scenario correctly, but if you would like to include the upload widget to the column of the Kendo UI Grid you could check the following forum thread with a similar subject.

    If this is not your case, please provide more detailed information about your scenario.

    Kind regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 31 May 2012 Link to this post

    Thank you for your response.  I saw that example, but I think what I'm hoping for is a little more complex.  The difference is that I'd like to use an editable grid using remote data and have the upload widget as an edit template, with a link to the uploaded file when not editing. 

    in view mode
    column1, column2, column3, column4
    value        value      value       hyperlink to uploaded file

    in edit mode
    column1, column2, column3, column4
    textbox    textbox    textbox    upload widget

    I'm not sure how to integrate the upload widget with a datasource to a web service.

    Thanks again.
  5. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 31 May 2012 Link to this post

    I tried to use an async upload widget in a custom editor and receive the following error:
    Microsoft JScript runtime error: Object doesn't support property or method 'value'
    at line 7280 in kendo.web.js

    function fileUploadEditor(container, options) {
            $('<input type="file" id="files" name="files" />')
            .appendTo(container)
            .kendoUpload({
                async:{
                    saveUrl: "http://rces-web/rcesonly/oandt/OandtWebService.asmx/UploadFile",
                    autoUpload: true
                }
            });
        }

  6. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 01 Jun 2012 Link to this post

    Can I add an async upload via a template as in this example?
    http://www.kendoui.com//forums/ui/grid/custom-popup-editor-with-additional-fields.aspx

    I set data-role to upload and get the kendo styled uploader, but do not know how to specify the async saveUrl from html.  If I can get that to work, it would resolve my issue.
  7. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 01 Jun 2012 Link to this post

    Okay, I finally figured this out:

    <input name="files" id="files" type="file" data-role="upload" data-async='{"saveUrl":"http://rces-web/rcesonly/oandt/OandtWebService.asmx/UploadFile", "autoUpload":"true"}'/>
  8. Cyndie
    Cyndie avatar
    114 posts
    Member since:
    Jul 2010

    Posted 15 Jun 2012 Link to this post

    I have found that this works, except in the case when a user clicks edit, then uploads a new file and does not change anything else.  If that happens, the update does not trigger.
  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 20 Jun 2012 Link to this post

    Hello Cyndie,

    To save the new uploaded file, you should hook up the upload success event. Hence, in the grid save event set the file name to the dataSource via the model. Please keep it in mind that to enable the editing support of KendoUI Grid widget you should configure the DataSource for remote CRUD data operations and define the DataSource schema

    For convenience, I created a simple project which illustrates such approach in action.
     
    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. krishna
    krishna avatar
    4 posts
    Member since:
    Jan 2015

    Posted 19 Feb 2015 in reply to Cyndie Link to this post

    hello Cyndie ! Could u plz post the '.cs' and '.cshtml' code for the same ! i am looking for similar kind of stuff actually. Thanks :)
Back to Top
Kendo UI is VS 2017 Ready