or
0 answers
110 views
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:
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>
George
Top achievements
Rank 3
Bronze
Bronze
Iron
Rank 3
Bronze
Bronze
Iron
asked
on
15 Jan 2025
3 answers
233 views
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
Zhuliyan
Telerik team
answered
on
15 Jan 2025
1 answer
47 views
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.
Neli
Telerik team
answered
on
15 Jan 2025
0 answers
54 views
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
George
Top achievements
Rank 3
Bronze
Bronze
Iron
Rank 3
Bronze
Bronze
Iron
updated question
on
13 Jan 2025
1 answer
56 views
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
Neli
Telerik team
answered
on
13 Jan 2025
0 answers
65 views
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));
Can anyone tell me what I have done wrong?
Giovanni
Top achievements
Rank 1
Iron
Iron
Iron
Rank 1
Iron
Iron
Iron
updated question
on
10 Jan 2025
1 answer
62 views
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.
Neli
Telerik team
answered
on
10 Jan 2025
1 answer
89 views
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.
Martin
Telerik team
answered
on
08 Jan 2025
7 answers
386 views
Hi,
I am new to mobile development, in my company we are trying kendo ui complete for mobile app development. So far I was able to develop some screens without any issues for the app. However, now I am running into problems with a specific view or screen.
In our app a user logins in a picks a task on the second screen then he is sent to a screen that contains 2 drawers (left and right). The left drawer contains a treeview that is bound to a view model and the right drawer has some text. So, the problem is I get uncaught type error: cannot call method 'tolowercase' on undefined inside kendo.all.min.js
My code looks something like this, this is a screen that is called from my second screen when a user picks a particular task:
I have not attached the styles.
Is this because I have not initialized the treeview as kendotreeview in my view model? If that is the case, can i do that in my init function?
Thanks for the help !!
I am new to mobile development, in my company we are trying kendo ui complete for mobile app development. So far I was able to develop some screens without any issues for the app. However, now I am running into problems with a specific view or screen.
In our app a user logins in a picks a task on the second screen then he is sent to a screen that contains 2 drawers (left and right). The left drawer contains a treeview that is bound to a view model and the right drawer has some text. So, the problem is I get uncaught type error: cannot call method 'tolowercase' on undefined inside kendo.all.min.js
My code looks something like this, this is a screen that is called from my second screen when a user picks a particular task:
<div data-role="view" id="two-drawer-home" data-title="Default Report"> <header data-role="header"> <div data-role="navbar"> <a data-role="backbutton" id="back-button" class="nav-button" data-align="left">Back</a> <span data-role="view-title"></span> <a data-role="button" data-rel="drawer" href="#right-drawer" data-icon="share" data-align="right"></a> </div> </header> <a class="left-btn" data-role="button" data-rel="drawer" href="#left-drawer" data-icon="nav"></a> <div data-role="content">Main Content Goes Here </div> </div> <div data-model="app.Menus" data-init="app.Menus.init" data-role="drawer" id="left-drawer" style="width: 270px" data-title="Select a Report" data-views="['two-drawer-home']"> <header data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> </div> </header> <div id="zones" class="k-content"> <div class="configuration-horizontal"> <div class="config-section"> <div data-role="treeview" data-drag-and-drop="false" data-text-field="Name" data-bind="visible: isVisible, source: zones, events: { select: onSelect }"></div> </div> </div> </div> </div> <div data-role="drawer" id="right-drawer" style="width: 80px" data-title="Share" data-position="right" data-views="['two-drawer-home', '/kendo-ui/mobile/m/drawer/two-way-drawers.html']"> <header data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> </div> </header> Filters will appear here </div>I have not attached the styles.
Is this because I have not initialized the treeview as kendotreeview in my view model? If that is the case, can i do that in my init function?
Thanks for the help !!
Bhavika
Top achievements
Rank 2
Iron
Iron
Iron
Rank 2
Iron
Iron
Iron
answered
on
07 Jan 2025
1 answer
48 views
Hello,
I have a question. After updating Kendo UI from version 2017.2.621 to 2017.3.1018, a problem occurred. The checkbox functionality in the grid, which previously had no issues, is no longer working. When I click the checkbox, nothing happens.
