Need Initial State to be disabled

3 posts, 1 answers
  1. Joe
    Joe avatar
    103 posts
    Member since:
    May 2012

    Posted 20 Dec 2016 Link to this post

    I have a form that has three dropdowns and a file upload control, all Kendo components.  I'd like the initial state of the Upload component to be disabled until the user has selected the appropriate values from the dropdowns.  I have all the dropdowns working appropriately, and their change events are all wired up, but I need to have the initial state of the uploader disabled until all three dropdowns have been answered, and then enable the upload.

    In the uploader event, I have the select event wired into the validation, but it doesn;t actually fire until the user has selected a file, whereas I don;t want them to select the file even until the dropdowns have been answered.  What is the best way to do this?

    $("#FileUpload1").kendoUpload({
        async: {
            saveUrl: "@Url.Action("UploadFile", "Mapping")"
        },
        upload: function(e) {
            e.data = {
                clientId: viewModel.get("ClientId"),
                uploadType: viewModel.get("uploadType"),
                payrollType: viewModel.get("payrollType")
            }
        },
        multiple: false,
        localization: {
            "select": "Select file to import..."
        },
        select: function (e) {
            if ((viewModel.get("ClientId") === "") ||
                (viewModel.get("uploadType") === "") ||
                (viewModel.get("payrollType") === "")) {
                alert("Please Make All Appropriate Selections Before Uploading");
                e.preventDefault();
                return;
            }
            var extension = e.files[0].extension.toLowerCase();
            if (ALLOWED_EXTENSIONS.indexOf(extension) === -1) {
                alert("Please, select a supported file format");
                e.preventDefault();
                return;
            }
        },
        success: function(e) {
            spreadsheetWrapper.show();
            // Load the converted document into the spreadsheet
            $("#spreadsheet").data("kendoSpreadsheet").fromJSON(e.response);
            $("#uploadForm").hide();
        }
    });

     

  2. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    912 posts

    Posted 21 Dec 2016 Link to this post

    Hello Joe,

    Here's a dojo example that demonstrates how you can set the upload initially to be disabled (enabled: false) and then enable it (.setOptions({enabled: true});) when an item in the DropDownList is selected.

    Regards,
    Ivan Danchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Joe
    Joe avatar
    103 posts
    Member since:
    May 2012

    Posted 21 Dec 2016 in reply to Ivan Danchev Link to this post

    Thank you... exactly what I was looking for...
Back to Top