Telerik Forums
Kendo UI for jQuery Forum
1 answer
4 views
Is there any way to make a FileManager widget that will allow for the uploading of both files and folders? I see that the 'directory' option of the Upload prevents the selection of files - https://docs.telerik.com/kendo-ui/api/javascript/ui/upload/configuration/directory - but I can't understand the logic here. Why would this be the case? In any event, if this must be the case, then is there a way to replace the upload widget inside of the FileManager widget on the fly, via a custom toolbar option? Even that would suffice. Or possibly have two upload widgets associated with the FileManager? One for files, and one for directories? If I have to, I'll implement a complete destruction and rebuild of the FileManager in order to facilitate this, but that's obviously far from ideal, especially if users are wanting to upload several different things in a single sitting.
Martin
Telerik team
 answered on 27 Mar 2024
1 answer
11 views
I want to costomised validation, but right now it is showing incorrect validation , I am providing the screen sort and working code. pls provide the correct code so I can costomised the validation.

our working code is:
  $("#EnterpriseNote-grid").kendoGrid({
                                            dataSource: {
                                                type: "json",
                                                transport: {
                                                    read: {
                                                        url: "@Html.Raw(Url.Action("ListEnterpriseNoteData", "Enterprise", new { Id = ViewBag.EnterpriseID }))",
                                                        type: "POST",
                                                        dataType: "json",
                                                        //     data: additionalData
                                                    }, create: {

                                                        url: "@Html.Raw(Url.Action("AddEntrpriseNoteData", "Enterprise", new { newdata = "", Id = ViewBag.EnterpriseID }))",
                                                        type: "GET",
                                                        dataType: "json",
                                                        //  data: addAntiForgeryToken
                                                    },update: {
                                                        url: "@Html.Raw(Url.Action("EditEnterpriseNote", "Enterprise"))",
                                                        type: "POST",
                                                        dataType: "json",
                                                        //   data: addAntiForgeryToken
                                                    },
                                                    destroy: {
                                                        url: "@Html.Raw(Url.Action("DeleteEnterpriseNote", "Enterprise"))",
                                                        type: "POST",
                                                        dataType: "json",
                                                        //   data: addAntiForgeryToken
                                                    },
                                                },
                                                schema: {
                                                    data: "Data",
                                                    total: "Total",
                                                    errors: "Errors",
                                                    model: {
                                                        id: "Id",
                                                        fields: {
                                                            strNoteText: {
                                                                editable: true, type: "string",

                                                                validation: {
                                                                    required: {
                                                                        message: 'Note Text is required'
                                                                    },
                                                                }
                                                            },
                                                            strNextReminderDate : { editable: true, type: "date" },
                                                            strFirstname: { editable: false, type: "string" },
                                                            strAssignedTo: {
                                                                editable: true, type: "string",
                                                                validation: {
                                                                    required: {
                                                                        message: 'PhoneNumber is required'
                                                                    },
                                                                    Assignedvalidation: function (input) {
                                                                        var trimmedValue = input.val().trim();
                                                                        debugger
                                                                        if (input.val() == "") {
                                                                            var acv = $(".k-tooltip-validation[data-for='strAssignedTo']");
                                                                            acv.text("PhoneNumber is required");

                                                                        }
                                                                        return true;
                                                                    },
                                                                }, },
                                                            bitClosedYN: { type: "boolean", editable: true, }
                                                        }
                                                    },
                                                    sort: [{ field: "id", dir: "desc" }]
                                                },
                                                requestEnd: function (e) {
                                                    if (e.type == "create" || e.type == "update") {
                                                        this.read();
                                                    }
                                                },
                                                error: function (e) {
                                                    //display_kendoui_grid_error(e);
                                                    // Cancel the changes

                                                    $('#divError').html('<div class="alert alert-danger alert-dismissable">'
                                                        + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>Note cannot be deleted because it is being used.'
                                                        + '</div>');
                                                    this.cancelChanges();
                                                },
                                                pageSize: 4,
                                                serverPaging: true,
                                                serverFiltering: true,
                                                serverSorting: true
                                            },
                                            pageable: {
                                                refresh: true,
                                                pageSizes: [10, 15, 20, 50, 100]

                                            },
                                           toolbar: [{ name: "create", text: "Add New" }],
                                            editable: {
                                                confirmation: "Are you sure you want to delete this item?",
                                                mode: "inline",
                                                //mode: "incell"
                                            },
                                            scrollable: false,                                           
                                             ///////////////////////////code by puja verma//////////////////////
                                            dataBound: function (e) {
                                                
                                                var dataItems = this.dataSource.view();
                                                var isFieldPending = false;
                                                var validationErrors = [];
                                                for (var i = 0; i < dataItems.length; i++) {
                                                    if (dataItems[i].strNoteText === "") {
                                                        isFieldPending = true;
                                                        validationErrors.push("Please Save the new record before clicking Next");
                                                        break;

                                                    }
                                                }
                                               
                                                @*////////////////////code by puja verma///////////////////*@
                                                var nextButton = $("#nexttocomplete");
                                                var validationMessage = $("#validationMessageEnterprisenotes1,#validationMessageEnterprisenotes");
                                                if (isFieldPending || validationErrors.length > 0) {
                                                    nextButton.prop("disabled", true);
                                                    validationMessage.text(validationErrors.join('\n'));

                                                }
                                                
                                                else {
                                                    nextButton.prop("disabled", false);
                                                    validationMessage.text("");
                                                }
                                            },
                                              ///////////////////////////code by puja verma//////////////////////
                                            // dataBound: onDataBound,
                                            columns: [

                                                {
                                                    title: "Action",
                                                    command: [
                                                        {
                                                            name: "edit",
                                                            text: {
                                                                edit: '<i style="color:#B60202;" class="fa fa-edit fa-lg"></i>',
                                                                update: '<i style="color:#B60202;" class="fa fa-floppy-o" aria- hidden="true"></i>',
                                                                cancel: '<i style="color:#B60202;" class="fa fa-close fa-lg"></i>'
                                                            }
                                                        },

                                                        {
                                                            name: "destroy",
                                                            text: '<i style="color:#B60202;" class="fa fa-trash fa-lg"></i>'
                                                        }
                                                    ],
                                                    width: 130
                                                },

                                                {
                                                    field: "strNoteText",
                                                    title: "Enterprise Note",
                                                    width: 300
                                                },
                                                {
                                                    field: "strAssignedTo",
                                                    title: "Assigned to",
                                                    width: 300,
                                                    template: '#=strFirstname#',
                                                    editor: function (container, options) {
                                                        $('<input required name="' + options.field + '"/>')
                                                            .appendTo(container)
                                                            .kendoDropDownList({
                                                                dataSource: noteList,
                                                                dataTextField: "strFirstname",
                                                                dataValueField: "strAssignedTo",
                                                                valuePrimitive: true,
                                                                autoBind: false,
                                                                optionLabel: "Select site admin",
                                                                height: 500
                                                            })
                                                    },
                                                },
                                                {
                                                    field: "strNextReminderDate",
                                                    title: "Reminder Date",
                                                    format: "{0:dd/MM/yyyy}",
                                                    width: 300
                                                },
                                                {
                                                    field: "bitClosedYN",
                                                    title: "Status",
                                                    width: 100,
                                                    //template: "<input type='checkbox' name='bitClosedYN' checked='checked' disabled='disabled' />",
                                                    template: "#= (bitClosedYN == true ) ? 'Yes' : 'No' #",
                                                    attributes: { class: "ob-fld-boolean" },
                                                }

                                                    ]
                                                });
