Hi,

We have used below code to export the data in excel format. When we used below code is this send any data to your server. If yes suggest which code should we used that it will not send any data to your server.
Below is the summary.
1. Added below javascript reference.
    <script src="scripts/shared/kendo.all.min.js"></script>
    <script src="scripts/shared/jszip.min.js"></script>
2. Use below code to create workbook and save the file as excel.
                var sheet = {};
                sheet.columns = columnsForEx;
                var titleForSheet = selectedGrid.gridName + " (" + total + ")";
                sheet.title = titleForSheet;
                sheet.rows = rows;
                Recordsheets.push(sheet);

                //create workbok
                var workbook = new kendo.ooxml.Workbook({

                    sheets: Recordsheets
                });

                //save the excel 
                kendo.saveAs({
                    dataURI: workbook.toDataURL(),                   
                    fileName: "ExportedRecords.xlsx"
                });
When we check the call back URL in the workbook.toDataURL() in console then it gives below URL when we put this url in browser then it download the excel file. So this is why we are asking this question. Is any data go to your server.
data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,UEsDBAoAAAAAAOqDKlAAAAAAAAAAAAAAAAAJAAAAZG9jUHJvcHMvUEsDBAoAAAAIAOqDKlCf0zfRMQEAAGkCAAARAAAAZG9jUHJvcHMvY29yZS54bWylkl1LwzAUhu8F/0PJfZukg01C24HKQHQguKF4F5Kzrdh8kES7/XvTbus23J2XyfucJ+ccUky3qkl+wPna6BLRjKAEtDCy1usSLRez9A4lPnAteWM0lGgHHk2r25tCWCaMg1dnLLhQg0+iSXsmbIk2IViGsRcbUNxnkdAxXBmneIhHt8aWiy++BpwTMsYKApc8cNwJUzsY0UEpxaC0367pBVJgaECBDh7TjOITG8Apf7WgT85IVYedhavoMRzora8HsG3brB31aOyf4o/5y1s/alrrblcCUFVIwYQDHoyrnkFLkyyfCnx22S2w4T7M465XNcj73Rn3NysOg+3rQSaxIbZv/5i8jx4eFzNU5SQnKaEpJQtKGaEsp9lkMv7snr9wnKTq8NC/rEdJ1fd/+TmqX1BLAwQKAAAACADqgypQO3ZceHkBAAAGAwAAEAAAAGRvY1Byb3BzL2FwcC54bWydUstOwzAQvCPxD5FPcKBOC0KocowQD3EAUakFzsbZNBaubXmXqOXrcVI1pMCJ2+zsaDweW1yuVzZrIKLxrmDjUc4ycNqXxi0L9ry4O7lgGZJypbLeQcE2gOxSHh6IWfQBIhnALFk4LFhNFKaco65hpXCU1i5tKh9XitIYl9xXldFw4/XHChzxSZ6fc1gTuBLKk9Absq3jtKH/mpZet/nwZbEJyU+KqxCs0YrSLeWj0dGjryi7XWuwgg+XIhnNQX9EQxuZCz4cxVwrC9fJWFbKIgj+TYh7UG1pM2UiStHQtAFNPmZoPlNtE5a9KYQ2TsEaFY1yxLay7dBhG5CifPXxHWsAQsF7soND7RCbMznuBAnsC3kfJOH9iAtDFvCpmqlIfyQeDxN3Gdgg413S3a6Dj5QdTY5/5dyd+OOMB+Pe8Tks/I0i2HW4T4p5rSKUqfa+454Q9ylMtK3+ulZuCeVO83vRvvjL9lvL8dkoP83z7qF3nODfH1h+AVBLAwQKAAAAAADqgypQAAAAAAAAAAAAAAAABgAAAF9yZWxzL1BLAwQKAAAACADqgypQtVUwI+sAAABMAgAACwAAAF9yZWxzLy5yZWxzrZLNasMwDIDvg72D0b1R2sEYo04vY9DbGNkDaLbyQxLL2G6Xvv28w9gCXelhR8vSp09C2908jerIIfbiNKyLEhQ7I7Z3rYa3+nn1AComcpZGcazhxBF21e3N9pVHSrkodr2PKlNc1NCl5B8Ro+l4oliIZ5d/GgkTpfwMLXoyA7WMm7K8x/CbAdWCqfZWQ9jbO1D1yfM1bGma3vCTmMPELp1pgTwndpbtyodcH1Kfp1E1hZaTBivmJYcjkvdFRgOeN9pcb/T3tDhxIkuJ0Ejgyz5fGZeE1v+5omXGj8084oeE4V1k+HbBxQ1Un1BLAwQKAAAAAADqgypQAAAAAAAAAAAAAAAAAwAAAHhsL1BLAwQKAAAAAADqgypQAAAAAAAAAAAAAAAACQAAAHhsL19yZWxzL1BLAwQKAAAACADqgypQ7eafsdsAAAA5AgAAGgAAAHhsL19yZWxzL3dvcmtib29rLnhtbC5yZWxzrZHPasMwDIfvg72D0X1x0sEYo04vZdDr1j2AsJU4NLGNpf3J289sEFIoY4eehGT0/T6s7e5rGtUHZR5iMNBUNSgKNroh9Abejs93j6BYMDgcYyADMzHs2tub7QuNKGWJ/ZBYFUpgA14kPWnN1tOEXMVEobx0MU8opc29TmhP2JPe1PWDzmsGtGdMdXAG8sE1oI5zov+wY9cNlvbRvk8U5EKE/oz5xJ5IChRzT2JgGbH+KU1VqKD0ZZvNNW1Y5rF856Ly2/+Zf3/VfI+Z3Kvkcuy1xnq82Oizg7ffUEsDBAoAAAAIAOqDKlAud00ASgEAACECAAAPAAAAeGwvd29ya2Jvb2sueG1sjZFNT8MwDIbvSPyHKCc4sH7sg21aOwmxiV0Qh7GdQ+Ou0dIkSlLa/Xvclg64cXJex37i11mtm1KST7BOaJXQaBRSAirTXKhTQt/324c5Jc4zxZnUChJ6AUfX6e3Nqtb2/KH1mSBAuYQW3ptlELisgJK5kTag8CbXtmQepT0Fzlhg3BUAvpRBHIazoGRC0Z6wtP9h6DwXGTzrrCpB+R5iQTKP47tCGEfTVS4kHHpHhBnzykqcu5GUSOb8hgsPPKFTlLqGPwlbmadKSBSLcTimJEivLt8s4ZCzSvo9zjbgcWHxJI5nXWlbdhBQu5+uVpLmKBTXdULjCS73MqgJPlh356PgvkDUPFpccy8gToVP6OOizSE9+IXvVjhEojp/W23JpjHaenIX3+OftXc7tBKhr6XAg93xqEcN/RmTGRprQ1c5mc7i75LBQfoFUEsDBAoAAAAAAOqDKlAAAAAAAAAAAAAAAAAOAAAAeGwvd29ya3NoZWV0cy9QSwMECgAAAAgA6oMqUFO8HowtAgAANQYAABgAAAB4bC93b3Jrc2hlZXRzL3NoZWV0MS54bWytlMuO2yAUhveV+g6I/YT4kpkkSjxqJ406i0pVr2uCj20UAxaQ29sXEyciTtPJohv7HH7z8XM4ePa8FzXagjZcyTmOBkOMQDKVc1nO8c8fy4cxRsZSmdNaSZjjAxj8nL1/N9spvTYVgEWOIM0cV9Y2U0IMq0BQM1ANSKcUSgtqXapLYhoNNPeTRE3i4fCRCMolPhKmgt0DEVSvN80DU6Khlq94ze3Bs04YfQ9FFQVnsFBsI0DaoxcNtSMqaSremBNtH6X02pfgTCujCjtwPjrY9fYmZEIow0iw6Wsplaar2lXQE3E2y7lbui070lDM8YcII5LN/PRfHHYmiBGydPUdamAWcndKGKG2/Cul1q386saGjkjOE8L4BFr67X/VyBuY5ocFGOY27+YO4hFGORR0U9tvavcZeFm58ciNtp6Yqo1/IsGlX17QvX+zjbFK/Oa5rXy+66LJ4ClK4/Ho9HSgFRi75C0VkwAWd7D4NizuwdKbsKSDJbdho7thaQdL/wds1MFGN2H9kl2xyPEY/FkuqKXZTKsd0p5x40iRc9B+0faWGzSuR7bZcEa2La3TPoZadKm9hFp8qS1CLbnUPoVaetaIM3x2Hb/tOg4oo57rUHvsuQ61p57rUBv3XMf4Lz6Tt30mAXPS8xlqUa/0Lxdir/aL5B9OkwunJOiJhpbwheqSS4NqKLzZJ4z08Ub72KrGR+2lVNb14imr3O8LdJu5tQul7Dlp2+/8w8/+AFBLAwQKAAAACADqgypQ6x7Kw9oBAAAkBAAADQAAAHhsL3N0eWxlcy54bWyNk01v2zAMhv+KoHujxGiHJbDdw4AAPWwY0AzYVZYlR6g+DFnO7P36UZI/YuTQnUy9JB9SFJ2/DlqhG3edtKbAh90eI26YraVpCvzrcn76il/LvPOj4u9Xzj2CeNMV+Op9eyKkY1euabezLTfgEdZp6uHoGtK1jtO6C0lakWy//0I0lQYnwkmz/4Fo6j769olZ3VIvK6mkHyMLI81Ob42xjlaKF3g4PFM2s+PhAa8lc7azwu8AR6wQkvHHLo/kSIBU5qbXZ+07xGxvfIH3IJFJK3Nhzeo6QN1Q8fRh7B9zDq4gpigY3l90owoUiCNlzqyyDnnoicdUkAzVPMV8o0pWTkZVUC3VmPQsKvEmU6SWcPeoklQmfkJrUqmltQwnocxhfp47c4YDmuzL2EILxhqOIybGfRLdODoespe7hPiBupV1NezROpRZKnPFhYcEJ5tr+HrbkuD0Ht6hzGtJG2uoCsg5YzIAy7hS72H9fosNexAoxbzV4XFQ6GI2YRCTGZj3hMR7RKWHfcy/o26qDSIZM39Bx0Ib+qKi8MwF/hHWW60IVPVSeWm2wMSB4QzibgXDfXxY+G0ZcNRc0F75y+Is8Gp/57XsdbZE/ZQ366eo1U5RxzS09Y8v/wFQSwMECgAAAAgA6oMqUMZK9TMDAQAA5gEAABQAAAB4bC9zaGFyZWRTdHJpbmdzLnhtbHWRwU7DMAyG70i8Q5R7l7aj0zS1naYCEgfQhOABosa0kRqnxC6ib0+AHVDHjv4///4tu9x/ukF8QCDrsZLZKpUCsPXGYlfJ15f7ZCsFsUajB49QyRlI7uvrq5KIRfQiVbJnHndKUduD07TyI2Akbz44zbEMnaIxgDbUA7AbVJ6mG+W0RSlaPyHH3LUUE9r3CZqTkMu6JFuXXB/anybxpB2UiutSfeu/7DEOEcc+brYkB2MCEIlsJxrL8xIfg3U6zKLxyLrlJb6L2w1nI8Wt5slFTxh90Bwvtmy5yYukKIokzbb5kj2DcR7NUr6U8oAM3f8pRZafUjbrM/tEbP84VPxT/QVQSwMECgAAAAgA6oMqUN4Hq3ZFAQAAJQQAABMAAABbQ29udGVudF9UeXBlc10ueG1srZPdTgIxEIXvTXyHprdkW/DCGMPChT+XSiI+QN3Osg39S6cgvL2zRY0xCBq5atqZc76z2+l4unGWrSGhCb7mIzHkDHwTtPGLmj/P76srzjArr5UNHmq+BeTTyfnZeL6NgIzUHmve5RyvpcSmA6dQhAieKm1ITmXapoWMqlmqBciL4fBSNsFn8LnKvQefjG+hVSub2d2GjndJEljk7GbX2LNqrmK0plGZ6nLt9TdK9U4QpCw92JmIA2rgTO5FlNKPhA/hI/2cZDSwmUr5QTlqkxsrX0NavoSwFIdd9uQMbWsa0KFZOZIIjAmUxg4gOyvKKpwyfnAkAOatBTw1vpgW9AFypxLop5xoRk4e4Kv3kRz9FRQdyrKMTpzl0//gVZB4lkJEGuoEf0/wMbW9uopkBCkbwN8hyfvf3wz9g9Cg98FleeSTN1BLAQIUAAoAAAAAAOqDKlAAAAAAAAAAAAAAAAAJAAAAAAAAAAAAEAAAAAAAAABkb2NQcm9wcy9QSwECFAAKAAAACADqgypQn9M30TEBAABpAgAAEQAAAAAAAAAAAAAAAAAnAAAAZG9jUHJvcHMvY29yZS54bWxQSwECFAAKAAAACADqgypQO3ZceHkBAAAGAwAAEAAAAAAAAAAAAAAAAACHAQAAZG9jUHJvcHMvYXBwLnhtbFBLAQIUAAoAAAAAAOqDKlAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAEAAAAC4DAABfcmVscy9QSwECFAAKAAAACADqgypQtVUwI+sAAABMAgAACwAAAAAAAAAAAAAAAABSAwAAX3JlbHMvLnJlbHNQSwECFAAKAAAAAADqgypQAAAAAAAAAAAAAAAAAwAAAAAAAAAAABAAAABmBAAAeGwvUEsBAhQACgAAAAAA6oMqUAAAAAAAAAAAAAAAAAkAAAAAAAAAAAAQAAAAhwQAAHhsL19yZWxzL1BLAQIUAAoAAAAIAOqDKlDt5p+x2wAAADkCAAAaAAAAAAAAAAAAAAAAAK4EAAB4bC9fcmVscy93b3JrYm9vay54bWwucmVsc1BLAQIUAAoAAAAIAOqDKlAud00ASgEAACECAAAPAAAAAAAAAAAAAAAAAMEFAAB4bC93b3JrYm9vay54bWxQSwECFAAKAAAAAADqgypQAAAAAAAAAAAAAAAADgAAAAAAAAAAABAAAAA4BwAAeGwvd29ya3NoZWV0cy9QSwECFAAKAAAACADqgypQU7wejC0CAAA1BgAAGAAAAAAAAAAAAAAAAABkBwAAeGwvd29ya3NoZWV0cy9zaGVldDEueG1sUEsBAhQACgAAAAgA6oMqUOseysPaAQAAJAQAAA0AAAAAAAAAAAAAAAAAxwkAAHhsL3N0eWxlcy54bWxQSwECFAAKAAAACADqgypQxkr1MwMBAADmAQAAFAAAAAAAAAAAAAAAAADMCwAAeGwvc2hhcmVkU3RyaW5ncy54bWxQSwECFAAKAAAACADqgypQ3gerdkUBAAAlBAAAEwAAAAAAAAAAAAAAAAABDQAAW0NvbnRlbnRfVHlwZXNdLnhtbFBLBQYAAAAADgAOAE4DAAB3DgAAAAA=
Waiting for your reply.
Thanks!
Balasaheb

