Questions on Kendo UI for jQuery Forum

2 answers

120 views

MVVM and ListView Object #<Text> has no method 'getAttribute'

I'm trying to get MVVM working with KendoUI Mobile and am receiving the error as stated, "Object #<Text> has no method 'getAttribute'" (kendo.all.min.js:12)

The binding DOES appear to be working, but the rending of the page is very messed up. For example, I do see a list of items with the #: linkText # that I'd expect, except the view no longer looks like an iPhone, the links don't work, and there is some weird styling going on (for reference, I've attached screenshots of the data-binded listview and a version with hardcoded <li> items -- that is, the only between the pages is how the <li>'s are created)

Anyways, I have a view and template, like this:

<div data-role="view" id="home-view" data-layout="default" data-title="Hello World!"

data-init="app.views.home.init"

data-before-show="app.views.home.beforeShow"

data-show="app.views.home.show"

data-model="app.views.home.viewModel">

<ul data-role="listview" data-bind="source: navigation" data-template="navigation-template"></ul>

</div>

<script id="navigation-template" type="text/x-kendo-template">

<li>

<a href="#: url #">#: linkText #</a>

</li>

</script>

And the script that looks like this:

define(["kendo"], function (kendo) {

return {

init: function (initEvt) {

},

beforeShow: function (beforeshowEvt) {

},

show: function (showEvt) {

},

viewModel: kendo.observable({

navigation: [

{

linkText: 'My Data',

url: 'myData'

},

{

linkText: 'My Purchase Requests',

url: 'myPurchaseRequests'

},

{

linkText: 'My Purchase Orders',

url: 'myPurchaseOrders'

},

{

linkText: 'Pending PR Tasks',

url: 'pendingPrTasks'

},

{

linkText: 'Pending PO Tasks',

url: 'pendingPoTasks'

}

]

})

}

});

MVVM

answered on 02 Dec 2013

3 answers

3.4K+ views

grid.dataSource.read() isn't making a request to refresh the grid data

I have an upload widget outside the grid asynchronously uploading files. Upon completion I try to refresh the grid displaying details about these files. However, when I call grid.dataSource.read() the grid datasource is not making a request to the remote service to get new data. I already set cache=false in the transport. I even try to call the read() method in the browser (chrome) console and it still doesn't cause a request to the remote service. Can you see what is wrong?

001.$(document).ready(function() {

002. var $grid = $("#samples-all").kendoGrid({

003. dataSource: {

004. transport: {

005. read: "/uploads/",

006. dataType: "json",

007. create: {

008. /* don't cache grid items, otherwise miss new uploads */

009. cache: false

010. }

011. },

012. schema: {

013. data: "rows",

014. total: "totalRows"

015. },

016. pageSize: 20,

017. serverPaging: true,

018. serverFiltering: true

019. },

020. pageable: true,

021. scrollable: false,

022. filterable: {

023. extra: false,

024. operators: {

025. string: {

026. eq: "Is equal to",

027. neq: "Is not equal to"

028. }

029. }

030. },

031. columns: [

032. {

033. field: "threat_presence",

034. title: " ",

035. template: kendo.template($("#tp-template").html(), { useWithBlock: false }),

036. width: 29,

037. filterable: {

038. ui: threatFilter

039. }

040. },

041. {

042. field: "file_name",

043. title: "Name",

044. template: kendo.template($("#file-name-template").html(), { useWithBlock: false }),

045. width: 250,

046. filterable: false

047. },

048. {

049. field: "file_type",

050. title: "Type",

051. filterable: false

052. },

053. {

054. field: "file_count",

055. title: "File Count",

056. width: 55,

057. filterable: false

058. },

059. {

060. field: "sha1",

061. title: "SHA1",

062. width: 250,

063. filterable: false

064. },

065. {

066. field: "message",

067. title: "Status",

068. width: 70,

069. filterable: false

070. },

071. {

072. field: "inserted",

073. title: "First Seen",

074. filterable: false

075. },

076. { command: { text: "Download", click: download }, title: " ", width: "85px" }

077. ]

078. }).data("kendoGrid");

079. // setup the upload window and toolbar button

080. var $uploadWindow = $("#uploadWindow"),

081. $btnUpload = $("#btnUpload").on("click", function() {

082. $uploadWindow.data("kendoWindow").open();

083. });

084.

085. if (!$uploadWindow.data("kendoWindow")) {

086. $uploadWindow.kendoWindow({

087. width: "400px",

088. title: "Upload",

089. visible: false

090. });

091. }

092. $("#upload-file").kendoUpload({

093. async: {

094. saveUrl: "/upload-samples/",

095. removeUrl: "remove",

096. autoUpload: false

097. },

098. upload: onUpload,

099. success: onUploadSuccess,

100. complete: onUploadComplete

101. });

102.

103. function onUpload(e) {

104. // omitted

105. }

106. function onUploadSuccess(e) {

107. // omitted

108. }

109. function onUploadComplete(e) {

110. console.log(e);

111. var grid = $("#samples-all").data("kendoGrid");

112. grid.dataSource.read();

113. grid.refresh();

114. }

115.});

