I am using the Selection Checkbox feature of a Grid.  For reference, built from this demo: https://demos.telerik.com/kendo-ui/grid/checkbox-selection

So I have a grid like the following:

$("#rgrid").kendoGrid({
        dataSource: GridRepoDataSource(),
        sortable: true,
        persistSelection: true,
        change: onChange,
        columns: [
            {
                selectable: true,
                width: "50px"
            },
            {
                field: "name",
                title: "Name"
            },
            {
                field: "description",
                title: "Description"
            }
        ]
    });

What I'm trying to do is after the grid has been loaded I have a button outside of the grid.  When I click on the button, I want to select the check-box in the row based on the name.  And hoping that when I do click on that button, hoping that the OnChange event still fires.

Thanks,

Richard

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