Is it possible to put cards inside a div and to filter those cards based on the value it contains and well as sort the cards.?

Is there any demo available for that?

Hi, I a have a requirement to only allow users to enter time in 30 segments. Since I have set up my scheduler with 30 minute blocks, when the user adds a slot, it will default to a 30 minute block, however the user may still manually enter in a different time in the textbox. I have set the drop-down from the datetimepicker to only show 30 minute slows, but is it possible to set a mask on the associated textbox? I wasn't able to find an existing solution to this, would a mask be the best choice, and if so, is there an example? Note that simply disabling this text box will not be sufficient. 

See the highlighted sections in the attached screenshot.

I am generating several dropdown lists dynamically in a modal when the user clicks a button. The number of dropdownlists varies depending on the data associated with the button click. I want the user to be able to tab from field to field and have the list automatically open when the user tabs into the field. When the user clicks on the field I want it to toggle open or closed still though. Currently, I added an onFocus event

$('.js-k-item-dropdown').on('focus', function (evt) {
        let elementID = $(evt.target).find('input').attr('id');
        let dropdown = $(`#${elementID}`).data("kendoDropDownList");
        dropdown.open();
    });

This works when the user tabs to the field but when the user clicks on another dropdown list the list opens and closes immediately. How do I prevent this behavior?

