I've got a scenario where a tooltip is not hiding when another tooltip is shown, and here is a dojo for reference.

If you move your mouse up and down the colors, the tooltips show and hide as they should. If you stop on a color, move the mouse right into the tooltip, then straight back out of the tooltip and back into the color for that tooltip, then move the mouse up or down over another color, the first tooltip doesn't hide. You can repeat this sequence for the other tooltips as well, resulting in multiple tooltips showing.

Here is a jam so you can see what I mean as well. You can't see the mouse move, but you can see the multiple tooltips.

Hello,
I used the following approach for binding Kendo Gantt data source to local java-script array.

var dataSourceArray = [{...}, {...}, ...];
var fieldsObject = {id: { from: "id", type: "string", defaultValue: function () { return kendo.guid(); } }, parentId: { from: "parentId", type: "string", defaultValue: null }, start: { from: "start", type: "date" }, end: { from: "end", type: "date" }, title: { from: "title", type: "string" }, percentComplete: { from: "percentComplete", type: "number" }};
//we have pre-filled java-script array and fieldsObject
//define Kendo Gantt data source

var _dataSource = new kendo.data.GanttDataSource({

            schema: {
                model: {
                    id: "id",
                    fields: fieldsObject
                }
            },
            transport: {
                read: function (e) {
                    e.success(dataSourceArray );
                },
                create: function (e) {
                    if (e.data.models && e.data.models.length > 0) {
//...

                        }
                    }
                    else {
                        //...
                    }
                },
                update: function (e) {
                    if (e.data.models && e.data.models.length > 0) {
//...

                        }
                    }
                    else {
                        //...
                    }
                },
                destroy: function (e) {
                    if (e.data.models && e.data.models.length > 0) {
//...                       
                    }

                    }
                    else {
                       //...
                }
            },
            change: function (e) {
                if (e.action == "add" || e.action == "remove") {
                   //...
                }
                if ((e.action == "itemchange" || e.action == "remove") && (e.field == "percentComplete" || e.field == "start" || e.field == "end")) {
                   
                    }
                }
            }
        });

//Then Kendo Gantt is created

_kendoGantt = $("#gantt").kendoGantt({
                toolbar: [
{ template: kendo.template($("#headerTemplate").html()) }
                ],
                pdf: { fileName: $scope.selectedGantt },
                dataSource: _dataSource,
                dependencies: _dependencies, //also defined above in the code
                columns: _leftCols, //also defined above in the code
                views: [{ type: "day", selected: _ganttSettings.Timescale == "day" ? true : false }, { type: "week", selected: _ganttSettings.Timescale == "week" ? true : false },
{ type: "month", selected: _ganttSettings.Timescale == "month" ? true : false }, { type: "year", selected: _ganttSettings.Timescale == "year" ? true : false }],
                listWidth: _listWidth,
                showWorkDays: !_showWeekends,
                dataBound: _onTaskDataBound,
                moveStart: _onTaskMoveStart,
                resizeStart: _onTaskMoveStart,
                save: _onTaskSave,
                remove: _onTaskRemove,
                navigate: _onTaskNavigate,
                add: _onTaskDependencyAdd,
                change: _onTaskChange,
                edit: _onTaskEdit,
                height: _gHeight
            });

function _onTaskEdit(e) {
if(e.task.id){
//....
}
};

This code worked perfectly in version of Kendo UI v2016.3.1118, but it does not work in version v2021.2.616.

Using this code in version v2021.2.616 does not display any tasks in Kendo Gantt.

If I bind data source to local java-script array directly in Kendo Gantt constructor (dataSource: dataSourceArray), it displays tasks, but task does not have valid "id" (it is null) in event _onTaskEdit (when I double click task for editing). In this case id field must have string value according to: id: { from: "id", type: "string", defaultValue: function () { return kendo.guid(); } }

Your examples in documentation do not show how to provide custom data source schema while binding to local java-script array.

How do I provide custom data source schema while binding to local java-script array and make code above working for version v2021.2.616?

Im trying to display a kendo.grid after clicking submit. I attached a screenshot so you can understand what Im trying to do.

After filling in the information and click submit, I want the information to be displayed below but unfortunately nothing change after I click submit. Only the content in else is displayed

This is my code in view