Neli
Telerik team
 answered on 21 Feb 2024
1 answer
34 views
I've been trying to update from an older version 2019.3.1114 to a newer version, but from 2020.1.114, which is the next on the list that's not internal https://www.npmjs.com/package/@progress/kendo-ui?activeTab=versions, an onwards, I get the same error

kendoUpload is not a function.
RIght now I'm just trying to upgrade to the newest version but regardless I still get the same error. It sets some other kendo stuff on
$('files') as you can see from the screenshot, (kendoAddClass, kendoAnimate etc.) but not kendoUpload





On 
https://docs.telerik.com/kendo-ui/controls/upload/get-started
It says I should make the "files" input which I have
and it says I should call kendoUpload on files which I'm trying to but it doesn't exist
I thought it was a timing issue so I put it into a setTimeout, but it's still not there

Looking at 
https://docs.telerik.com/kendo-ui/backwards-compatibility/2020-backward-compatibility
There's nothing that suggests that kendoUpload should break or act different from 2019 to 2020 versions as far as I can see.


Is there something else I'm missing? Do I need to activate it somehow? I'm loading both kendo.all.js and kendo.upload.js, I tried with just all.js first.
Rasmus
Top achievements
Rank 1
Iron
 answered on 25 Jan 2024
1 answer
38 views

