Hi ,

we have a requirement to disable comment option on click of few cells (which are disabled) or to show a toastr message on click of comment that user can't add comment on specific cell. Do you have any such feature or event to track this requirement ?

Below code shows how I format the date of a column.

{
    field: "DatumAanvraag",
    title: "Datum aanvraag",
    template: "#= DatumAanvraag ? kendo.toString(kendo.parseDate(DatumAanvraag, 'yyyy-MM-dd'), 'dd-MM-yyyy') : '' #"
},

The model is like this:

DatumAannvraag: { type: "date" },

This works for dates but when I add HH:mm a null is returned.

Any ideas how to optimize this code?

I would like to be able to populate some Html on a page after I click a row in a Kendo Grid.  I am able to get data from the clicked row but not sure how populate the Html once I get it.  I have a demo app that illustrates my problem at https://dojo.telerik.com/@rswetnam/iNATUDOz

As well as that, I was hoping to get assistance in:

1. Making an additional call on the change event to get other data associated with the original record select - e.g. customer purchases  
2. Finding documentation associated with https://demos.telerik.com/kendo-ui/service/Northwind.svc/  e.g. how to make calls to order-details etc.

Thank you.

Roger 

I have a Autocomplete kendo control. I am selecting some values by doing a filtering after selecting 5 items as shown in the attached image. I am able to retrieve value after individual selection. But I want to get dataValueField for the all the selected items of Autocomplete control in change event. Please find the below code. Kindly suggest in this

$("#Products").kendoAutoComplete({
                        dataSource: result,
                        dataTextField: "TagName",
                        dataValueField:"TagID",
                        filter: "startswith",
                        placeholder: "Select Product...",
                        separator: ", ",
                        select: function (e) {
                            if (e.dataItem) {
                                var dataItem = e.dataItem;
                                alert(dataItem.TagID);//Returns dataValueField value for individual selected item
                                alert(dataItem.TagName);//Returns dataTextField value for individual selected item
                            }
                            if (e.item)
                            {
                                //var dataItem = e.dataItem;
                                var item = e.item;
                                var text = item.text();  //Returns dataTextField value for individual selected item                              
                            }
                        },
                        change: function (e) {
                            alert($("#Products").data("kendoAutoComplete").value());//Returns dataTextField value for multiple selected items
                            var s=$("#Products").data("kendoAutoComplete").value(); //Returns dataTextField value for multiple selected items
                           //Need to get dataValueField for multiple selected items
                        }
                    });

On my page i have 2 tabs . First tab contains item with details . On page load details open perfectly . on First tab click , i get the data again .Now details does not open . But on second click on First tab , we get the data again and now i am able to expand the details data again . On each alternate click on the First tab , i am able to get expand details data again

