I am trying to bind the keypress event on kendo widgets so that I can fire MVVM change-tracking updates on keypress, instead of blur; the central issue being that I have a Save button linked to a boolean for hasChanges, and this boolean only updates on blur (change) ... I would prefer that it update automatically on keypress, which is not exposed by the kendo widgets.

I have found examples of doing this in Javascript, but we are using typeScript, and the .d.ts file does not contain the data necessary to make this possible. I have found examples of how to deal with this for custom bindings, but not for custom *widget* bindings.

What I want to do is:

... but I want to do that in type script, not javascript. It fails on .binders.widget.keyPress, as .binders is only declared as a namespace.

I am trying to export  my master and detail grid to an excel file without success.

When I am debugging I can see that the function $.when.apply(null, detailExportPromises) isn't called.

The detail grid data is found correctly, but no Excel file is downloaded.

My code:

//Add export to excel option for main grid
    gridElement.data("kendoGrid").setOptions({
        excel: {
            allPages: true,
            fileName: "Pikdonot.xlsx",
            filterable: true
        },
        excelExport: function (e) {
            debugger;
            e.preventDefault();
            var workbook = e.workbook;
            detailExportPromises = [];
            var masterData = e.data;
            for (var rowIndex = 0; rowIndex < masterData.length; rowIndex++) {
                exportChildData(masterData[rowIndex].uid, rowIndex);
            }
            debugger;
            $.when.apply(null, detailExportPromises)
            .then(function () {
                debugger;
                // get the export results
                var detailExports = $.makeArray(arguments);
                // sort by masterRowIndex
                detailExports.sort(function (a, b) {
                    return a.masterRowIndex - b.masterRowIndex;
                });
                // add an empty column
                workbook.sheets[0].columns.unshift({
                    width: 30
                });
                // prepend an empty cell to each row
                for (var i = 0; i < workbook.sheets[0].rows.length; i++) {
                    workbook.sheets[0].rows[i].cells.unshift({});
                }
                // merge the detail export sheet rows with the master sheet rows
                // loop backwards so the masterRowIndex doesn't need to be updated
                for (var i = detailExports.length - 1; i >= 0; i--) {
                    var masterRowIndex = detailExports[i].masterRowIndex + 1; // compensate for the header row
                    var sheet = detailExports[i].sheet;
                    // prepend an empty cell to each row
                    for (var ci = 0; ci < sheet.rows.length; ci++) {
                        if (sheet.rows[ci].cells[0].value) {
                            sheet.rows[ci].cells.unshift({});
                        }
                    }
                    // insert the detail sheet rows after the master row
                    [].splice.apply(workbook.sheets[0].rows, [masterRowIndex + 1, 0].concat(sheet.rows));
                }

                // save the workbook
                kendo.saveAs({
                    dataURI: new kendo.ooxml.Workbook(workbook).toDataURL(),
                    fileName: "PikdonotDetails.xlsx"
                });
            });
        },
        toolbar: ["excel"]
    });

function exportChildData(uid, rowIndex) {
    debugger;
    var deferred = $.Deferred();
    detailExportPromises.push(deferred);
    var rows = [{
        cells: [
          // First cell
          { value: "YaadPeraon" },
          // Second cell
          { value: "TaarichErech" },
          // Third cell
          { value: "AdditionalDetails" },
          // Fourth cell
          { value: "IsNew" }
        ]
    }];
    var grid = $('#depositsResultGrid').find("tr[data-uid='" + uid + "']").next().find(".closedDepositTrackingResultGrid").data("kendoGrid");
    if (grid) {
        var data = grid.dataSource.data();
        var exporter = new kendo.ExcelExporter({
            columns: [{
                field: "YaadPeraon"
            }, {
                field: "TaarichErech"
            }, {
                field: "AdditionalDetails"
            }, {
                field: "IsNew"
            }],
            dataSource: {
                data: data
            }
        });
        exporter.workbook().then(function (book, data) {
            debugger;
            deferred.resolve({
                masterRowIndex: rowIndex,
                sheet: book.sheets[0]
            });
        });
    }
}

I have a spreadsheet widget, which is created on page load. I have a button, which populates the data using the transport layer. Every time the button is pressed I need to destroy the spreadsheet and then recreate it. I am doing the following: (our page uses angularjs in case that relevant)

if (spreadSheet != null) {
$("#seasonalitySpreadsheet").data("kendoSpreadsheet").destroy();
}

// recreate spreadsheet here.

However - the first spreadsheet is not being removed from the DOM.

Am I missing something?

Thanks

Marc

Hi, Is there any event which fires when the user changes the layout of the spreadsheet? eg when they hide columns, unhide columns, change the width of columns, or move column positions, pin columns etc? I only need 1 event, as opposed to 1 per different change?

Thanks!

Marc

Hi,

Currently we are using the kendo grid for showing the data and retrieving the complete dataset and allowing the kendo grid to set pagination on the client side. But the dataset have been steadily growing and wanted to implement a server side paging setup.As a part of refactor process, the kendo grid is assigned a datasource with transport.read implemented as below (req will have additional parameters that will bound to the UI retrieved from $scope)

$scope.gridDataSource = new kendo.data.DataSource({
        transport: {
            read: function (options) {
                var req = {};
                req.pageNumber = '1';
                req.rowCount = '20';
                $http.post('custom/url', req).
                then(function successCallback(response) {
                    console.log('Success Response');

                }, function errorCallback(response) {
                    console.log('Error Response');
                });
            }
        }
    });

But I am not able to get the page number and the rowcount from options and how can I bind the data coming in the success callback

Would really appreciate any pointers

Thank you

YK

Hello,

I have a combobox with 4 items and I would like to allow the user to either select an item from the list, or enter a new item free-form. However, if the user enters free-form input that is matched by the filter and presses Enter, then that matching item is automatically selected rather than the text they entered.

For instance, if my list is ["Fred", "Wilma", "Pebbles", "Dino"], and the user types "fr" then presses Enter, then "Fred" is selected automatically instead of "fr". See this fiddle: http://jsfiddle.net/gVWBf/

I tried "suggest: false" but this does not seem to do what I hoped.

Thanks in advance,

Deane

we are in the process to upgrade an application to version 2016 R3 there  is control Kendo UI Editor and I want to choose which color will appear in the font and background color palettes. Or another alternative is letting the user choose from a custom color picker. Using the  older version of Kendo 2012.  Here is the running Jsbin example using kendo using existing 2012 version

http://jsbin.com/merejeqenu/edit?html,js,output

I want to do achieve same using kendo version 2016 since if use same code kendo version 2016 I get this error

Uncaught TypeError: Cannot read property 'fn' of undefined

Please guide on how i can accomplish same thing using  kendo 2016 version

Hi,

Is it possible to somehow anchor my Html.Kendo().Grid<> so that it will size with the browser if the user sizes the browser window.

Also can you adjust number of results on different devices, like on a mobile ?

Ive had the issue with very small screens getting a double scrollbar, one within the grid and the other to scroll the grid itself.

Regards,

Emil