<script>
$(document).ready(function () {
    $("#form").kendoForm({
        validatable: { validationSummary: true },
        orientation: "horizontal",
        formData: ...,
        items: ...,
        submit: function (ev) {
            $.ajax({
                type: "POST",
                url: RootUrl+"Issue/ReportIssue",
            });
        }
    });
    $("#grid").kendoGrid({
        dataSource: {
            data: [
                @if (ViewBag.ReportResult != null)
                {
                    foreach (var item in ViewBag.ReportResult)
                     {
                        @: { col1: '@item.ISSUE_NUM', col2: '@item.PRIORITY', col3: '@item.MODULE', col4: '@item.DESCRIPTION', col5: '@item.REPORTED_DATE', col6: '@item.ISSUE_RESOLUTION', col7: '@item.RESPOND_DATE', col8: '@item.ACTION_TAKEN', col9: '@item.RESOLVED_DATE', col10: '@item.STATUS' },
                     }
                } else
                {
        
                        @: { col1: 'fdfd', col2: 'fd', col3: 're', col4: 'gf', col5: 'hg', col6: 'hy', col7: 'hg', col8: 'jh', col9: 'yt', col10: 'hg' },
                }
            ],
            pageSize: 10
        },
        sortable: true,
        pageable: ...,
        groupable: true,
        filterable: true,
        // columnMenu: true,
        reorderable: true,
        resizable: true,
        selectable: "multiple, row",
        columns: ...
    });
});

Here is my controller. I commented a line in the sql statement(line 24 from bottom). Just ignore that as I dont want to carry two problems at the same time.

[HttpGet]
    public ActionResult ReportIssue()
    {
        if (Session["User_Name"] == null)
            return RedirectToAction("Login", "Account");
        else
        {
            ViewBag.ValidationErrorMsg = "";
            ViewBag.ReportResult = null;
            

            SetUserViewBag();

            return View();
        }
    }

    [HttpPost]
    public ActionResult ReportIssue(string application, string environment, string DateFrom, string DateTo)
    {
        if (Session["User_Name"] == null)
            return RedirectToAction("Login", "Account");
        else
        {
            ViewBag.ValidationErrorMsg = "";
            string get_report_issue = "select " +
                "i.ISSUE_NUM, " +
                "i.PRIORITY, " +
                "i.MODULE, " +
                "CONCAT(i.TITLE, CHAR(13), CHAR(10), i.DESCRIPTION) AS DESCRIPTION, " +
                "CONVERT(VARCHAR(20), i.CREATED_DATE, 103)AS REPORTED_DATE, " + //dd / mm / yyyy 
                "CONCAT(i.ISSUE_TYPE, CHAR(13), CHAR(10), i.ISSUE_CATEGORY, CHAR(13), CHAR(10), i.ISSUE_RESOLUTION) as ISSUE_RESOLUTION, " +
                "CONVERT(VARCHAR(20), " +
                    "( " +
                    "select " +
                        "min(MODIFIED_DATE) " +
                    "from NEPS.dbo.WEBGIS_ISSUE_LOG " +
                    "where " +
                        "i.issue_num = issue_num " +
                        "and FIELD = 'STATUS' " +
                        "and OLD_VALUE = 'NEW'),103 " +
                    ") as RESPOND_DATE, " + //dd / mm / yyyy 
                "STUFF( " +
                    "( " +
                    "SELECT " +
                        "',' + a.NEW_VALUE " +
                    "FROM NEPS.dbo.WEBGIS_ISSUE_LOG a " +
                    "WHERE " +
                        "a.ISSUE_NUM = i.ISSUE_NUM " +
                    "ORDER BY " +
                        "a.NEW_VALUE FOR XML PATH('')), 1, LEN(','), CHAR(13) " +
                    ") AS ACTION_TAKEN, " +
                "CONVERT(VARCHAR(20), ISNULL( " +
                        "( " +
                        "select "  +
                            "max(MODIFIED_DATE) " +
                        "from NEPS.dbo.WEBGIS_ISSUE_LOG " +
                        "where " +
                            "i.issue_num = issue_num " +
                        "and FIELD = 'STATUS' " +
                        "and NEW_VALUE = 'RESOLVED' " +
                        "), " +
                        "( " +
                        "select " +
                            "max(MODIFIED_DATE) " +
                        "from NEPS.dbo.WEBGIS_ISSUE_LOG " +
                        "where " +
                            "i.issue_num = issue_num " +
                        "and FIELD = 'STATUS' " +
                        "and NEW_VALUE = 'CLOSED' " +
                        ") " +
                    ") , 103) AS RESOLVED_DATE, " +
                "i.STATUS " +
            "FROM NEPS.dbo.WEBGIS_ISSUE i " + 
            "LEFT JOIN NEPS.dbo.WEBGIS_ISSUE_LOG C " + 
                "ON i.ISSUE_NUM = C.ISSUE_NUM " +
            "where " +
                "(C.FIELD = 'REMARKS' or C.FIELD = 'STATUS') " +
                //"AND(C.MODIFIED_DATE between " + Convert.ToDateTime(DateFrom).ToString() + " and " + Convert.ToDateTime(DateTo).ToString() + ") " +
                "AND(i.APPLICATION = '" + application + "' OR 'ALL' = '" + application + "' ) " +
                "AND(i.ENVIRONMENT = '" + environment + "' OR 'ALL' = '" + environment + "' ) " +
            "group by " +
                "i.ISSUE_NUM, " +
                "i.PRIORITY, " +
                "i.MODULE, " +
                "i.TITLE, " +
                "i.DESCRIPTION, " +
                "i.CREATED_DATE, " +
                "i.ISSUE_TYPE, " +
                "i.ISSUE_CATEGORY, " +
                "i.ISSUE_RESOLUTION, " +
                "i.STATUS";

            var listReportIssue= db.Database.SqlQuery<ReportIssue>(get_report_issue).ToList();

            return Json(new
            {
                Success = true,
                ListData = listReportIssue
            }, JsonRequestBehavior.AllowGet);
        }
    }

