Questions on Kendo UI for jQuery Forum

1 answer

76 views

Help making series markers easier to click for tooltip on Devices for Line Chart

My users are saying that on iPad and iPhone where to see a tooltip you are required to click rather than hover it is too difficult to click on the marker.

Markers are by requirement not visible but the users still need to click the correct position on the line to show the Tooltip. It seems that the area to click is very precise and very small. It doesn't seem an issue on Desktop where Hover is available to show tooltip on Category series.

I'm looking for a way to make the clickable are bigger/easier for mobile devices. I found a similar forum question for a bar chart. I have put it into the the below Dojo but am struggling to make it apply to markers on a line chart.

https://dojo.telerik.com/nCgEHXin

Charts

answered on 24 Jan 2025

2 answers

86 views

Kendo Jquery Date picker closes modal (not kendo) when selecting a year

The modal isn't very large, so the calendar popup shows outside the modal.

When selecting a day or month, the date picker is updated and the modal remains open.
When selecting a year, the modal closes.

As though the mouse click gets passed to the page.

Kendo: 2024.1.319

DatePicker

answered on 24 Jan 2025

1 answer

182 views

Spreadsheet Export to Excel not working any more

Using KendoUI latest version, the exportToExcel function in Spreadsheet seems broken.

Using version 2024.4.1112
Dojo to reproduce: https://dojo.telerik.com/BMBegbqh (Dojo was linked in docs at https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet/methods/saveasexcel)

Console shows error:

Spreadsheet

answered on 24 Jan 2025

1 answer

79 views

Kendo resizing incoming response data in a dataSource.

Hi, complicated question regarding the dynamic sizing of JSON data blocks into dataSources inserted into a spreadsheet.

I was getting large dataSources (blocks of data in JSON format) from our responses from API requests, so I bumped up the global row and column sizes for the spreadsheet component:

Problem solved!!! However, I found that this change significantly decreases the performance of imports into the spreadsheet control:

$("#spreadsheet").kendoSpreadsheet({
  rows: 300,
  columns: 20000
});

A little research confirmed this problem with importing an excel spreadsheet into the Kendo spreadsheet component:

Memory Usage:
Initializing with a large dataset consumes a lot of memory. When you import an Excel file, the spreadsheet control needs additional memory to process and render the imported data. This can lead to memory exhaustion and slow performance.

Rendering Overhead:
The spreadsheet control has to render all the rows and columns, even if they are empty. This increases the rendering overhead, making the control less responsive when importing data.

Data Processing:
Importing an Excel file involves:

(1) parsing the file,

(2) converting it to the spreadsheet's internal format

(3) And then rendering it.

With a large number of pre-initialized rows and columns, this process becomes more complex and time-consuming.

Garbage Collection:
The large initial dataset can lead to frequent garbage collection cycles, which can further slowdown the import process. Garbage collection is triggered more often to manage the high memory usage, impacting overall performance. (this is where I noticed frequent garbage collection calls in the browser's Dev Tool Performance page) ...there is probably other stuff hampering the import also as mentioned above.

$("#spreadsheet").kendoSpreadsheet({
 //No explicit settings for rows or columns. Default at 200 rows, and 50 columns.
});

Another workaround found on CoPilot suggested doing this on declaration and initialization of the spreadsheet component:

  // Initialize with a smaller dataset
$("#spreadsheet").kendoSpreadsheet({
  sheets: [{
      name: "Sheet1",
      rows: 100,
      columns: 50
  }]
});

But here is what happens when I do that:

I have better results with this:
SIZE INIT. KENDO SPREADSHEET | Kendo UI Dojo

But there is space below the rows for some reason....that's ok but I know somebody won't like it. :)

So no to the latter approach, and even with an additional resize the grid does not render; the rows and columns do not appear, and the creator and user is stuck with that little blue line.

My workaround was to use the default size of 200 rows and 50 columns.... which significantly improves the loading time of the Excel spreadsheet. This also allows the excel importer topreserve the size of the spreadsheet even if it exceeds the global rows and columns configuration options.

However, when I try to receive an API response message and put it into a kendo dataSource then insert that dataSource into a sheet within the sheet's settings/configurations option:

spreadsheet.fromJSON({
   sheets: [{ name: data.reportName, rows: 19000, column: 65, dataSource: { data: data.MyJsonData, schema: { model: reportModel } } }] //initialize the sheet property with the first report sheet.
            });

The global rows and columns size will override the dataSource size and cut it off at a maximum of 200 rows and 50 columns. hmmm.

