Telerik Forums
Kendo UI for jQuery Forum
0 answers
53 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
 updated question on 13 Jan 2025
1 answer
52 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
62 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));
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?

Giovanni
Top achievements
Rank 1
Iron
Iron
Iron
 updated question on 10 Jan 2025
1 answer
58 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
86 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
382 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:

    <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
 answered on 07 Jan 2025
1 answer
45 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.

If you know how to solve this issue, please help me.

{    title: "사용여부",
     width: "70px",
     template: '<input type="checkbox" class="chk k-checkbox" name="useYn" #= useYn =="Y" ? "checked=checked" : "" # />'+
               '<label class="k-checkbox-label"></label>',
     attributes: { style: "text-align: center" }
}
n/a
Top achievements
Rank 1
Iron
 answered on 31 Dec 2024
1 answer
330 views
Hello

I am currently using a purchased Kendo UI license. I plan to replace my existing Kendo UI with the latest jQuery version 2024.4.1112. Before making the change, I do not know the version I was previously using.

When I check the CSS file, I see the following comment: 

/** 
 * Kendo UI v2017.2.621 (http://www.telerik.com/kendo-ui)                                                                                                                                               
 * Copyright 2017 Telerik AD. All rights reserved.                                                                                                                                                      
 *                                                                                                                                                                                                      
 * Kendo UI commercial licenses may be obtained at                                                                                                                                                      
 * http://www.telerik.com/purchase/license-agreement/kendo-ui-complete                                                                                                                                  
 * If you do not own a commercial license, this file shall be governed by the trial license terms.    
*/

Since someone else developed this project, I am not sure which version was used, and if I try to update to the latest version, there are issues with the CSS.

Currently, my license allows me to download the following versions:
2015.2.624
2022.2.510
2022.2.621
2022.2.802
2022.3.913
2022.3.1109
2023.1.117
2023.1.314
2023.1.425
2024.2.514
2024.3.806
2024.3.1015
2024.4.1112

If I need to upgrade step by step to use the latest version, I am unsure what to do since I cannot find version 2017.2.621. Can you help me figure out how to use the newest version?
Neli
Telerik team
 answered on 30 Dec 2024
1 answer
137 views

Hi,

How can I replace multiselect item remove icon with the old one? The new icon is svg icon. My version is 2024.3.1015

new icon

 old icon

Nikolay
Telerik team
 answered on 24 Dec 2024
0 answers
120 views

Hi,

I am attempting to update our current version of Kenduo UI for Jquery from 2023.1.117 to 2024.4.1112.

I have downloaded the commercial release zip and have updated the references to the js and css files (as I have done with previous upgrades), however I am experiencing lots of styling issues for font sizes and layout across inputs ans widgets.

Firstly, the text size is much smaller for inputs and widgets.

The display of widgets on different browsers is inconsistent (for example the calendar widget is being cut off on FireFox, but is spanning the whole screen on Chrome - screenshots attached).

Any ideas what could be causing this?

Icon
Top achievements
Rank 1
 asked on 23 Dec 2024
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
MultiColumnComboBox
Chat
DateRangePicker
Dialog
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Effects
Accessibility
PivotGridV2
ScrollView
BulletChart
Licensing
QRCode
ResponsivePanel
Switch
Wizard
CheckBoxGroup
TextArea
Barcode
Breadcrumb
Collapsible
Localization
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
+? more
Top users last month
Robert
Top achievements
Rank 1
Luis Cordoba
Top achievements
Rank 1
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
Membatalkan pinjaman
Top achievements
Rank 2
Want to show your ninja superpower to fellow developers?
Top users last month
Robert
Top achievements
Rank 1
Luis Cordoba
Top achievements
Rank 1
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
Membatalkan pinjaman
Top achievements
Rank 2
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?