Questions on Kendo UI for jQuery Forum

0 answers

24 views

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

49 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

51 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>

Spreadsheet

asked on 15 Jan 2025

3 answers

76 views

Custom build of Telerik Kendo Themes

Hello,

tried to ask for help in Stack Overflow, but can't get any help.

https://stackoverflow.com/questions/79315903/custom-build-of-telerik-kendo-themes

General Discussions

answered on 15 Jan 2025

1 answer

24 views

Issue with Image Export in jQuery Chart API Advanced Export

I am experiencing an issue with the image export functionality in the jQuery Chart API Advanced Export. When attempting to export charts as images (PNG, JPEG), the export does not complete successfully. I have also confirmed that this issue occurs in the official demo, indicating that it is not a local configuration problem.

Steps to Reproduce:

Access the official jQuery Chart API Advanced Export demo.
Attempt to export a chart as an image (PNG, JPEG).
The export fails or does not generate the image correctly.

Could you please investigate this issue and provide a solution or update?

Thank you for your attention.

Charts

answered on 15 Jan 2025

0 answers

27 views

Issue with Importing Excell file that has sheet of references to cells on other sheets

Hi,

Having issues when attempting to parse the incoming date durring the onImport event in a Kendo Spreadsheet control. We wanted to rename the reports to the expected names if the user imports a spreadsheet with different names.

So, I came up with a function to do this, however it seems like the first sheet, when comprised of Excel references chokes. The below works fine if there are no references to other cells on other sheets.

function resetToOrigSheetNames() {
    var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");

    var data = spreadsheet.toJSON();
    var json = JSON.stringify(data, null, 2);//<--[OOF] Uncaught RangeError: Invalid string length! Chokes on a sheet with references.
    var ssData = JSON.parse(json);
    
    var importData = "";
    var sheetcount = ssData.sheets.length;
    var sheets = spreadsheet.sheets();

    let listData = [];
    listData = _view.get("currentLayoutDataList"); //We will use this later for sheet names etc...


    //First load the Sheet types:
    let i = 0;
    $.each(listData, function (index, value) {

        if (i < sheetcount && (value.itemType === "REPORT" || value.itemType === "CUSTOM")) {

            spreadsheet.renameSheet(spreadsheet.sheets()[i], defineName(value));
            console.log("NAME", spreadsheet.sheets()[i]._name );
            i++;
        }

       
    });
    spreadsheet.refresh();
}

I have the above being called in the excelImport event handler.

It's throwing an exception on the JSON.stringify():

Which according to JavaScript documentation means the string being created… is too big. I use the below code all over the application for different things:

var data = spreadsheet.toJSON();

var json = JSON.stringify(data, null, 2);

var ssData = JSON.parse(json);

Was wondering if there was a way to import the actual values of the referenced cells and not the references?

Thanks!
George

Spreadsheet

updated question on 13 Jan 2025

1 answer

26 views

Kendo ui Calendar - question and potential bug

Hi,

I am trying to set up calendar in my app using range selection mode.
My question would be how can I select range when I open calendar on a button click. (I have field where data is read from db, and then i should preset that data on calendar).

Second, potential bug:
if Calendar is in range selection mode (selectable="range"), change event doesn't trigger correctly. When first time clicked - value in the widget change event (this.value) equals null, and then when second one is clicked (end of range), this.value equals start of the range.

https://dojo.telerik.com/TCxOCzUl

I used this dojo.

Thank you very much.

Regards,

Vedad

Calendar

answered on 13 Jan 2025

0 answers

37 views

kendomultiselect value setting not rendered

I have an html page with two kendomultiselect controls initialized with a code like the following:

function msAssegnatariConoscenza_GetDataSource()
{
 return new kendo.data.DataSource(
  {
   serverFiltering: true,
   schema: {
    data: function (response)
    {
     //...
 return response;}
 },
   transport: {
    read: {
     url: "../Api/Assegnatari_SearchWithUO", //Assegnatari_Search
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 type: "POST"
 },
    parameterMap: function (data, type)
 {
     //...
     return JSON.stringify(data);
 }
   }
  }
 );
}

function msAssegnatariConoscenzaInit(fIsReadOnly)
{
 if (!datiSmistamento.AssConoscenza) datiSmistamento.AssConoscenza = [];

  $("#field_AssConoscenza").kendoMultiSelect({
 autoBind: false,
 dataTextField: "Nome",
 dataValueField: "ID",
 minLength: 3,
 delay: 500,
 height: 300,
 headerTemplate: '...',
 tagTemplate: '...',
 itemTemplate: '...', 
 filtering: function (e)
 {
    if (!e.filter || !e.filter.value)
 e.preventDefault();
 },
   dataSource: msAssegnatariConoscenza_GetDataSource() ,
   value: null,
 select: function (e)
 {
    var dataItem = this.dataItem(e.item.index());
 return selectAssegnatarioConoscenza($(this.element[0]).attr("id"), dataItem, e);
   },
 change: function (e) { return msAssegnatariConoscenza_changeEvent(this, e); }, //Fired when value changed by the user, not form code.
 dataBound: function (e) { e.sender.listView.focusFirst(); return false; }
  });
}

When I delete an element in one control, I have to add it to the other control.

On the change event of the first I set the new value of the second with the following code:

 msAssegnatariConoscenza.value([]);
 msAssegnatariConoscenza.dataSource.data(datiSmistamento.AssConoscenza);
 msAssegnatariConoscenza.value(datiSmistamento.AssConoscenza.map(avmAss => avmAss.ID));

So if I choose a new value in the second control typing chars and choosing from list, and then delete one on the first control, when I programmatically set the new value of the second control it will not be updated.

Can anyone tell me what I have done wrong?

Data Source

MultiSelect

updated question on 10 Jan 2025

1 answer

32 views

How to filter a server-side mvvm based dropdowntree widget

We need in our application a dropdowntree which has the following properties:

searchable
mvvm based
server-filterered

the following snipped is the configuration of the datasource:

let hDataSource = new kendo.data.HierarchicalDataSource({
	transport: {
		read:
			function (options) {
				let searchString = "";
				if (options.data.filter && options.data.filter.filters.length > 0) {
					searchString = "/" + options.data.filter.filters[0].value;
				}
				let url = SERVICE_URL;
				if (searchString) {
					url += searchString;
				}
				$.ajax({
					url: url,
					success: function (result) {
						options.success(result);
					}
				});
			}
	},
	schema: {
		model: {
			children: "items",
			hasChildren: "childsAvailable"
		}
	},
	serverFiltering: true
});

the url provided by the SERVICE_URL variable is filtering the data when searching for nodes

when i configure the widget in the normal way everything works just fine. But when i use mvvm the browser throws the following error.

maybe somebody can help me get mvvm to work since this is how all our forms are created.

DropDownTree

MVVM

answered on 10 Jan 2025

1 answer

48 views

We are trying to create a Editor custom toolbar button with a defined SVG. No matter what we try, we are unable to change the default SVG button.

I am are trying to create a custom toolbar button with a defined SVG.

No matter what we try, we are unable to change the default SVG button.

The documentation says that the name will be used to apply a k-name class. We can then use that to apply our own SVG. How can we change the SVG on a custom button?

Example - https://dojo.telerik.com/NyxxkxYJ

The following example demonstrates how to add a custom tool button. To enable styling where toolName is the specified name in the custom tool configuration, the custom buttons get a k-toolName CSS class. The undo and redo tool names are reserved.

Editor

answered on 08 Jan 2025