(Q) The question is ... how to handle the dynamic sizing of incoming JSON blocks correctly so that the:
(1) Initialized first empty grid renders properly (not a problem if you don't initialize an initial sheet with rows and columns).
(2) The default global values for row and columns are overridden when you insert the sheet coming from the API.

(?)

QUESTION: What is the recommended way of handling this? I have no control or say whether the user can exceed the limit of the default rows and columns configuration options.

Spreadsheet

answered on 23 Jan 2025

1 answer

57 views

How do I access the card colors in an OrgChart template?

I am trying to recreate the stock template for the org chart so I can add a tooltip and I have everything, except I can't figure out how to access the cardColors array to set the border color of the card. I thought something like border-color: #= this.cardColors[item.level]# would work, but item is not defined. What is the proper template entry to access the proper cardColor for the level of the org chart item?

OrgChart

answered on 21 Jan 2025

1 answer

70 views

Why does the filter reorder items?

This might be more of an enhancement request, but I discovered that the filter widget incorrectly orders items if you reload the state. You can see this functionality in the jQuery demo here: https://demos.telerik.com/kendo-ui/filter/persist-state

Steps to reproduce:

Add a second line to the filter
Change "ContactTitle" to "Country" on the first line
Click "Save State" and then "Load State"
See that the items were reordered

As far as I can tell, this happens because changing a filter line removes the item from the FilterModel and then calls Push which adds it to the end of the array.

Filter

answered on 17 Jan 2025

0 answers

49 views

Documentation improvement suggestion

Hi,

I have the suggestion regarding documentation for the widgets/components. It would be great if you could add two information to the documentation/demos:

1. When it was first introduced (which version)
2. When it was last changed.

For example: textbox prefixes and sufixes (from: VERSION NR, updated: VERSION NR). - and you can link it to that release note/breaking changes post that you already have.

I think it is very useful for two reasons:
1. when people (designers or managers etc.) browse the online library and find "cool" feature and ask why we don't have it or they want it implemented, we (developers/architects) could immediately know if its available in the version we have.
2. When we developers read documentation (yes some of us really read it), we immediately know if we can use feature or not. (otherwise I have to open demo dojo and then change version to our current one and see what works and what not - it takes time with multiple widgets and multiple versions used system wide).

Thank you very much.

Regards,

Vedad

General Discussions

asked on 16 Jan 2025

1 answer

73 views

Kendo Spreadsheet performance Issue with formula range

Use Case:

I have n row and m columns.

columns m is sum of 1 to (m-1) columns

row n is sum of 1 to (n-1) row

basically m column and nth row is created with formulas

Issue:

After spreadsheet load when I'm trying to update even one cell it takes ~5-10sec to trigger change event depending on size of data

Sample:

Attaching a fiddler link. Here after spreadsheet is loaded , edit one cell and click out.

https://jsfiddle.net/u2kz7cjb/

Spreadsheet

answered on 16 Jan 2025

0 answers

110 views

Need a way to replace referenced cells with real values with the Spreadsheet control when doing Excel imports

Hi,

Was wondering if there was a way to create an Excel import functionality that can take a workbook with several sheets, where the first sheet is full of references of the later sheets. Is there a way to grab the VALUE at the refered to sheet and cell and replace the cell with just the value at the refered to sheet and position?

1) Click on the import file button in the spreadsheet control.

2) Select the file.

3) In a spreadsheet handler (excelImport?) allow the sheet to load during e.promise.progress (BTW I am using Kendo version 2023.3.10.10).

4) Once the sheet has loaded in the e.promise.done block...begin the process of
a) replacing the references with a cell with no formula for the reference...just the hard coded value in the value property for that cell. I tried grabbing a workbook object from the event handler:

var workbook = new kendo.ooxml.Workbook(e.sender._workbook);

But I am having issues understanding the structure of the new workbook object and am not able to access the cells in the rows as expected.

5) Prevent the default import by calling e.preventDefault();

6) Load the modified workbook via a call to: this.fromJSON(workbook.toJSON());

7) Bind it to the spreadsheet.

the issues I am having is correctly iterating though the structure of the workbook.

The other issue is .... I do not know the format of the incoming Excel sheet coming in or being imported:

Here is a complete copy of my testbed code, which you should be able to plop into the Kendo Dojo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Excel Import Test</title>

  
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2023.3.1010/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css">
</head>
<body>
  <div id="spreadsheet"></div>
  <script>
  $(document).ready(function() {
    $("#spreadsheet").kendoSpreadsheet({
        excel: {
            proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
        },
      excelImport: function (e) {
        console.log("Event: ", e);
        //The excelImport event provides a promise (e.promise) that resolves when the import operation completes.
        e.promise
          .progress(function(e) {
                console.log(kendo.format("{0:P} complete", e.progress));
            })
            .done(function(workbook) {
                var workbook = new kendo.ooxml.Workbook(e.sender._workbook);
                console.log("Workbook data:", workbook);

                var sheet = workbook.options._sheets[0]; // Get the first sheet
                console.log("First sheet:", sheet);

                sheet.rows.forEach(function(row) {
                   row.cells.forEach(function(cell) {
                        if (cell.formula) {
                            var value = resolveReference(workbook, cell.formula);// takes in the workbook searches for the refered to cell 
                                                                                 //   in the outside sheet returns the value from that sheet.
                            cell.value = value;
                            delete cell.formula; // Remove the formula
                        }
                    });
                });

                e.preventDefault(); // Prevent the default import
                this.fromJSON(workbook.toJSON()); // Load the modified workbook
            }.bind(this));
      }
    });

    //This is a work in progress, just a guess.. structure of workbook NOT correct.
    function resolveReference(workbook, formula) {
        // Extract the sheet name and cell reference from the formula
        var match = formula.match(/='([^']+)'!([A-Z]+[0-9]+)/);
        if (match) {
            var sheetName = match[1];
            var cellRef = match[2];
            var sheet = workbook.sheets.find(s => s.name === sheetName);
            if (sheet) {
                var cell = sheet.range(cellRef).value();
                console.log("Cell value: " + cell);
                return cell;
            }
        }
        return null;
    }
  });
  </script>
</body>
</html>