Questions on Kendo UI for jQuery Forum

2 answers

357 views

I am creating a fairly simple datasource, with at least two filters but possibly more depending on what the user has set up. When I have two filters it is fine. I set the datasource filter up as follows:

{
logic: "and",
filters: [
    { field: date, operator: "gte", value: "01/11/2013" },
    { field: date, operator: "lte", value: "30/11/2013" },
]
}

This works correctly when I fetch the data. However if I have a 3rd filter I get the error: "Unable to cast object of type 'Kendo.Mvc.CompositeFilterDescriptor' to type 'Kendo.Mvc.FilterDescriptor'."

I have tried a few structures for the filter:
{
logic: "and",
filters: [
    { field: date, operator: "gte", value: "01/11/2013" },
    { field: date, operator: "lte", value: "30/11/2013" },
    { field: userName, operator: "eq", value: "JBLOGGS" }
]
}

{
logic: "and",
filters: [ {
    logic: "and",
    filters: [
    { field: date, operator: "gte", value: "01/11/2013" },
    { field: date, operator: "lte", value: "30/11/2013" }] },
    { field: userName, operator: "eq", value: "JBLOGGS" } ]
    }
]
}

And other variations, but all of them give the same error.

Any help would be appreciated.
Thanks in advance.

Data Source

answered on 03 Dec 2013

1 answer

85 views

TreeView Image is misallignmed

Hi,
Please refer to my attached screen shot. As you can see when we enable checkboxes in the TreeView, the Tree Node's image become misaligned. It is not vertically centralized and it doesn't looks good.
We are using the latest Internal Release 2013.3.1127.
Please advise what can be done to fix this alignment issue?
Thank you.

TreeView

answered on 03 Dec 2013

2 answers

74 views

Kendo UI 2013.3 release and Twitter Bootstrap

Hello,

I'm working on a web application using Kendo UI Web and I need to implement responsive design. I read that in release 2013.3 the UI widgets support responsive design. Does it mean that I don't need Bootstrap any more if I want to provide responsive behavior in my app?

Thanks.

General Discussions

answered on 02 Dec 2013

2 answers

126 views

problem with kendo ui class implementation

Hello !

i'm currently running some test on kendo ui Class to get a clean code in one of my project but i'm getting some errors i don't know how to solve.

here is my simple sample of code :

<!DOCTYPE html>

<html>

<head>

<title>Test</title>

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

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

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

<link href="styles/index.css" rel="stylesheet" />

</head>

<body onload="onBodyLoad()" style="height:100%; padding-bottom: 100%">

<div data-role="view" id="test">

<a href="#test" class="button" data-role="button" data-click="test.myAlert" data-att="attributeTest" data-icon="search">buttonTest</a>

</div>

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

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

<script src="init/cordovaInit.js"></script>

<script type="text/javascript">

var Test = kendo.Class.extend({

init: function() {

}

myAlert: function(e) {

alert("test");

}

});

</script>

<script>

var app = new kendo.mobile.Application($(document.body), { skin: "flat" });

var test = new Test();

test.myAlert();

</script>

</body>

</html>

and here are the error i'm getting when i run it on chrome

Uncaught SyntaxError: Unexpected identifier index.html:24

Uncaught ReferenceError: Test is not defined index.html:32

Uncaught TypeError: Cannot read property 'myAlert' of undefined

i really don't know how to get through that ..

my wish is to implement a class that does simple class's job like methods, attributes and so on. i want to combine that with data-clic properties and the data-attribute feature that kendo ui implements.

thank you for helping and sorry if i'm posting in the wrong place but i haven't seen any section about kendo ui class .. :)

General Discussions

answered on 02 Dec 2013

2 answers

195 views

Change Menu Expend Icon direction

I have added to menu widgets the most right is vertical, each use the same dataSource. The problem is the expand Icon point up on each of the Menus. The vertical menu should point to the right, and the horizontal should point down.

I can find no way to configure this Icon direction?

Menu

answered on 02 Dec 2013

2 answers

681 views

Problems with numeric sorting

Hi,

I am a experience developer but a completely Kendo newbie and doing some initial tests to see if this can be a platform for our application. I have gotten a grid to work loading data from my database. But, I cannot get sorting for function for the numeric column, it always sorts as a string. I have created a model where the data type is set as number, and according to my understanding this should now parse the json data into that model and then the grid should know that this is a number, but it stills sorts as a string. Data comes from json, one line looks like this:

{"orderId":"65-68455-0b0b7","transact":"414583245","id":"414583245","paytype":"VISA","amount":"7200.00","amountBase":720000,"currency":"NOK","currencyCode":578,"test":"1","time":"2011-03-03 21:53:15","cardnomask":"XXXXXXXXXXXX0000","cardcountry":null,"refunded":0,"refundable":720000,"pids":[68455],"receipt":{"68455":false},"persons":"KEtil Test"}

My code looks like this:

$(document).ready(function() {

var transactionModel = kendo.data.Model.define({

fields: {

id: "transact",

persons: {

editable: false

},

time: {

editable: false,

type: "date",

},

transact: {

editable: false

},

amount: {

editable: false,

type: "number",

},

}

});

var dataSource = new kendo.data.DataSource({

transport : {

read : "/wwwdocs/ajax.php",

schema : {

data : transactionModel

},

}

);

$(function() {

$("#transactions").kendoGrid({

dataSource : dataSource,

columns : [ {

field : "persons",

title : "Navn",

width : 300

}, {

field : "time",

title : "Tid",

width : 160,

}, {

field : "transact",

title : "Transaksjons-id",

width : 160

}, {

field : "amount",

title : "Sum",

width : 160

}, ],

filterable : true,

sortable : true,

groupable: true,

});

Grid

answered on 02 Dec 2013

1 answer

403 views

Highlight new/ edited row?

Hi,
I am trying to get the functionality seen here:
http://www.jtable.org/
If you add or edit a row, there is some nice css that highlights the row.

What I have tried so far (using the MVC wrappers):
.Events(e => e
.Save("onSave")
)

function onSave(e) {
var grid = $("#grid").data("kendoGrid");
var id = e.model.ID;
var uid = grid.dataSource.get(id).uid;
$("#grid tbody").find("tr[data-uid=" + uid + "]").addClass("row-changed");
}

.row-changed {
background-color: red;
}

Nothing is happening :(
Thanks!

Grid

answered on 02 Dec 2013

2 answers

117 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

129 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