As the title, I initialize kendo UI grid from exiting html table. There is one date column inside the table, and I would like to format it to "yyyy-MMM-dd" format. And I would like to add header filter to do it as well. 

The code can be found here: http://dojo.telerik.com/IVimEc

Here is my initialization of my kendo scheduler:

scheduler = $('#scheduler').kendoScheduler({
                            toolbar: [ 'pdf' ],
                            pdf: {
                                fileName: 'Current Schedule View.pdf',
                                proxyTarget: '_blank'
                            },
                            date: new Date(),
                            startTime: new Date(),
                            timezone: "America/Chicago",
                            editable: {
                                template: $("#editor_template").html(),
                            },
                            messages: {
                            pdf: 'To PDF'   
                            },
                            eventTemplate: $('#event_template').html(),
                            views: [
                                "day",
                                {type: "week", selected: true},
                                "workWeek",
                                "month",
                                {type: "agenda", eventTemplate: $('#agendaEventTemplate').html()},
                                {type: "timeline", eventHeight: 50}
                                
                            ],
                            dataSource: dataSource,
                            save: function(e){
                            console.log('Saving');
                                console.log(e);
                            },
                            cancel: function(e){
                                console.log('Cancelling');
                            console.log(e); 
                                console.log(e.event.ownerId[0].value);
                                console.log(attendeeSaver);
                                e.event.ownerId = e.event.ownerId[0].value;
                                e.event.attendees = attendeeSaver;
                                console.log(e);
                            },
                            edit: function(e){
                                console.log(e);
                                attendeeSaver = e.event.attendees;
                                //if(e.event.ownerId == '{!currentUser}' || e.event.ownerId == 'none'){
                                
                                console.log(e);
                                console.log(e.event.attendees);
                                console.log(e.event.ownerId);
                                console.log($('#WhoIdSearchInput'));
                                
                                
                                var whatIdAutoComp = $('#WhatIdInput').kendoAutoComplete({
                                    minLength: 3,
                                    filter: 'contains',
                                    dataTextField: 'name',
                                    noDataTemplate: $('#noDataTemplate').html(),
                        filtering: whatId_filter,
                        dataBound: whatId_dataBound,
                        change: whatId_change,
                                    open: whatId_open,
                                    select: whatId_selection
                    }).data('kendoAutoComplete');
                                console.log($('#WhatIdInput'));
                                var whoIdAutoComp = $('#WhoIdInput').kendoAutoComplete({
                                    minLength: 3,
                                    filter: 'contains',
                                    dataTextField: 'name',
                                    noDataTemplate: $('#noDataTemplate').html(),
                        filtering: whoId_filter,
                        dataBound: whatId_dataBound,
                                    open: whoId_open,
                        change: whoId_change,
                                    select: whoId_selection
                    }).data('kendoAutoComplete');
                                console.log('Test spot');
                                Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.CalendarData.getOrgUsers}', function(result, event){
                                    result = result.replace(/\&quot\;/g, '"');
                                    var resultArray = JSON.parse(result);
                                    var userList = [];
                                    for(var i = 0; i < resultArray.length; i++){
                                        var gradientColor = ColorLuminance(resultArray[i].color, -0.5);
                                        var personalColor = 'linear-gradient(' + resultArray[i].color + ', ' + gradientColor + ')';
                                        var person = { name: resultArray[i].name, value: resultArray[i].ownerId, tagColor: personalColor, color: resultArray[i].color };
                                        userList.push(person);
                                    }
                                    console.log('test spot');
                                    $('#OwnerIdInput').kendoMultiSelect({
                                        maxSelectedItems: 1,
                                        placeholder: 'Select Event Owner',
                                        tagTemplate: '<span class="selected-value"</span><span style="color: white;">#:data.name#</span>',
                                        template: $('#dropDownTemplate').html(),
                                        dataTextField: 'name',
                                        dataValueField: 'value',
                                        dataSource: {
                                            data: userList  
                                        },
                                        change: function(e) {
                                            //console.log(e);
                                            console.log('Inside owner box');
                                            var selectedTags = $('.k-multiselect li.k-button');
                                            for(var i = 0; i < selectedTags.length; i++){
                                                var tag = $(selectedTags[i]);
                                                var item = $(tag.find('span.selected-value'));
                                                for(var k = 0; k < userList.length; k++){
                                                    if(item[0].textContent === userList[k].name){
                                                        tag.css({'background': userList[k].tagColor, 'width': '100px', 'height': '30px', 'font-size': '15px', 'overflow':'hidden', 'text-overflow':'ellipsis', 'border-radius':'5px'});   
                                                    }
                                                }
                                            }
                                        },
                                    });
                                    console.log('done making owner box');
                                    console.log($('#OwnerIdInput').data('kendoMultiSelect'));
                                    $('#OwnerIdInput').data('kendoMultiSelect').trigger('change');
                                    console.log('triggered owner box');
                                    //Populate edit/create popup fields with passed parameters
                                    /*for(var i = 0; i < parsedParamData.length; i++){
                                        console.log($('#'+parsedParamData[i].fieldName+'Input')[0]);
                                    if(parsedParamData[i].fieldName == 'WhatId' || parsedParamData[i].fieldName == 'WhoId'){
                                            $('#'parsedParamData[i].fieldName+'Input')[0].prop('value', ''+parsedParamData[i].recordName);
                                            //$('#'+parsedParamData[i].fieldName+'Input').data('kendoAutoComplete').value(parsedParamData[i].recordName);
                                        }
                                    else if(parsedParamData[i].fieldName == 'OwnerId'){
                                            $('#'+parsedParamData[i].fieldName+'Input').prop('value', ''+parsedParamData[i].recordId);
                                            //$('#'+parsedParamData[i].fieldName+'Input').data('kendoMultiSelect').value(parsedParamData[i].recordId);
                                        }
                                }*/
                                }); 
                                
                                Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.CalendarData.getAllOrgResources}', function(result, event){
                                    result = result.replace(/\&quot\;/g, '"');
                                    var resultArray = JSON.parse(result);
                                    console.log(resultArray);
                                    var userList = [];
                                    for(var i = 0; i < resultArray.length; i++){
                                        var gradientColor = ColorLuminance(resultArray[i].color, -0.5);
                                        var personalColor = 'linear-gradient(' + resultArray[i].color + ', ' + gradientColor + ')';
                                        var person = { name: resultArray[i].name, value: resultArray[i].ownerId, tagColor: personalColor, color: resultArray[i].color, resourceType: resultArray[i].ownerType, email: resultArray[i].email };
                                        userList.push(person);
                                    }
                                    $('#inviteInput').kendoMultiSelect({
                                        enable: false,
                                        maxSelectedItems: 90,
                                        placeholder: 'Select People/Resources/Groups to Invite',
                                        tagTemplate: '<span class="selected-value"</span><span style="color: white;">#:data.name#</span>',
                                        template: $('#dropDownTemplate').html(),
                                        dataTextField: 'name',
                                        dataValueField: 'value',
                                        dataSource: {
                                            data: userList,
                                            group: {field: 'resourceType'}
                                        },
                                        change: function(e) {
                                            //console.log(e);
                                            var selectedTags = $('.k-multiselect li.k-button');
                                            for(var i = 0; i < selectedTags.length; i++){
                                                var tag = $(selectedTags[i]);
                                                var item = $(tag.find('span.selected-value'));
                                                for(var k = 0; k < userList.length; k++){
                                                    if(item[0].textContent === userList[k].name){
                                                        tag.css({'background': userList[k].tagColor, 'width': '100px', 'height': '30px', 'font-size': '15px', 'overflow':'hidden', 'text-overflow':'ellipsis', 'border-radius':'5px'});   
                                                    }
                                                }
                                            }
                                        }
                                    });
                                    $('#inviteInput').data('kendoMultiSelect').trigger('change');
                                }); 
                                /*Can alter initial time interval here*/
                                var startTime = $('#startTimeInput').data('kendoDateTimePicker');
                                $('#endTimeInput').data('kendoDateTimePicker').value(new Date(startTime.value().getTime() + 30*60000));
                                
                                $('#groupCheck').change(function(){
                                  var invites = $('#inviteInput').data('kendoMultiSelect');
                                    
                                    if(this.checked){
                                        invites.enable(true);
                                    } else{
                                        invites.enable(false);
                                    }
                                    
                                });
                                    
                            },
                            resources: resources
                        }).data('kendoScheduler');