Hi,

I need to send some dynamic parameters, (path and others), when uploading files from js.
I've tried several ways, without success. Can anyone help me?
Neli
Telerik team
 answered on 07 Dec 2023
0 answers
33 views

I have a Dojo here: https://dojo.telerik.com/UhicOWUv

I want to hide the file list but I want to display an error message on the page if it doesn't upload. In the above example, I am attempting to upload a file that is too large. Instead of displaying an error message in the "messages" div, it is doing nothing so the user doesn't know it failed. How do I accomplish my goal of hiding the files list but showing a message when something goes wrong?

Here is the code: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css"/>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
</head>
<body>
  
<input type="file" name="files" id="photos" />
  <div id="messages"></div>
<script>
    $("#photos").kendoUpload({
        async: {
            saveUrl: "http://my-app.localhost/save",
            removeUrl: "http://my-app.localhost/remove"
        },
        showFileList: false,
      	validation: {
                allowedExtensions: [".pdf"],
                maxFileSize: 900000,
                minFileSize: 300000
            },
      error: function() { $("#messages").append("error"); }
    });
</script>
</body>
</html>

Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
 asked on 31 Oct 2023
1 answer
71 views

We're using kendoUpload control in a .NET MVC project, when selecting multiple files that are tiny in size there is no problem to select and upload many (37 txt files with a size close to 0 used in example). But when trying upload as little as 6 files with a size of around 400Kb the ui seems to upload 1 file, freeze and after some 20 - 30 seconds returns an upload error (hits the "error" method of the kendoUpload object that is).

$("#files").kendoUpload({
    async: {
        chunkSize: 2048000,
        concurrent: false,
        saveUrl: infra.App.baseUrl + "Api/Upload/AdicionarAnexos/" + wbc.Upload.sPastaDestino + "/" + wbc.Upload.nCdModulo,
        autoUpload: false,
    },

...

}

Martin
Telerik team
 answered on 25 Sep 2023
1 answer
91 views

Hi Guys,

Is there a quick way to remove files from a Kendo UI Upload plus fire the corresponding remove request on the server? I have a Kendo UI Form where I added the Kendo Upload. When the user clicks the Clear button in the form, the files are removed from the list however the remove request is not fired thus, the uploaded files are still in the server. 

This is the code snippet on how I have added the kendo upload to the kendo form:

$('<input type="file" name="' + options.field + '" id="' + options.field + '"/>').appendTo(container)
                .kendoUpload({
                    multiple: false,
                    async: {
                        saveUrl: "/api/upload/save",
                        removeUrl: "/api/upload/remove"
                    },
                    validation: {
                        allowedExtensions: [".jpg", ".gif"]
                    },
                    upload: (e: kendo.ui.UploadUploadEvent) => {
                        e.data = { uploadId: this._uploadId };
                    },
                    remove: (e: kendo.ui.UploadRemoveEvent) => {
                        e.data = { uploadId: this._uploadId };
                    },
                    success: (e: kendo.ui.UploadSuccessEvent) => {
                        this.enableSubmit(e.operation === 'upload');
                    }
                })

I have tried using the removeAllFiles() or removeFile() but doesn't seem to do any request calls.

Hoping to hear from you soon.

Kindest regards, Ruby.

 

Martin
Telerik team
 answered on 18 May 2023
1 answer
328 views
I would like to know how to prevent form submission when the kendo upload has a validation error. I know I can disable the submit button, but I would prefer when the button is clicked to run a validation check, if there is validation, return false on something similar.
Nikolay
Telerik team
 answered on 03 Feb 2023
1 answer
87 views

would like to check if it is possible to style the upload control to as follows

 

when no file selected

after file selected

 

Martin
Telerik team
 answered on 21 Dec 2022
0 answers
45 views

Hi,

I was trying to update my kendo version to the latest available (from 2019 to 2022) and when compiling my scss files I always get an error saying that my CSS is invalid after "...-header-border," which most likely corresponds to the $grid-header-border variable in the grid's theme file.

Invalid CSS after "...-header-border,": expected expression (e.g. 1px, bold), was ");"

I have downloaded the latest version from Node. I added the classic version.

dominic
Top achievements
Rank 1
 asked on 04 Nov 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?