html:

<div id="samples-list-container">

<div id="samples-all"></div>

</div>

Grid

answered on 02 Dec 2013

1 answer

132 views

Problem with getting/setting selected values

Method value() returns an array reference of selected values which is not a desirable behaviour. Method value() should return cloned array instead.

If I get selected values by calling method value() into variable eg. selectedValues and then later set those selected values by calling value(selectedValues) the control is empty, because kendoMultiSelect is modifying the same array object. I need to clone those array which i think should be done in kendoMultiSelect.value() method.

Please see working example on

http://jsbin.com/eYUwUqA/1/edit

Best regards

Luka Robnik

MultiSelect

answered on 02 Dec 2013

2 answers

101 views

Binding not working even after re-wired

I have a situation where I need to retrieve some data from my server, and then populate my view model with it. However when I do that, the bindings get overwritten. So I have a function to re-wire the functions and such for all of the various objects, and this seems to work fine; Except for this one situation where a sub-array of a top level property has an onCreate function.

The best I can see, when I start the page, the onCreate function has a property called "guid'. When I use the set function to apply the server side data to the array, that property is taken away, and I cannot seem to get it back. So the Click event fails with an error.

I have a jsBin sample here;

jsBin

MVVM

answered on 02 Dec 2013

1 answer

140 views

Column w/ hyperlink

I've created a Kendo Grid and need to add a column containing a hyperlink to a controller action that supplies the clicked row's ID. The grid would look like:

ID|Name|Product|Other|Edit, where the edit column links to '~/controller/action/currentRowID'.

The grid is working perfectly, all that's needed is the 'Edit' row. I'm using MVC4 using an ajax datasource. Please help! I cannot find anything on the web that describes how to accomplish this.

Grid

answered on 02 Dec 2013

3 answers

118 views

URL fragment navigation broken?

Hi,

I've a problem with multiple of your sample apps when running e.g. on an iPhone or iPad.

e.g. If I go to http://demos.kendoui.com/mobile/m/index.html#/mobile/m/tabstrip/index.html and select the rating tab then I go to another browser tab or another app. When returning to the tabs trip sample safari might reload the page.

expected result: I see the same page after returning

result: I get an empty page

you can force this by touching reload. Again expected result: seeing the page I've seen before. Result: empty page

I have seen this behavior in all of your samples. So I'm wondering if that's broken by design or how it can be fixed?

General Discussions

answered on 02 Dec 2013

2 answers

81 views

When set datetimepicker with a same value, will hit a bug

Hi,

I use Kendo DateTimePicker that can set Min/Max of the widget, set a range time stamp that I can select in this widget. For example,
Set interval = 30, min= new Date(2013,11, 12, 10, 0, 0), max = new Date(2013, 11, 12, 20, 0, 0)
I can select range from 2013-11-12 10:00 to 2013-11-12 20:00, include the 2 points of start and end.

But when set interval = 30, min= new Date(2013,11, 12, 10, 0, 0), max = new Date(2013, 11, 12, 10, 0, 0).
I think there should only a value can be select in widget, but it will return a wrong list.