My problem is the line: $('#OwnerIdInput').data('kendoMultiSelect').trigger('change');

When I click an already existing event to pop open the edit/create popup menu, If I click 'save', all is fine. I can continuously open and close the edit menu as long as I click 'save.' If, however, I click 'cancel' after opening the edit menu once, if I click it again, I will get the following error

Uncaught TypeError: i.wrap is not a function at kendo.all.js:4554

And it happens at the OwnerIdInput change trigger mentioned above. Triggering change has not issues outside of pressing the 'cancel' button and I am just not sure what is causing this behavior or how to fix it.

I am creating a grid using AngularJS. The data is added correctly, but I can not configure the size of the columns. I'm setting the width in the code, but it does not seem to work.
Code:
<div kendo-grid 
                         k-data-source="frigobarGridOptions" 
                         k-selectable="'row'"
                         k-pageable='{ "pageSize": 5, "pageSizes": true }'
                         k-columns='[
                            { "field": "ItemId", "title": "Id", width: "130px"},
                            { "field": "Descricao", "title": "Descrição", width: "250px"},
                            { "field": "Quantidade", "title": "Quantidade", width: "100px" }
                      ]'>
</div>

Follow the screenshot of the grid.

Currently i'm running into an issue with the visibility of one column in my Kendo Grid while using AngularJS in combination with odata-v4.
When the grid initially loads all data is shown for each column, but after either an add or update action, the column showing the type doesn't display the value anymore, spefically for that record.
We resolve the odata type to a more readable version with a scope variable that contains the possible types

