I have tried to put "All" in the PageSize = 'All' which didn't work, then i haven't provide any default value for the PageSize then Grid started showing all the records at pageload. But at the bottowm righ of the Grid it is showing as "NaN - NaN of 115 items".
What my client want is by default All option should be selected on the Grid pager dropdown and that should show all the records in the Grid with correct paging. Can someone please help me by providing solution for this problem please?

Data I am getting form the database to bind the Grid.
Thanks in advance.

My Code:

BindMyGrid: function (gridData) {
 $("#MyGrid").empty();
        if (gridData !== undefined && gridData !== null && gridData.length > 0) {
            $("#MyGrid").kendoGrid({
                dataSource: {
                    data: gridData
                   // pageSize: 'All'
                },
                sortable: {
                    mode: "multiple",
                    allowUnsort: true
                },
                selectable: 'multiple',
                scrollable: false,
                pageable: {
                    input: false,
                    numeric: true,
                    previousNext: true,
                    butonCount: 5,
                    pageSizes: [10, 20, 30, 40, ALL]
                },
                dataBound: function (e) {
                    var grid = e.sender;
                    grid.select(grid.tbody.find(">tr:first"));
                },
                detailInit: WorkPartyAllocationsData.detailInit,
                columns: [
                        { field: "ProductName", title: "Product Name", width: "400px" },
                        { field: "TotalItems", title: "Total Items", width: "175px" }
                ]
            });
        }
},

Inside the filter of the grid I need to change the order of the items "And" & "Or" inside the list to show "Or" by default.

I tried declaring the grid with jquery but I can only change the text of the item: 

$("#testgrid").kendoGrid({

            columns: [
                {field: "name"},
                {field: "age"}],
            dataSource:[
            {name: "John", age:"30"},{name: "Mike", age:"32"}],
            filterable:{
                messages:{
                    or: "filterOr",

                    and: "And"

                }
            }
        })

Is it possible to change the order of the items?

Thanks

We have a header/detail accounting application with a data-entry form and an editable grid. When tabbing off of the form to the grid the first cell will not go into edit mode except with some workaround 'hack' code in the 'navigate' event (see below). The problem is the grid edit mode literally works differently when tabbing to the first cell of the grid from a form input field vs. clicking in the same cell. Clicking (rather than tabbing) into the first cell does put the cell into edit mode, but
clears the field contents. Here's the code

let grid = $("#" + target).kendoGrid({

dataSource: {
data: rows,
schema: {
model: {
fields: columnSetup.modelFields
}
}
},
edit: function (e) {
// This does not fire when tabbing to the grid. It will fire if a cell is clicked.
},
editable: {
mode: "incell",
createAt: 'bottom'
},
navigatable: true,
navigate: function (e) {
   // Attempted Workaround (hack) - This does put the first cell in edit mode, but only when tabbing
   // to the grid. However, clicking in the first cell does put the cell in edit mode, but clears the field value.
   if (e.sender['_rowVirtualIndex'] == 0 && e.element[0]['cellIndex'] == 0 && typeof (e.sender['_editContainer']) != 'object') {
      this.editCell(e.element[0])
   }
},
resizable: true,
reorderable: true,
scrollable: { virtual: true },
selectable: "row",
columns: columnSetup.columns,
dataBound: keyboardEventHandler,
}).data('kendoGrid');

After spreadsheet initialization, the controls renders as a blank control (no rows, no columns), the tabs rendering is also impacted. If I click the add sheet (+) and go back to the first sheet, the rendering issue seems to resolve itself. There don't seem to be any errors during the initialization process

var configureBalanceSheetSpreadSheet = function (batchId) {
                $.getJSON("../../../Data/FinancialsJson/Templates/BalanceSheetTemplate.json")
                .done(function (json) {
                    $("#balanceSheetSpreadSheet").kendoSpreadsheet({
                        sheetsbar:false
                    });
                    var spreadsheet = $("#balanceSheetSpreadSheet").getKendoSpreadsheet();
                    spreadsheet.fromJSON(json);
                })
                .fail(function (jqxhr, textStatus, error) {
                    console.log("Request Failed: " + error);
                });
            }

Hi,

We've found that on some of our elements (such as DropDownList and AutoComplete) the background and font colours clash when focus is put on the element. The attached screenshots show that after picking an option, the box is left unreadable until the user moves focus away from it.

We've not been able to work out which CSS styles we should be overriding to alter the styling here. Does anyone have any hints?

Im having an issue where I am trying to create a calculated property on a child object in the observable view model where its value is dependant on a property on the parent and the calculated value is not updating when the parent gets updated.

Please help, Im quite confused

Here is the code and a fiddle of it

https://jsfiddle.net/80mo1ch7/

Is it possibile to disable only the "Add" or "+" on sheetsbar?