Hi,

I have a grid with transport.read.data specified to a javascript function to call. This isn't working as it doesn't ever call the function in javascript. Any help here would be great.

            $("#mailingListGrid").kendoGrid({
                dataSource: {
                    autoBind: false,
                    transport: {
                        read: "@Url.Action("GetCustomersJson", "MailingList")",
                        type: "jsonp",
                        data: additionalData
                    },
                    pageSize: 40,
                    schema: {
                        id: "KeyCustomer",
                        model: {
                            fields: {
                                CustomerName: { field: "CustomerName", type: "string" },
                                CustomerContact: { field: "CustomerContact",type: "string" },
                                ShipAddress1: { field: "ShipAddress1",type: "string" },
                                ShipCity: { field: "ShipCity",type: "string" },
                                ShipState: { field: "ShipState",type: "string" },
                                ShipZipCode: { field: "ShipZipCode",type: "number" },
                                IsShipTo: { field: "IsShipTo",type: "number" },
                                IsBillTo: { field: "IsBillTo",type: "number" },
                                KeySalesOrg: { field: "KeySalesOrg",type: "number" },
                                KeySendBillsTo: { field: "KeySendBillsTo",type: "number" },
                                DoubleUnitsBooked: { field: "DoubleUnitsBooked",type: "number" },
                                SingleUnitsbooked: { field: "SingleUnitsBooked",type: "number" }
                            }
                        }
                    }
                },
                height: 550,
                sortable: true,
                noRecords: {
                    template: "Please Select a Name to continue"
                },
                pageable: true,
                selectable: false,
                columns: [{
                    template: "<div" +
                    "style='');'><input class='checkboxSelector' type=\"checkbox\"/></div>",
                    field: 'field', headerTemplate: "<input id='checkboxHeader' onclick='checkAll()' type='Checkbox'/>",
                    width: 50,
                    sortable: false,
                }, {
                    field: "CustomerName",
                    title: "Customer Name",
                    width: 240
                }, {
                    field: "ShipAddress1",
                    title: "Address"
                }, {
                    field: "ShipCity",
                    title: "City"
                }, {
                    field: "ShipState",
                    title: "State",
                    width: 150
                }, {
                    field: "ShipZipCode",
                    title: "Zip Code"
                }],
                change: function (e, args) {
                    var grid = e.sender;
                    var items = grid.items();
                    items.each(function (idx, row) {
                        var idValue = grid.dataItem(row).get(idField);
                        if (row.className.indexOf("k-state-selected") >= 0) {
                            selectedOrders[idValue] = true;
                        } else if (selectedOrders[idValue]) {
                            delete selectedOrders[idValue];
                        }
                    });
                },
                dataBound: function (e) {
                    var grid = e.sender;
                    var items = grid.items();
                    var itemsToSelect = [];
                    items.each(function (idx, row) {
                        var dataItem = grid.dataItem(row);
                        if (selectedOrders[dataItem[idField]]) {
                            var currentRow = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']");
                            currentRow.toggleClass('k-state-selected');
                            currentRow.find('input:checkbox').prop('checked', 'checked');

                            itemsToSelect.push(row);
                        };
                    });

                    //e.sender.select(itemsToSelect);
                },
            });

        function additionalData() {
            var value = $("#dsmList").data("kendoDropDownList").value();
            return { dsm: value };
        };