Our Model and options definion for the grid, they both get send to a function that combines and sets required default settings for our data grid:

In our model we have to use "from: "['@odata.type']", to get the data to the Type field out of the odata-v4 attribute. We also have to use the formatting with the square brackets, if we don't use this the code won't work. I've also tried using a template for the values but I couldn't manage to get it to work that way either. With some research i also discovered that the return might be an issue with not giving all data but i also get the fully filled record returned from the server see below

To summarize, the @odata.type value is being shown in the grid column on an initial load, but after the a crud action, the type for the effected row disappears.

I am dynamically hiding a command button on dataBound. When editing I edit that row then switch to another row to edit the hidden button is displayed.

How can I keep this hidden button?

  <script>
                $(document).ready(function () {
                    var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
                        dataSource = new kendo.data.DataSource({
                            transport: {
                                read:  {
                                    url: crudServiceBaseUrl + "/Products",
                                    dataType: "jsonp"
                                },
                                update: {
                                    url: crudServiceBaseUrl + "/Products/Update",
                                    dataType: "jsonp"
                                },
                                destroy: {
                                    url: crudServiceBaseUrl + "/Products/Destroy",
                                    dataType: "jsonp"
                                },
                                create: {
                                    url: crudServiceBaseUrl + "/Products/Create",
                                    dataType: "jsonp"
                                },
                                parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                }
                            },

                            batch: true,
                            pageSize: 20,
                            schema: {
                                model: {
                                    id: "ProductID",
                                    fields: {
                                        ProductID: { editable: false, nullable: true },
                                        ProductName: { validation: { required: true } },
                                        UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                        Discontinued: { type: "boolean" },
                                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                    }
                                }
                            }
                        });
gridCommands =[{
                        name: "edit",
                        text: " ",
                        mode: "inline"},
                                      {
                          name:"destroy",
                          text: " "},
                                   {
                          name: "exportproduct",
                          text:"Export",
                          click: ExportProduct}
                          ];
                    $("#grid").kendoGrid({
                        dataSource: dataSource,
                        pageable: true,
                        height: 550,
                        toolbar: ["create"],
                        columns: [
                            "ProductName",
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
                            { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
                            { field: "Discontinued", width: "120px", editor: customBoolEditor },
                            { command: gridCommands, title: "&nbsp;", width: "250px" }],
                        editable: "inline",
                        dataBound: function (e) {
                            var columns = e.sender.columns,
                                dataItems = e.sender.dataSource.view();

                            for (var i = 0; i < dataItems.length; i++) {
                                var product = dataItems[i].get("ProductName");
                                if (product === "Chang") {
                                    var row = e.sender.tbody.find("[data-uid='" + dataItems[i].uid + "']");
                                    var cell = row.children().eq(4);
                                    var btn = cell.children().eq(2);
                                    btn.hide();
                                }

                            }
                     
                       }
                    });
                });

                function customBoolEditor(container, options) {
                    var guid = kendo.guid();
                    $('<input class="k-checkbox" id="' + guid + '" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
                    $('<label class="k-checkbox-label" for="' + guid + '"></label>').appendTo(container);
                }
              function ExportProduct(container) {
                alert(container.name);
              }
        </script>

I have developed a workflow builder tool using RADDiagram and I am, for the most part, quite happy with the result.  That said, I would like try to add a bit more polish to the finished product by adding "arrows" to the tooltip callout pointing to the selected shape (see attached image).  Is this mod possible?  FWIW, I have tooltips working now but they are simply rounded rectangles.

Thanks.

Hello,

installed couple of a11y extensions to Chrome, tested some of pages using Kendo widgets and got bunch of ARIA errors reported. Not sure what is the actual problem for all of them, but when read through specs, I found that e.g. aria-valuenow attribute should not be present if empty and furthermore should be used mainly for numeric values, see https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow for details.

On the other hand, is it even necessary to have this attribute for form fields such as password, e-mail or plain textbox?

I am finding that the tooltip shown is not what is produced by the tooltip.template.

https://dojo.telerik.com/utAxum

I have added export to pdf button in my graph. On click, Following error occurs:

"TypeError: a[6] is undefined"

Kindly assist