Hi,

I have following situation:

We have desktop application and web application with angularJS and Kendo UI jquery which both use same server REST API. 

If user enters malicious code as string <script>alert("security breach")</script> through desktop application or manually through postman and API, this is saved to the database (we have cases where we have to allow such tags in db). When this is rendered on desktop, it is fine, but when I render Kendo UI tree list - script is rendered and executed.  So, my tree list is displayed, and alert is executed.

I have ngSanitize turned on application wide, but it seems not to be working on kendo ui widgets used within (we combine jquery and angular approach for widgets).

Do you have any suggestions how to approach to this? 

Thank you

Hello, I'm using some kendo grids in my application. i need to make them WCAG 2.1 AA compliant.

I use the wave plugin for chrome to see if there are any WCAG errors and its reporting that I have broken aria references on my grid page footer.

this is only happening on some grids so i believe its a setting to do with the grid or the page footer. 

this also happens on your basic demo of the grid

https://demos.telerik.com/kendo-ui/grid/basic-usage

but not the grid overview 

https://demos.telerik.com/kendo-ui/grid/index

thanks in advance

Jack

I have a grid with foreign key columns

columns.ForeignKey(c => c.LanguageID, (System.Collections.IEnumerable)ViewData["languages"], "Id", "Description").Title("Language").Width(200);

I want to get the text value of the foreign key drop down value ie: English in this case for selected rows.

       grid.select().each(function () {

            var dataItem = grid.dataItem($(this));
            console.log(dataItem);
        
        });

is there an easy way to read the description?

Thanks

Dear sirs, I can't get a result.

As you can see, the first value for (01.01.2021) is located in the middle of first step.

Can you help me guess please, how should I configure the chart to bring the 01.01.2021 with it's value (0) right to the zero level of X line?

I'd like the chart values move left in a half of the cell step.

Greetings. I am getting the following error while uploading a file with Kendo upload. Code works fine at local. But it gives this error on the server.

Error:

Client-Side Code:

 $("#batchFile").kendoUpload({
                   async: {
                       saveUrl: '/DijitalArsiv/UploadFile/',
                       autoUpload: false
                   },
                upload: function (e) {


                    if (uploadFileNode.isMainFolder) {
                        realPath = realPath + "\\" + personelID
                    }

                    e.data = { "id": uploadFileNode.id, "path": realPath, "isMainFolder": uploadFileNode.isMainFolder, "type": uploadFileNode.spriteCssClass };


                   },
                   select: function (e) {

                       if (e.files.length != 0) {
                           $.each(e.files,function (index, value) {

                               var filtredValue =  acceptedFileTypes.filter(x => x == value.extension)
                               if (filtredValue.length == 0) {
                                   e.preventDefault();
                                   $("#message-alert").html("Sadece '.pdf', '.jpg', '.png', '.jpeg', '.docx', '.xlsx'  türünde dosyalar yükelenebilir. Lütfen yüklediğiniz dosyların türünü kontrol edin.")
                                    kendoWindowMessageAlertModal.data("kendoWindow").content($("#message-alert").html()).center().open();
                               }
                           })
                       }
                   },
                   success: function (e) {

                       if (e.response.Status) {
                           getTreeView().append([{ id: e.response.ID, text: e.response.FileName, spriteCssClass: e.response.Type, UnicParentCode: nodeToUploadParent.UnicParentCode, isDraggable: true, isDroppable: true, hasChildren: false, isEditable: false, isMainFolder: false }], nodeToUpload)
                           updateBackupTree();
                       } else {
                           e.preventDefault();
                       }
                   },
                   multiple: true,
                   batch: true,
                   localization: {
                        cancel: "İptal",
                        dropFilesHere: "Dosyalarınızı Buraya Sürükleyebilirsiniz!",
                        remove: "Sil",
                        retry: "Tekrar Dene!",
                        select: "Dosya Seç",
                        statusFailed: "Yükleme Başarısız!",
                        statusUploaded: "Yükleme Başarılı!",
                        statusUploading: "Yükleniyor...",
                        uploadSelectedFiles: "Yükle"
                   }
               });

