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".

i have controller using java as @RequestMapping("/charts") and it return in Json format but my question this data is not reflected in my Grid why. 

 $("#grid").kendoGrid({
                        dataSource: {
                           
                    transport: {
                         read: {
                             url: function(options) 
                             {   return "${pageContext.request.contextPath}/charts";
                                         },
                            
                            dataType: "json",
                            type: "GET"
                        }
                        },
                            
                            schema:{
                                model: {
                                    fields: {
                                        id: { type: "number" },
                                        fullName : { type: "string" },
                                        address: { type: "string" },
                                        email : { type: "string" },
                                        password: { type: "string" },
                                        designation: { type: "string" },
                                        salary: { type: "number" }
                                    }
                                }
                            },

                            aggregate: [ { field: "fullName", aggregate: "count" },
                                
                                          { field: "salary", aggregate: "sum" }
                                          ]
                             
                       ,pageSize: 8 },
                        sortable: true,
                        scrollable: false,
                       pageSize: 5,
                       pageSizes: true,
                        hieght:20,
                         pageable: {
                
           pageSizes: [4, 6,10,"all"],
           buttonCount: 5
                },
     columns: [
                   { field: "id", title: "ID", width: 180  },
                   { field: "fullName", title: "Name",width:300,
                    template: "<div style=color:red>#=fullName#</div>" ,footerTemplate: "Total Count: #=count#"  },
                     { field: "address", title: "Address",width:300 },
                      { field: "email", title: "Email",width:200},
                      { field: "password", title: "Password" ,width:200},
                            { field: "designation", title: "Designation" ,width:300},
                            { field: "salary", title: "Salary" ,width:200,footerTemplate: "Total Sum: #=sum#"},
                            { width:200,
                              template: "<a class='k-button' href='/Home/Index'>Redirect</a>"   }
                            
                        ]
                    });

I'm using the JQuery version inside Angular, because there is no Rating component for Angular.
When I change the precision to 'half', the star that is half only appears when I hover the mouse over it.

When start

After mouse over

Part of my code:

Does anyone have an idea how to resolve this?

Hi

I've implemented a bar chart to show the amount a customer has bought in USD but on the Y axis the 0 is showing with three decimals.

Understandable since I've added "n3" to the format property but how to remove the trailling zeros from it?

$("#chart_year").kendoChart({
     title: {
            text: '"Year To Date Purchases'
        },
        seriesDefaults: {
            type: "column",
        },
series: [
       {
          //Dummy Data before getting real data
          data: [122.142, 222.672],
          color: "rgb(0,125,195)",
          name: "Total",
       },
    ],
legend: {
    labels: {
       font: "Jost",  
    }
},
           valueAxis: {
   labels: {
       culture: "en-US",
       format: "${0:n3}",
       font: "Jost"
   },
   axisCrossingValue: 0
  },
   categoryAxis: {
      categories: previousYearsArray.reverse(),
       labels: {
            padding: {top: 5},
            font: "Jost"
        },
        majorGridLines: {
       visible: true  
    }
            },
    tooltip: {
        visible: true,
        format: "{0}",
        template: "#= series.name #: $#= value #"
}
   });

Hi....

Issue is the  icons don't change when clicking the expand/ contract button in the kendo-grid:

In the context of a hierarchical kendo grid,  it used to, in prior versions (2020.1.1118) swapped icons:

•  from + to - if the user desired to expand and show the child rows in a hierarchical table:

 from - to + if the user wanted collapse the child rows and show only the parent rows.

Now as of  version 2023.3.1010:

,,,something is interfering with my code, guessing that some  CSS references have changed.

Here is a DOJO link:

Untitled | Kendo UI Dojo (telerik.com)

If the link doesn't work (I am new to Kendo as of July and I still haven't gotten the hang of saving stuff on the DOJO) , I have attached a text file (with HTML) that the exact code to test in the DOJO.  You might need to stretch the right side that shows the active code to see the button in the header.

Also, the version prior to 2023.3.1010 showed an evil twin :) ... a little plus sign in addition to the default + plus icon... so you might want to go back a version to look at that too.

Can you give me some ideas on how to fix the issue of the icons NOT swapping on the 2023.3.1010 version when it was working fine previously?

Regards,

George