I'm testing out Kendo grid for .net core razor.

@(Html.Kendo().Grid<Models.Address>(Model.addresses)

For some reason the paging information below always has style display:none when inspecting the source. Is there a setting to make it visible?

<span class="k-pager-info k-label" style="display: none;">Records from 41 to 60 of 200</span>

I am seeing an issue with my kendo treelist control in version (2023.2.718) which is reproducible in kendo dojo (https://dojo.telerik.com/iDogeqoh). Essentially, I set my treelist to be reorderable and filterable using row filters. When I do this, I cannot type into the filter and holding and dragging the filter box seems to treat it like a header instead. In fact, when you click and drag that box, the screen freezes and you can't do anything with the page... I found that the selector being passed to the reorderable filter was '.k-grid-header th.k-header' which was being filled by the filter row. If you change this value to '.k-grid-header tr:not(.k-filter-row) th.k-header', the issue goes away.

So I have data in this format 

{

name: health

data:[[1,2],[2,2],[3,4]]

type:"area"

visible:true

},

{

name: health2

data:[[1,2],[2,2],[3,4]]

type:"line"

visible:true

}
I have attached a screenshot of what i want to achieve need guidance to do this I'm new to kendo .

I am writing a function that takes a basic HTML table on the page, clones it, converts it to a kendo grid, so I can use the grid's export to Excel feature on any <table> markup regardless if it's a kendo grid or not.

I have it working, but one column is excessively wide in the export, I tried manually setting the column width to be smaller, but it won't get smaller. I have tried manually setting the column width to something huge to test, and that does work. So not sure why the smaller part isn't. 

This same column also has <br> tags that I had to convert to \n and then manually adjust the cell height which works fine.

Here is the my function being bound to the excelExport event:

kendoGridObject.bind("excelExport", function (e) {
            var sheet = e.workbook.sheets[0];
            var columns = e.workbook.sheets[0].columns;
            var defaultColumnWidth = 64;
            var columnMaxCharCounts = [];
            console.log("exporting to excel");
            for (var rowIndex = 0; rowIndex < sheet.rows.length; rowIndex++) {
                var row = sheet.rows[rowIndex];
                var heightMultiplier = 1;

                for (var cellIndex = 0; cellIndex < row.cells.length; cellIndex++) {
                    var cell = row.cells[cellIndex];
                    
                    var cellMaxCharLength;

                    if (cell.value && cell.value.toString().indexOf("<br>") >= 0) {

                        var stringsSplitByLineBreaks = cell.value.split("<br>");
                        //add to the height multiplier for each instance of line breaks found in the cell
                        heightMultiplier += cell.value.trim().indexOf("<br>") !== -1 ? stringsSplitByLineBreaks.length - 1 : 0;
                        cell.value = cell.value.trim().replaceAll("<br>", "\n");
                        cell.value = cell.value.trim();
                        cell.wrap = true;

                        //get the longest character count from all the strings for determining how wide the column should be
                        cellMaxCharLength = stringsSplitByLineBreaks.reduce(function (a, b) {
                            return a.length > b.length ? a.length : b.length;
                        }
                        );
                    } else {
                        cellMaxCharLength = cell.value.length;
                    }

                    var currentMaxCharCount = columnMaxCharCounts.find(function (x) { return x.ColumnIndex == cellIndex });
                    if (currentMaxCharCount == null || currentMaxCharCount == undefined) {
                        columnMaxCharCounts.push({ ColumnIndex: cellIndex, CharCount: cellMaxCharLength });
                    } else {
                        currentMaxCharCount.CharCount = cellMaxCharLength > currentMaxCharCount.CharCount ?
                            cellMaxCharLength : currentMaxCharCount.CharCount;
                    }
                }

                if (heightMultiplier != 1) {
                    row.height = heightMultiplier * 20; //the default excel row height
                }
            }

            //go over every column and set the new widths based on the max character count
            for (var i = 0; i < columns.length; i++) {
                var column = columns[i];
                var maxCharLength = columnMaxCharCounts.find(function (x) { return x.ColumnIndex == i });
                column.width = maxCharLength.CharCount + 10;
                console.log("Post-Change: Column width for column " + i + ": " + column.width);
            }
        });

Yet went i open the export the third column (index 2) looks like this:

I thought there might have been some extra white space or something, but i made sure to trim everything and my console outputs the following column widths when I export:

Post-Change: Column width for column 0: 49
Post-Change: Column width for column 1: 19
Post-Change: Column width for column 2: 51
Post-Change: Column width for column 3: 23
Post-Change: Column width for column 4: 24
Post-Change: Column width for column 5: 19

So the widths are being set, and that should show the 3rd column is roughly equal in with to the first, yet it's about 3-4x as wide in the excel file.

This is but one example, when using this across several different tables it can happen to 1 or mulitple columns. I thought it had to do with the fact that I am converting <br> to \n and that messed with the column widths, but I've seen it even happen on columns with no <br> tag.

What's going on and how do I make that third column smaller?

I have the following kendo grid configuration,

backend service response scheme is correct, but doesnt work the virtual filter. I can't do virtual scrolling

var gridDefinition = {
    model: {
        id: "Id",
        fields: {
            Id: { type: "string" },
            Customer: { type: "string", editable: false },
            //other fields...              
        }
    },
    columns:[
        {
            field: "Customer",
            title: JsonModel.Resources.SAPCustomer,
            filterable: {
                multi: true,
                search: true,
                itemTemplate: function (e) {
                    var customers = $scope.customers || []; 
                    var itemsHtml = "";

                    for (var i = 0; i < customers.length; i++) {
                        var customer = customers[i];
                        itemsHtml += "<li class='k-item'><label class='k-label'><input type='checkbox' name='" + e.field + "' value='" + customer.Id + "'/><span>" + (customer.Description || customer.all) + "</span></label></li>";                                
                    }
                    return itemsHtml;
                }, 
                height: 220,
                virtual: {
                    itemHeight: 26,
                },
                dataSource: {
                    transport: {
                        read: {
                            url: JsonModel.Urls.ListIndexFilterUnique2,
                            type: "POST",
                            dataType: "json",
                            data: function () {
                                return {
                                    ColumnFilter: 'Customer'
                                };
                            }
                        }
                    },
                    requestEnd: function (e) {
                        if (e.type == "read" && e.response) {
                            if ($scope.customers) {
                                $scope.customers = $scope.customers.concat(e.response.customer);
                            } else {
                                $scope.customers = e.response.customer;
                            }
                        }

                    },
                    schema: {
                        data: "model",
                        total: "Total",
                        model: {
                            data: {
                                Id: { type: "string" },
                                Description: { type: "string" }
                            }
                        }
                    },
                    pageSize: 10,
                    serverPaging: true,
                    serverFiltering: true
                },
            },
            headerAttributes: { "class": "kendoui-column-header" }
        },//other columns

I can't seem to set the operator to be used to be contains.   And when I view your example at https://dojo.telerik.com/?_gl=1*u10xbr*_gcl_au*MTU1Njg2MDQ5Ni4xNjk3NjM0MzYz*_ga*Mjg2NDkyMzIyLjE2OTc2MzQzNjQ.*_ga_9JSNBCSF54*MTY5NzgxMzA3OS4zLjEuMTY5NzgyMzA0OS41LjAuMA.. it doesn't appear to be working either.

This is my exact use case.  I want the filterable mode to be set to row and on the cell I do not wish to show operators, but i wish to use the contains operator.

Any help would be appreciated.

Hi All,

My code creates a kendo grid.

When the filterable option is set to true, I see the built-in filter icon on the grid column header and that works fine.

If I set both the filterable:true and columnMenu:true, the filter icon disappears and I see only an icon for the column menu.

I found in the Kendo documentation the below.

When the columnMenu configuration is set to true, the Grid fires the columnMenuInit and columnMenuOpen events instead of filterMenuInit and filterMenuOpen.

Is there a way to have both the filter menu and column menu visible as shown below? Or at least some way when the user clicks on the filter icon to open the filter window? I want the user to be able to filter with one click, instead of clicking on the column menu and then clicking "Filter" to launch the filter screen.

Thank you in advance for any help!

Ran into a bug with the latest version, traced it back to the first release of the year, 2023.1.117.

This dojo works, using 2022.3.1109.

This dojo does not work, using 2023.1.117 or later.

The not working example displays "undefined" whereas the working one displays "$100".