Questions on Kendo UI for jQuery Forum

7 answers

1.1K+ views

[Solved] DataSource bug - if read fails it is not possible to call read again

I have a datasource schema like this:

schema: {

data: "permissions.resources.resource",

model: {

id: "client_Permission_Id",

fields: {

"resourceno": { editable: true, nullable: true },

"uri": { editable: true },

"verb": { editable: true }

}

The service this datasource is connected to returns json like this:

{

"permissions": {

"resources": {

"resource": [

{

"client_permission_id": "1",

"resourceno": "6",

"uri": "system/api/resources?verbs={verbs}&pathsearch={pathsearch}",

"verb": "get"

},

{

"client_permission_id": "2",

"resourceno": "7",

"uri": "system/api/resources/{resourceno}",

"verb": "get"

}

]

}

It works fine, but the result from the service can be empty, and the json result will then look like this:

{

"permissions": {

"resources": null

}

In this case the datasource will fail.It gives the following errormsg:

Uncaught TypeError: Cannot read property 'resource' of null

(anonymous function)

Class.extend.init.that.datakendo.web.js:5225

Observable.extend.successkendo.web.js:5630

e.extend.proxy.gjquery.min.js:2

Class.extend.read.options.successkendo.web.js:5118

f.Callbacks.njquery.min.js:2

f.Callbacks.o.fireWithjquery.min.js:2

wjquery.min.js:4

f.support.ajax.f.ajaxTransport.send.d

I understand that it fails because permissions.resources is null, but when this happens the datasource seems to enter a state it cannot recover from. If I now call the read() method on the datasource it will not result in a network call. Nothing happens at all.

How can I solve this?

Data Source

answered on 19 Mar 2013

1 answer

318 views

Set datasource doesn't create aggregates if initial bind had no data

Hi,

I've got an issue when rebinding the datagrid and aggregates.

The following javascript creates the grid. Columns of the reports are unkown, the data I'm getting contains an array with the column list, and an array with the actual data.

I found this problem when executing a report that has left joins, so if there is no data, I still get rows, but no values to the columns I want to aggregate.

If the first time the report is generated has no data, the aggregates are not created the second time round, even if I do have data.

But if the first time the data loads I have data the aggregates are shown. Then if the second time I don't have data, I receive the following error "Uncaught TypeError: undefined has no properties" at "grid.setDataSource(newDs);"

var reports = {

getGridColumns: function (columns) {

var columnArray = [];

$.each(columns, function (i, c) {

var column = { field: c.Name, title: c.Title, width: 150 };

if (c.Format) {

column.format = '{0:' + c.Format + '}';

}

if (c.ShowTotals) {

column.footerTemplate = "#=kendo.toString(sum,'" + c.Format + "')#";

}

columnArray.push(column);

});

return columnArray;

},

getGridAggregates: function (columns) {

var columnArray = [];

$.each(columns, function (i, c) {

if (c.ShowTotals) {

columnArray.push({ field: c.Name, aggregate: "sum" });

}

});

if (columnArray.length == 0) { columnArray = undefined; }

return columnArray;

},

bindKendoGrid: function () {

$.ajax({

type: 'POST',

url: '/Reports/GetReportData',

data: reports.getReportParams(),

success: function (data) {

if (data && data.Data && data.Data.length > 0) {

if (!$('#report-grid').data('kendoGrid')) {

$('#report-grid').kendoGrid({

dataSource: {

data: eval(data.Data),

pageSize: 15,

aggregate: reports.getGridAggregates(data.Columns)

},

columns: reports.getGridColumns(data.Columns),

scrollable: true,

sortable: true,

filterable: true,

pageable: {

input: true,

numeric: false

}

});

}

else {

var grid = $('#report-grid').data('kendoGrid');

var newDs = new kendo.data.DataSource({

data: eval(data.Data),

pageSize: 15,

aggregate: reports.getGridAggregates(data.Columns)

});

grid.setDataSource(newDs);

}

$('#report-grid').css('display', 'block');

$('#report-container #report-export').show();

}

else {

$('#no-data').css('display', 'block');

}

$('#report-container').css({ position: '', width: '', height: '' });

kendo.ui.progress($("#report-container"), false)

$('#btnReportRefresh').removeAttr('disabled').removeClass('k-state-disabled');

},

error: function (data) {

kendo.ui.progress($("#report-container"), false)

$('#btnReportRefresh').removeAttr('disabled').removeClass('k-state-disabled');

$('#no-data').css('display', 'block');

kendo.ui.progress($("#commissions-dashboard"), false);

}

});

}

Grid

answered on 19 Mar 2013

1 answer

105 views

Memory leaks in the nested kendo.mobile.ui.ListView when data updated via MVVM

When a mobile ListView widget is placed into a different widget and data bound to the ListView by MVVM mechanism, while updating the data, memory leaks occurring. If a small piece of data is updated every second, one megabyte of memory leaking every two seconds. I discivered how to fix it. To do this, change the code of the refresh() method as follows:
if (e.action === "itemchange") {
data = e.items[0];
item = $(that.template(data));

element.find("[data-" + kendo.ns + "uid=" + data.uid + "]").replaceWith(item);

/* Add this lines */
if (data.toJSON) {
data = kendo.observable(data.toJSON());
}
/* the end */

that.trigger("itemChange", {
item: item,
data: data,
ns: ui
});

that._style();
return;
}
It is important that the property "uid" of the object "data" being different from the same property of the object e.items[0] contained in the event.

ListView (Mobile)

answered on 19 Mar 2013

1 answer

221 views

GridEditMode.InLine doesn't work. But inCell works!!

GridEditMode.InLine doesn't work but if I changed InLine to InCell, It will work. Could you please help me to make inLine work?

Grid

answered on 19 Mar 2013

7 answers

199 views

[Solved] 2013 Q1 Beta Missing Icons in IE10

Greetings,

I'm seeing tabstrip icons when running my page from within Visual Studio 2012 using IE 10, which is the correct behavior. However, when running the exact same page (same folder structure and all supporting files) from an IIS web site, the icons disappear.

What's strange is the icons are only missing when running using IE 10. When running from Chrome, Safari, mobile Android, etc.. the icons are present (see images).

How can I get the icons to render properly when running from an IIS web site using IE 10?

Thanks. BTW, this is the only issue I've encountered thus far. The beta code is working great otherwise. Nice work.

TabStrip (Mobile)

answered on 19 Mar 2013

1 answer

129 views

Setting focus in datasource change event

Below is the definition for my datasource object. In the change event, I am setting focus based on whether or not the datasource contains any items. Focusing on the dropdownlist ("custom1combo") is working, however the part where focus is set on "portraitNotes", which is a text area, is not working.

This is the line in question:
$("#portraitNotes").focus();

The weird thing is it works fine in other areas of my site, just not here.

custom1DataSource = new kendo.data.DataSource({

serverFiltering: true,

transport: {

read: {

url: "wsRest.svc/custom1/",

data: {

user: function () {

return userField.value;

},

client: function () {

return $("#clientCombo").val();

},

matter: function () {

return $("#matterCombo").val();

}

},

change: function () {

//when data is updated, if there is more than 1 item we need to enable the menu

var custom1 = $("#custom1Combo").data("kendoDropDownList");

custom1.enable(false);

if (custom1DataSource.data().length > 1) {

custom1.enable(true);

$("#custom1Combo").focus();

}

else {

$("#portraitNotes").focus();

}

});

General Discussions

answered on 19 Mar 2013

1 answer

100 views

[Solved] Scroll a pane in a split view to top

How do I scroll to top, in a pane in a split view, from javascript?

I have tried several hours with different things but cant get it to work.

Thanks

General Discussions

answered on 19 Mar 2013

2 answers

353 views

[Solved] Read single row datasource into DIV

Hi

I've got the URL below which always returns a single record. How do I return the Content field and update the html of a div on the page?

http://dsdmservices.azurewebsites.net/dsdmRest.svc/GetContent?BookMenuID=4

Returns:
{"BookMenuID":4,"Content":"<span>DSDM advocates........"}

I've tried the code below so far (amongst many others) but the alert shows "undefined" as the result...

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://dsdmservices.azurewebsites.net/dsdmRest.svc/GetContent?BookMenuID=4", // the remove service url

dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX

}

});

dataSource.read();

alert(dataSource.length);

var dataItem = dataSource[0];

$('#divContent').html(dataItem.Content);

Cheers
Cliff

Data Source

answered on 19 Mar 2013

1 answer

216 views

Kendo.ns is improperly documented / not working.

Just a note for your documentation team, and a bug report.

kendo.ns

Is documented extremely briefly in the declarative syntax section of your online docs, the gist of the docs go like this:

set kendo.ns e.g.

kendo.ns = "kendo"

This would change your data declarations to : data-kendo-role= (etc.)

This is not correct (as per the latest code drop) setting...

kendo.ns = "kendo"

Recognizes data attributes in the following form...

data-kendorole=

You can set kendo.ns="kendo-" and then be able to use data attributes in the form

data-kendo-role

However, even with enough data attributes recognised to get the app to start, large chunks of declarative markup simply don't work anymore. (As a very basic example, layouts don't recognise data-kendo-header / data-kendo-footer ... there's many more problems with it.)

Switching off kendo.ns and renaming data- attributes back to their non ns'ed form fixes everything.

Where is your issue tracking system, or do you guys pull bug reports in from here?

Jason.
Fishvision.

MVVM

answered on 19 Mar 2013

3 answers

245 views

How to open actionsheet on the click of button

Hi,

<a data-role="button" data-click="onClick" >Open</a>

<ul data-role="actionsheet" id="actionsheet">
<li><a data-action="foo">Foo</a></li>
<li><a data-action="bar">Bar</a></li>
</ul>

function onClick(){

if(i>5)
{
// I want to open above action sheet here if condition satisfy,
}
else
{
alert("Cannot open action sheet");
}
}

I want to open the actionsheet on the click of button.
After clicking button, onclick function is invoking where i am doing some condition checking.If condition satisfy i want to open action sheet.

Please do the needful.If possible please provide demo in JS Bin

ActionSheet

answered on 19 Mar 2013