Not sure what exactly is going wrong here. Any help is appreciated.

Fails to compile on using the simplest of grid implementations as follows. (But the same works on a react JS implementation)
The attached image has a screen shot of the implementation.
Code is as follows for the react component.

Throws the following error:

./src/components/projects/ProjectsPage.tsx
Cannot find file: 'main.js' does not match the corresponding name on disk: '.\node_modules\@Progress\kendo-react-grid\dist\es\@progress'.

When I dig into the node modules' directory that its claiming to throw the error from,

looks like this
.\node_modules\@Progress\kendo-react-grid\dist\es\main.js

it doesn't apparently contain any directory called @progress inside of the es (.\node_modules\@Progress\kendo-react-grid\dist\es\@progress)

FYI: I also am a licensed developer. 

Is this something to do with the licensing of the kendo UI by any chance?

My package.json is as follows:

Does the css data binding work with kendo buttons? 

<button type="button"
aria-label="Thumbs up"
data-role="button"
data-bind="events: { click: thumbsUp }, css:{k-state-active: isThumbsUp}">
<i class="icon-thumbs-up icon-large"></i>
</button>

I have been struggling to understand a data-bind behavior of a dropdownlist control. I bound the source to an observable array of objects (with Text and Field properties). I want to bind the data-text-field to the Text property of the object and data-value-field to the object itself (not to it's Value property).

I tried several options:

Option1:

<select data-role="dropdownlist" data-bind="source: dropDownData, value: selectedValue" data-text-field="Text" data-value-field="this"></select>

SelectedValue is the whole object as a string "[object Object]". Not what I want.

Option2:

<select data-role="dropdownlist" data-bind="source: dropDownData, value: selectedValue" data-text-field="Text" data-value-field="this"></select>

SelectedValue is Text property of the bound object. Not what I want.

Option3:

https://jsfiddle.net/jakubjenis/z1o3L6hd/17

<select data-role="dropdownlist" data-bind="source: dropDownData, value: selectedValue" data-text-field="Text" data-value-field="Value"></select>

Weirdly enough this works. SelectedValue is the whole bound object (with Text and Value properties), but why? This should bind the Value property of the bound object, not the object itself.

Could you please explain what the correct way to set the data-value-field is so that the value field is bound to the whole object? 

Thanks,
Jakub