Note : Details expands in debugger mode but only once

 function LoadCustomGrid(CurrentDivID) {
                
            ds = new kendo.data.DataSource({
                type: "odata",
                transport: {
                    read: {
                        url: "../Handler/OrderHandler.ashx?Action=GetETAMissedOrders",
                        type: "POST",                        
                        data: { 'MerchantId': '<%=gMerchantID%>'},
                        complete: function (jqXHR, textStatus) {
                            kendo.ui.progress($("[Id$=" + CurrentDivID + "]"), false);
                            if (textStatus == 'parsererror') {
                                ShowMessage('E', jqXHR.responseText);
                            }
                        }
                    },
                    parameterMap: function (options, operation) {
                        if (operation !== "read" && options.models) {
                            return {
                                models: kendo.stringify(options.models)
                            };
                        }
                        else {
                            return JSON.stringify(options);
                        }
                    }
                },
                schema: {
                    model: {
                        fields: {
                            Age: { type: "string", editable: false },
                            OrderDate: { type: "date", editable: false },
                            OrderID: { type: "string" },
                            ETA: { type: "date", editable: false },
                            PaymentType: { type: "string", editable: false },
                            DeliveryMode: { type: "string" },
                            OrderRefUrl: { type: "string" }
                        }
                    }

                },
                error: function (e) {
                    ShowMessage("E", "Request cannot be served at this time.")
                },
                page: 1,
                pageSize: 20,
                serverPaging: false,
                serverFiltering: false,
                serverSorting: false
            });
            var CustomizedColumns = [];
            if (CurrentDivID == 'divETAMissedGrid') {
                CustomizedColumns = [
                    {
                        field: "Box", title: "<input id='checkAll', type='checkbox', onclick='checkall()' />", width: "5%", filterable: false,
                        template: "<input type=\"checkbox\" id='chk_\#=OrderID#\'  onclick=''/>", menu: false, headerAttributes: { style: "background: none;" }
                    },
                        
                        {
                            field: "OrderID",
                            title: "Order Id",
                            width: "8%",
                            template: '<a target=_blank id=ref_\#=OrderID#\  href=\#=OrderRefUrl#\> \#=OrderID#\ </br> </a> ',
                            filterable: {
                                extra: false, operators: { // redefine the string operators
                                    string: {
                                        eq: "Is Equal To"
                                    }
                                }
                            }
                        },
                         {
                             field: "OrderDate",
                             title: "Order Time",
                             width: "10%",
                             template: "#if(kendo.toString(OrderDate,'dd-MMM-yyyy') =='01-Jan-0001'){#  #}else{# #= kendo.toString(kendo.parseDate(OrderDate), 'd-MMM-yyyy h:mm:ss tt')# #}#",
                             filterable: {
                                 extra: true, operators: { // redefine the string operators
                                     date: {
                                         lte: "Is Befor or Equal To",
                                         gte: "Is After or Equal to"
                                     }
                                 }
                             }
                    },
                         {
                            field: "Age",
                            title: "Order Age",
                            filterable: false,
                            width: "6%"
                        },
                         {
                             field: "ETA",
                             title: "ETA Time",
                             width: "10%",
                             template: "#if(kendo.toString(ETA,'dd-MMM-yyyy') =='01-Jan-0001'){#  #}else{# #= kendo.toString(kendo.parseDate(ETA), 'd-MMM-yyyy h:mm:ss tt')# #}#",
                             filterable: {
                                 extra: true, operators: { // redefine the string operators
                                     date: {
                                         lte: "Is Befor or Equal To",
                                         gte: "Is After or Equal to"
                                     }
                                 }
                             }
                    },
                         {
                            field: "PaymentType",
                            title: "Payment Type",
                            filterable: false,
                            width: "8%"
                    },
                         {
                            field: "DeliveryMode",
                            title: "Delivery Mode",
                            filterable: false,
                            width: "8%"
                        },
              {
                  field: "", title: "Action", width: "8%",
                  template: "<input type=\"button\" class='button_small greyishBtn' value='Update' id='\#=OrderID#\' onclick='UpdateOrderETA(this)'/>", menu: false, headerAttributes: { style: "background: none;" }
              }
                ];

            }
            var datagrid = $("[Id$=" + CurrentDivID + "]").kendoGrid({
                dataSource: ds,
                sortable: false,
                navigatable: true,
                filterable: true,
                columns: eval(CustomizedColumns),
                sorting: false,
                pageable: {
                    pageSizes: [20, 40, 60,80, 100]
                },
                dataBound: function () {
                    $(".tipsyrev").tipsy({ gravity: 's', fade: true, html: 'true' });
                    var grid = $("[Id$=" + CurrentDivID + "]").data("kendoGrid");
                    var count = grid.dataSource.total();
                    if (count == 0) {
                        $(".k-grid table").addClass("activity_datatable");
                    } else {

                        $("[Id$=" + CurrentDivID + "]").show(500);
                        $(".k-grid table").addClass("activity_datatable");
                    }
                     $("tr.k-alt").removeClass("k-alt");
                },
                detailInit: detailInit
            });
            return false;
        }

        function detailInit(e) {
        var schemaJson = [];
            var columnJson = new Array();
            var dsdetail = eval(e.data.ETAmissedItems);
            e.detailCell.html("");

            columnJson.push({ field: "RetransactionId", title: "RetransactionId" , hidden: true });
            columnJson.push({ field: "RedetailsId", title: "RedetailsId" , hidden: true });
            columnJson.push({ field: "Sku", title: "Sku" });
            columnJson.push({ field: "VariantSku", title: "Variant Sku" });
            columnJson.push({ field: "Qty", title: "Quantity" , width: "7%" });
            columnJson.push({ field: "Price", title: "Price" });
            columnJson.push({ field: "ItemETA", title: "ETA Time" ,template: "#if(kendo.toString(ItemETA,'dd-MMM-yyyy') =='01-Jan-0001'){#  #}else{# #= kendo.toString(kendo.parseDate(ItemETA), 'd-MMM-yyyy h:mm:ss tt')# #}#" });
            columnJson.push({
                field: "", title: "Action", width: "10%",
                template: "<input type=\"button\" class='button_small greyishBtn' value='Update'  onclick='UpdateOrderItemETA(\#=RetransactionId#\ , \#=RedetailsId#\ ,  \"#=Sku#\" ,  \"#=VariantSku#\")'/>", menu: false, headerAttributes: { style: "background: none;" }
            });

        $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource: { data: dsdetail },
            scrollable: true,
            sortable: true,
            resizable: true,
            columns: columnJson,
            selectable: false,
            sorting: false,
            reorderable: true,
            filterable: {
                extra: false
            },
        });
        }

