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

Need Initial State to be disabled

2 Answers 25 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 20 Dec 2016, 04:37 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 21 Dec 2016, 07:17 AM
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.
0
Joe
Top achievements
Rank 1
answered on 21 Dec 2016, 04:46 PM
Thank you... exactly what I was looking for...
Tags
Upload
Asked by
Joe
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Joe
Top achievements
Rank 1
Share this question
or