Unplanned
Last Updated: 12 Apr 2024 06:48 by ADMIN
Steven
Created on: 05 Apr 2024 07:52
Category: Spreadsheet
Type: Bug Report
0
Spreadsheet throws an error when a text color or background is changed and the tool is hidden

Bug report

When the background tool is displayed in the overflow menu of the toolbar and the user tries to change the background color or text color an error: e[this._property] is not a function is thrown.

Reproduction of the problem

  1. Open the Dojo - https://dojo.telerik.com/@NeliK/IHaRIvoy
  2. Select a cell and try to change its background color or text color

Current behavior

An error e[this._property] is not a function is thrown and the background color is not changed.

Expected/desired behavior

There should be no error in the console and the color should be changed accordingly.

The issue is a regression starting with 2023.1.117 version

Environment

  • Kendo UI version: 2024.1.319
  • jQuery version: x.y
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
1 comment
ADMIN
Neli
Posted on: 12 Apr 2024 06:48

Hello,

I am pasting below a possible workaround to the issue:

 kendo.spreadsheet.ToolBar.fn._click = function(e){
            var target = e.target,
                property = target.data("property") == undefined ? $(target).find('.k-menu-link-text').text().toLowerCase() : target.data("property"),
                value = e.value || target.data("value") || e.target.val(),
                commandType = target.data("command"),
                dialog = target.data("dialog"),
                options = target.data("options") || {};

            if (value === "popup") {
              // Special case to open custom format dialog from option of the format DDL
              dialog = target.data("popup");
            }

            options.property = property || null;
            options.value = value || null;

            if (dialog) {
              this.dialog({
                name: dialog,
                options: options
              });
              return;
            }

            if (!commandType) {
              return;
            }

            var args = {
              command: commandType,
              options: options
            };

            if (typeof args.options.value === "boolean") {
              args.options.value = e.checked ? true : null;
            }

            this.action(args);
          }

A dojo example demonstrating the approach - https://dojo.telerik.com/@NeliK/IHaRIvoy

Regards,
Neli
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources