Telerik Forums
Kendo UI for jQuery Forum
0 answers
16 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
16 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
12 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
15 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
18 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
298 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
14 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
46 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
17 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
3 answers
48 views

my onclick event not firing after grid sort.

grid columns markup


columns: [
   
                    {
                        field: "", title: "", width: "150px", attributes: { "class": "ps-0" }, template: function(dataItem) {
                            var actionHtmlContent = '';
                            if (dataItem && dataItem.canEdit) {

                                actionHtmlContent += '<a class="btn btn-link"  href="' + contactDetailLink + '/1/' + dataItem.id + '">';
                                actionHtmlContent += '<em class="material-icons material-edit" style="color:#0D4EA2;"></em>';
                                actionHtmlContent += '</a>';
                            }
                            if (dataItem && dataItem.canDelete) {

                                actionHtmlContent += '<a class="btn btn-link delete-button" title=" " aria-label=" " href="?AppContactID=' + encodeURIComponent(dataItem.id) + ' &handler=Delete">';
                                actionHtmlContent += '<em class="material-icons material-delete" style="color:#0D4EA2;"></em>';
                                actionHtmlContent += '</a>';
                            }
                            return actionHtmlContent;
                        }
                    },
       
    { field: "salutation", title: "Salutation", width: "130px" },
    { field: "fullName", title: "Full Name", width: "200px" },

 

code to attach onclick


$(".delete-button").on("click", function () {
    return confirm('Are you sure you want to proceed?');
});

 

my js tag has nounce, thus i can't add the event listener to the html tag itself.

 

after i sort the grid, when user click on the .delete-button the confirm popup is not showing

Alex
Top achievements
Rank 1
Iron
 updated answer on 24 Dec 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mila
Top achievements
Rank 1
Iron
Toya
Top achievements
Rank 1
Iron
Iron
Kyle
Top achievements
Rank 1
Omar
Top achievements
Rank 3
Iron
Iron
Iron
Les Baker
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mila
Top achievements
Rank 1
Iron
Toya
Top achievements
Rank 1
Iron
Iron
Kyle
Top achievements
Rank 1
Omar
Top achievements
Rank 3
Iron
Iron
Iron
Les Baker
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?