Thanks,
Chuanlong

Date/Time Pickers

answered on 02 Dec 2013

11 answers

287 views

Drawer swipe not working on iOS 7

Hi,

I updated to iOS 7 and xCode 5 and Drawer doesn't recognize swipe gestures (i.e. left-to-right) anymore performed on iOS 7 device or in iOS Simulator.
It's working as expected on local browser and was working on ios 6 device.
I'm using kendoui.mobile.2013.2.912.commercial wiht new ios 7 theme.

Any suggestions?
Thanks in advance

Drawer (Mobile)

answered on 01 Dec 2013

8 answers

1.6K+ views

Find/Change a local DataSource element

Hi All,

I have a local datasource bound to an array of objects. This array looks something like (peopleData is a global object in this example):

peopleData = [

{ Id: "jaaron", FirstName: "John", LastName: "Aaron", Age: 46 },

{ Id: "agent2", FirstName: "Jayne", LastName: "Smith", Age: 13 }];

I am able to create a datasource using this local array with the following code (peopleDS is a global object in this example):

peopleDS = new kendo.data.DataSource({

data: peopleData,

change: function (e) {

console.log(this.data().length + ' records');

}

});

Now, I want to edit one of elements of the array. My current approach is to just iterate over the array and change the element I am looking for, like this:

for (var i = 0; i < peopleData.length; i++) {

if (peopleData[i].Id === "jaaron") {

peopleData[i].Age = 55;

break;

}

peopleDS.read(peopleData);

My question is - is there a more efficient way to do this? This array may grow to 1000 elements, which change frequently and I would rather not iterate over the entire array each time I need to change an element (although I realize it may be my only option).

On a side note:
The optimal solution, for me, would be to somehow bind an associative array to the datasource (although since it isn't really an array, I imagine isn't possible). For instance, I would like to be able to display the FirstName, LastName, and Age of the following object using a KendoUI datasource:

peopleData = {};

peopleData["jaaron"] = { FirstName: "John", LastName: "Aaron", Age: 46 };

peopleData["agent2"] = { FirstName: "Jayne", LastName: "Smith", Age: 13 };

As always, thanks in advance for any help!

Data Source

answered on 29 Nov 2013

2 answers

524 views

Editable color input field on grid

Hi all!

As you can see in the code below, i have a grid with editable cells. At the column named "szin" i tired to implement a kendo colorpicker and it works just fine.
My problem is, that the colors are only displayed when you try to edit one of the cell. Can i make it permanently displayed somehow? I dont care if the bg-color of the cell change or the dropdown box visible all the time or with any other methods.

Here's my code:

<!DOCTYPE html>

<html>

<head>

<link href="../styles/kendo.metro.min.css" rel="stylesheet">

<link href="../styles/kendo.common.min.css" rel="stylesheet">

<script src="../js/jquery.min.js"></script>

<script src="../js/kendo.all.min.js"></script>

</head>

<body>

<div id="grid" style="width:1024px; height:400px; margin-left:auto; margin-right:auto;"></div>

<script>

$(document).ready(function() {

$("#grid").kendoGrid({

dataSource: {

transport: {

read: "load.php",

update: {

url: "load.php",

type: "POST"

}/*,

destroy: {

url: "load.php",

type: "DELETE"

}*/

},

error: function(e) {

alert(e.responseText);

}

},

columns: [ { field: "termekid", width:"70px" },

/*

...

*/

{ field: "szin", width:"74px",

editor: szinColorPickerEditor

}

/*

...

*/

],

sortable: true,

editable: true,

navigatable: true,

toolbar: ["save", "cancel"/*, "create"*/],

pageable: {

previousNext: true,

numeric: true,

buttonCount: 5,

input: false,

pageSizes: [0, 10, 20, 50, 100],

refresh: true,

info: true

}

});

function szinColorPickerEditor(container, options) {

$("<input type='color' data-bind='value:" + options.field + "' />")

.appendTo(container)

.kendoColorPicker({

buttons: true

});

}

});

</script>

</body>

</html>

Grid

answered on 29 Nov 2013