Server-side Code:

        [HttpPost]
        public JsonResult UploadFile(HttpPostedFileBase batchFile, int? id, string path, bool isMainFolder,string type)
        {

        }

Hello, I'm currently working on a project for my company and ive encountered a problem. I dont know why I cant download the file attachment. ive attached a jpg file of the screenshot for you to see. There is a file attachment named sad kermit(2).jpg and a message in the console in the screenshot

This is my kendo form code in view.

$("#form").kendoForm({
            validatable: { validationSummary: true },
            orientation: "horizontal",
            formData: {
                ID: "@Model.ID",
                IssueNumber: "@Model.ISSUE_NUM",
                Title: "@Model.TITLE",
                Environment: "@Model.ENVIRONMENT",
                Application: "@Model.APPLICATION",
                Module: "@Model.MODULE",
                Priority: "@Model.PRIORITY",
                Status: "@Model.STATUS",
                FID: "@Model.FID",
                Jobname: "@Model.JOBNAME",
                Username: "@Model.USERNAME",
                MantisNumber: "@Model.MANTIS_NO",
                ModifiedBy: "@ViewBag.User_Name",
                Upload: "",
                ModifiedDate: "@Model.MODIFIED_DATE",
                Description: "@Model.DESCRIPTION",
                IssueType: "@Model.ISSUE_TYPE",
                IssueCategory: "@Model.ISSUE_CATEGORY",
                IssueResolution: "@Model.ISSUE_RESOLUTION",
                Remarks: "@Model.REMARKS",
                AssignedTo: "@Model.ASSIGNED_TO",
                CreatedBy: "@ViewBag.User_Name"
            },
            items: [{
                type: "group",
                label: "Edit Issue Details",
                items: [
                    ...,
                   ...,
                    ...,
                    ...,
                    ...,
                   ...,
                    ...,
                    ...,
                    ...,
                    ...,
                    ...,
                    {
                        field: "Upload",
                        label: "Upload File:",
                        editor: function (container, options) {
                            $("<input name='files' id='files' type='file' aria-label='files' />").appendTo(container).kendoUpload({
                                async: {
                                    saveUrl: '@Url.Action("UploadFiles", "Issue")',
                                    removeUrl: '@Url.Action("RemoveFiles", "Issue")',
                                    autoUpload: true
                                },
                                files: uploads
                            });
                        }
                    },
                    ...,
                    ...,
                    ...,
                    ...,
                    ...,
                    ...,
                    ...,
                    ...,
                ]
                }],
                submit: function (ev)...
            });

this is the code I use to try to download the file attachment in the same view but it isnt working I guess

$(".k-file").click(function (e) {
                var filename = $(this).find(".k-file-name").html();

                $.ajax({
                    type: "POST",
                    data: { "name": filename },
                    url: "/Issue/DownloadFile",
                    success: function (res) {
                        if (res.Success) {
                            console.log(res.DownloadUrl);
                            window.open(res.DownloadUrl, '_blank');
                        }
                    }
                });
            });

[HttpPost]
        public ActionResult DownloadFile(string name)
        {
            var folderName = Session["IssueNum"] as string;

            string fileDirectory = Path.Combine(System.Web.HttpContext.Current.Request.PhysicalApplicationPath, "App_Data", folderName, name);

            return Json(new
            {
                Success = true,
                DownloadUrl = fileDirectory
            }, JsonRequestBehavior.AllowGet);
        }