Telerik Forums
Kendo UI for jQuery Forum
3 answers
159 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
33 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:

  1. Access the official jQuery Chart API Advanced Export demo.
  2. Attempt to export a chart as an image (PNG, JPEG).
  3. 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
46 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
42 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
52 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
47 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
78 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
363 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
36 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
297 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
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)
SPA
Filter
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
OrgChart
TextBox
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
Popover
DockManager
FloatingActionButton
TaskBoard
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
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
TimePicker
DateTimePicker
RadialGauge
ArcGauge
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?