Questions on Kendo UI for jQuery Forum

1 answer

1.1K+ views

Uncaught TypeError: Cannot read property 'data' of undefined

Hi all,

I have a listView with the following bindings:

listView.bind("remove", function(e) {

$.ajax({

type : "POST",

url : vulnerabilityAssessment.deleteVulnerabilityAssessmentItem.replace("{itemId}", e.model.id),

contentType : 'application/json',

dataType : "json",

success : function(response) {

refreshCurrentListView(listViewId, scope);

},

});

}

listView.bind("save", function(e) {

var item = {

id: ...,

vulnerabilityAssessment: vulnerabilityAssessmentId,

.....

}

if(e.model.id == null)

item.id = -1;

$.ajax({

type : "POST",

url : vulnerabilityAssessment.saveVulnerabilityAssessmentItem,

contentType : 'application/json',

data : JSON.stringify(item),

complete : function(e) {

refreshCurrentListView(listViewId, scope);

},

error : function(e) {

showErrorDialog(e);

},

dataType : "json"

});

And the refreshCurrentListView function as follows:

function refreshCurrentListView(listViewId, scope) {

var type = parseInt(listViewId.substr(listViewId.indexOf("_") + 1));

var vulnerabilityAssessmentId = $("#vulnerabilityCurrentAssessmentListView", scope).children('div').children('div')[0].id.substr($("#vulnerabilityCurrentAssessmentListView", scope).children('div').children('div')[0].id.indexOf("_") + 1);

if(listViewId.includes("Strenght")) {

var itemViewModel = itemViewStrength(vulnerabilityAssessmentId, type, 'S');

kendo.bind ($("#threatCurrentVulnerabilityAssessment #" + listViewId, scope), itemViewModel);

$("#threatStrenghtListView_" + type + " .edit-buttons").show();

}

I'm adding a new record on the list and as soon as I add a second row , I get the following exception:

Uncaught TypeError: Cannot read property 'data' of undefined

at init.setup (kendo.all.min.js:27)

at init.create (kendo.all.min.js:27)

at Object.<anonymous> (kendo.all.min.js:27)

at Function.Deferred (jquery.min.js:2)

at init._promise (kendo.all.min.js:27)

at init._send (kendo.all.min.js:27)

at init.sync (kendo.all.min.js:27)

at init.save (kendo.all.min.js:54)

at HTMLAnchorElement.<anonymous> (kendo.all.min.js:54)

at HTMLDivElement.dispatch (jquery.min.js:3)

This exception happens when the ajax call inside the 'save' binding takes place (and before it gets to the complete function).

Any ideas?

ListView

answered on 04 Sep 2020

2 answers

260 views

[Solved] Kendo UI Custom widget Typescript returning null instance

I am trying to create a kendo custom widget in typescript, but the data function always returns null.

let emptyWidget = $('#emptyCriteria').kendoEmptyTemplate().data('kendoEmptyTemplate');

console.log(emptyWidget) // getting always undefined

Widget Code:

interface JQuery {

kendoEmptyTemplate(options?: KendoWidgets.IEmptyTemplateOptions): JQuery;

data(key: "kendoEmptyTemplate"): KendoWidgets.EmptyTemplateOptions;

}

module KendoWidgets {

export interface IEmptyTemplateOptions {

}

export class EmptyTemplateOptions implements IEmptyTemplateOptions{

name: string = 'EmptyTemplate';

}

export class EmptyTemplate extends kendo.ui.Widget

{

options: EmptyTemplateOptions;

constructor(element: Element, options: IEmptyTemplateOptions) {

super(element, options);

}

// Create an alias of the prototype (required by kendo.ui.plugin)

EmptyTemplate.fn = EmptyTemplate.prototype;

// Deep clone the widget default options

EmptyTemplate.fn.options = new EmptyTemplateOptions();

// Create a jQuery plugin.

kendo.ui.plugin(EmptyTemplate);

}

Html:

<div id="emptyCriteria"></div>

Any of you have encountered this issue or am I missing any methods in widget?

General Discussions

answered on 03 Sep 2020

1 answer

125 views

Hide a container when scrolling

I have been tasked to use the Kendo UI Mobile Scroller widget (https://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/scroller) to hide an element in the dom when scrolling down. I am not sure which method or event I can use to do this. Any help will be so much appreciated.

ScrollView (Mobile)

answered on 03 Sep 2020

1 answer

275 views

Kendo grid content width not set on page refresh

Hi,

I have a kendo grid with few locked columns and multiple other columns. When I do navigate grid from other page it's working fine but not when refresh page using using F5 or reload option. Seems width is not set properly, please review atttached snapshots.

Grid

answered on 03 Sep 2020

2 answers

6.8K+ views

[Solved] How to clear value?

I've been searching through documentation and fourms with no luck.

When you create a calendar, it has a default value of null. No date is selected. I want to clear the calendar to no selection progrmaticly. If I send null via the value method it errors out and I couldn't find any other clear method.

is this possible?

Calendar

answered on 02 Sep 2020

3 answers

1.5K+ views

No records to display

I made a simple TreeList.

The data from the server is simple JSON array.

[{"Description":"111","id":1,"Name":"CEO"},{"Description":"222","id":2,"parentId":1,"Name":"Jane"},{"Description":"333","id":3,"Name":"Tom"},{"Description":"444","id":4,"Name":"Susan"}]

TreeList java script code is below but this always display "No records to display"

When I remove "model" object under "schema" in DataSource It works well.

I don't know what is the problem.

Please help me to solve this proble.

var dataSource = new kendo.data.TreeListDataSource({
transport : {
read : {
url: "ReadAsset",
dataType: "json"
}
},
schema: {
model: {
id: "id",
parentId: "parentId",
expanded: true
}
}
});

$("#treelist").kendoTreeList({
dataSource: dataSource,
height: "99%",
columns: [
{ field: "Name" },
{ field: "Description" }
]
});

TreeList

answered on 02 Sep 2020

6 answers

265 views

Getting new item reference

In the Kendo Tree View component, when you append a new item, the function will return a reference to the new node. That way, it's easy to build a node hierarchy:

rootNode = myTreeView.append({ text: "MyRoot" }, null);

subNode = myTreeView.append({ text: "MySubNode"

}, rootNode);

myTreeView.append({ text: "MyThirdLevelNode1" }, subNode);

myTreeView.append({ text: "MyThirdLevelNode2" }, subNode);

However, I can't find a way to do the same with the Kendo Menu component. So far, the only I've found to create a menu dynamically is adding a specific ID and getting the menu item with this ID.

MyMenu.append('<li id="RootMenuItem" class="k-item">MyRootItem</li>');

MyMenu.append('<li id="MySubItem" class="k-item">SubItem</li>', $("#RootMenuItem"));

Is there a way to get the newly created item and reuse it as the parent reference for the menu?

Regards,

Simon

Menu

answered on 02 Sep 2020

6 answers

570 views

Dynamically adding items

The site has a sample code.
http://demos.kendoui.com/web/menu/api.html

With this all clear... Is there a possibility of adding attributes href, class, role?

Menu

answered on 02 Sep 2020

3 answers

916 views

[Solved] Resizing column dynamically

Hi,

I have a Grid that is generated dynamically in javascript.

The columns are parametered on the server and I received the configuration in Json. Then I build the Grid as scrollable by default because I can't determine it.

On "databound", I used the "autofit" function to resize each columns. But sometimes, the table width is bigger than the sum of the columns'width and I would like to dispatch the empty width on each columns.

So, is it possible to resize a column dynamically by setting its width such like that ?

myGrid.columns[0].setWidth("500px");

Is it possible to dynamically change the behaviour of a scrollable Grid to a non scrollable Grid ( so that column resizing behaves like if it was initially configured as non scrollable ) ?

Thanks for your help,

Regards

Grid

answered on 02 Sep 2020

1 answer

173 views

Gantt export to pdf issue

Hi,

I have a problem related to pdf export. If exported view is too long, it's not visible in pdf, and I must zoom it for looking smth (see pdf-export.png). Can I do smth, for example export pdf already zoomed in, and zoom it out if needed?

Gantt

answered on 02 Sep 2020