I have a project that is using version 2019.1.220 and I have found some issues with them. However when I try to reproduce them on the dojo they are not reproducible.

For example for the TreeView the loading text is not fully displayed. I investigate a little a saw that my release version generates "<div class="k-icon...">Loading...<div>" while the dojo with the same version generates "<div class="k-icon..."></div>Loading...". Why does the dojo uses a different version then the released one?

I was wondering whether the resources are intended only for people/time based resources or if it is ok to use for material/quantity type resources eg. cement, wire etc.

It looks like I can customize the unit number format to show kg, metres

How can I remove the overlay on the pie chart. If you look at the demos you can see that the colors are the same as the ones defined, but when you try to edit it in a dojo the colors are not the ones defined. they have an overlay on top of them that contains a defined color of "url(https://runner.telerik.io/result#kdef1)".

Why does the dojo look different that the demo? How can the top overlay be removed?

When using a custom optionLabelTemplate and valueTemplate with Font Awesome dual tone icons it seems we need to set the display css class to inline-flex to keep the icon from separating (Kendo UI v2020.3.1021 in Chrome v88.0.4324.104).

I am trying to export data from my grid to Excel. 

For my button I am using the following code, as I don't have the buttons in a toolbar.

<span>
<button id="btnExport">Export to Excel</button>
<script> $("#btnExport").kendoButton({
click: function() { 
$("#grid").data("kendoGrid").saveAsExcel() 
} 
})</script>
</span>

and on the grid I have the following (truncated)

// Grid
grid = $("#grid").kendoGrid( {
      excel:{
          fileName: "PC Inventory All.xlsx",
          filterable:true,
          allPages:false
        },

The error message that I receive is "uncaught Error: JSZip not found."

I have included this file, or at least I thought that I have. I am running Xpages (JSP in essence) and my theme includes the following resources:

 <resource>
 <content-type>application/x-javascript</content-type>
<href>/.ibmxspres/domino/KendoUI/js/jquery.min.js</href>
</resource>

 <resource>
 <content-type>application/x-javascript</content-type>
<href>/.ibmxspres/domino/KendoUI/js/jszip.min.js</href>
</resource>

<resource>
 <content-type>application/x-javascript</content-type>
 <href>/.ibmxspres/domino/KendoUI/js/kendo.all.min.js</href>
</resource>

 <resource>
 <content-type>text/css</content-type>
<href>/.ibmxspres/domino/KendoUI/styles/kendo.common.min.css</href>
</resource>

 <resource>
 <content-type>text/css</content-type>
 <href>/.ibmxspres/domino/KendoUI/styles/kendo.blueopal.min.css</href>
</resource>

I see all of these resources in the Sources tab of Chrome Dev tools, but I also see several multiple defines - one of which seems to be doing something with a dojo library. 

I am at a loss, any help would be much appreciated.