Questions on Kendo UI for jQuery Forum

0 answers

48 views

Kendo UI Jquery Mobile listview data[0].uid is undefined

During try the new version 2023.1.425 mobile listview component, when we binding data and used the template, we found the prompt data [0].

uid is undefined, The old version did not find this problem, the new version of this problem, I do not know why.

see the link

https://dojo.telerik.com/?_gl=1*dxcc66*_ga*MTQyMzc3MjYyLjE2NzgwNzg5MjA.*_ga_9JSNBCSF54*MTY4NjA5NjI4NC4xMC4xLjE2ODYwOTYzMTguMjYuMC4w

ListView (Mobile)

asked on 07 Jun 2023

0 answers

60 views

sticky filter

nevermind

ListView (Mobile)

asked on 21 Aug 2013

0 answers

53 views

DataSource binding of ListView

Hi:

I would like to share some code. This is a MVC application accessing web-server that is returned as json:

@{

ViewBag.Title = "Home Page";

}

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

<div class="mm-contact">

<span class="mm-title" data-bind="text: Title"></span><br />

<span data-bind="text: FirstName"></span> <span data-bind="text: LastName"></span><br />

Extension: <span data-bind="text: Extension1"></span><br />

mail: <span data-bind="text: Email"></span>

</div>

</script>

<div id="ProductSales" data-role="view" data-model="vm" data-layout="default" data-title="Product Sales">

<header data-role="header">

<div data-role="navbar">Product Sales</div>

</header>

<div id='lv' data-role="listview" data-bind="source: productSalesContacts" data-template="contact-template"></div>

</div>

<script type="text/javascript">

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

id: "ID",

fields: {

// data type of the field {Number|String|Boolean|Date} default is String

ID: { type: "Numeric", editable: false, nullable: true },

LastName: { type: "String", validation: { required: true } },

FirstName: { type: "String", validation: { required: true } },

Title: { type: "String" },

City: { type: "String" },

State: { type: "String" },

Email: { type: "String" },

Phone1: { type: "String" },

Extension1: { type: "String" },

Sequence: { type: "Numeric", nullable: true }

}

});

var vm = kendo.observable({

productSalesContacts: new kendo.data.DataSource({

transport: {

read: {

url: "/Services/Contacts.asmx/ProductSales",

dataType: "json",

type: "POST",

contentType: "application/json; charset=utf-8"

},

schema: {

data: "d",

model: Staff

}

})

});

</script>

Good luck:
Phil

ListView (Mobile)

asked on 10 Jan 2013

0 answers

77 views

DataSource binding of ListView

Hi:

I would like to share some code. This is a MVC application accessing web-server that is returned as json:

@{

ViewBag.Title = "Home Page";

}

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

<div class="mm-contact">

<span class="mm-title" data-bind="text: Title"></span><br />

<span data-bind="text: FirstName"></span> <span data-bind="text: LastName"></span><br />

Extension: <span data-bind="text: Extension1"></span><br />

mail: <span data-bind="text: Email"></span>

</div>

</script>

<div id="ProductSales" data-role="view" data-model="vm" data-layout="default" data-title="Product Sales">

<header data-role="header">

<div data-role="navbar">Product Sales</div>

</header>

<div id='lv' data-role="listview" data-bind="source: productSalesContacts" data-template="contact-template"></div>

</div>

<script type="text/javascript">

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

id: "ID",

fields: {

// data type of the field {Number|String|Boolean|Date} default is String

ID: { type: "Numeric", editable: false, nullable: true },

LastName: { type: "String", validation: { required: true } },

FirstName: { type: "String", validation: { required: true } },

Title: { type: "String" },

City: { type: "String" },

State: { type: "String" },

Email: { type: "String" },

Phone1: { type: "String" },

Extension1: { type: "String" },

Sequence: { type: "Numeric", nullable: true }

}

});

var vm = kendo.observable({

productSalesContacts: new kendo.data.DataSource({

transport: {

read: {

url: "/Services/Contacts.asmx/ProductSales",

dataType: "json",

type: "POST",

contentType: "application/json; charset=utf-8"

},

schema: {

data: "d",

model: Staff

}

})

});

</script>

Good luck:
Phil

ListView (Mobile)

asked on 10 Jan 2013

0 answers

125 views

data-show && Cannot read property 'e.dataItem.foo' of undefined

Hi,
The scenario is a div container with data-show="functionW"
In this function I make a request to the server with some parameters from a previous view and result is shown as a listview.
$("#listview").kendoMobileListView({
dataSource : dataSource,
click: function(e) {
alert(e.dataItem.foo);
}
});

Fist time everythink works fine, but when the listview is refreshed, the listview show correcty but click function show this error on console: Uncaught TypeError: Cannot read property 'foo' of undefined
The listView changes with some parameters, so I cant use data-init instead of data-show.
I have tried with data-click="functionW" from button of the previous form and same behaviour.
Anyone can light me??

ListView (Mobile)

asked on 09 Nov 2012

0 answers

304 views

kendomobilelistview button click event fire twice

Hi,

i am facing some stupid problem. i have try lots other way but i am not getting success.

i am using kendomobilelistview with template binding with $.ajax every thing working fine but button click event fire on time then if refresh data(using endlessScroll) then button event fire twice and again refresh listview then click on button then fire three time event. if we do same process again then again fire 4 event.

if refresh list view then continue increase event again and again.

dataSource with service

var JobActionItemDataSource = new kendo.data.DataSource({

pageSize: 15,

serverPaging: true,

transport: {

read: function (options) {

window.kendoMobileApplication.showLoading();

$.ajax({

url: urlstring + "GetJobTaskByEmployeeID",

data: {

UserID: JSON.stringify(localStorage.getItem("AuthorizedUserId")),

CompanyType: JSON.stringify($('#radio_Marketing').attr('checked') ? 1 : 0),

PageSize: options.data.pageSize,

PageNumber: JobActionItemPageIndex

},

dataType: "jsonp",

success: function (result) {

options.success(result.d);

JobActionItemPageIndex += 1;

}

});

},

data: function (response) {

alert(response.d);

return response.d;

}

});

init function

// view design here

<div data-role="view" data-title="Action items" id="view-actionitems" data-init="init_ActionItemsLanding"

data-show="show_ActionItemsLanding">

<header data-role="header">

<div>

<img src="img/CompanyLogo.png" width="100px" height="34px" />

<a class="km-rightitem" data-rel="popover" href="#popover-actionitems" data-role="button">Jump To</a>

<a class="km-rightitem" data-click="Logout" data-role="button">Logout</a>

</div>

</header>

<ul id="endlessscrolling-JobActionItemsBinding">

</ul>

</div>

/// script code

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

<div class="tweet">

<div class="notesmessage">

<span >

#if(JobID!=0){#

<div> <a id=

"WorkFlowTaskId=#=WorkFlowTaskId#&RequiredCompletionActionID=#=RequiredCompletionActionID#&JobID=#=JobID#&TaskID=#=TaskID#"

data-role="button" class="km-button" data-click="GoActionitemcompleteevent"

style=

"width:auto; background: none repeat scroll 0 0 transparent;box-shadow: none;color: blue;margin-left: 0;text-decoration:underline;padding: 5px;width: auto;text-align: left;"

>#= Task #</a></div>

<br/>

#=DueTimeFrameColorFormat#

#} else{#

#= Task # <br/>

#}#

#= DueTimeFrame # </span>

<div style="text-align: center;">

#if(JobID!=0){#

<a id="#=JobID#" data-role="button" data-click="job_jobdetails" style="width:145px;padding: 5px;" >#= JobNumber # </a>

<a name="0" id=

"WorkFlowTaskId=#=WorkFlowTaskId#&RequiredCompletionActionID=#=RequiredCompletionActionID#&JobID=#=JobID#&TaskID=#=TaskID#"

data-role="button" data-click="GoActionitemcompleteevent" style="width:70px;padding: 5px;" >Complete</a>

<br/> #}#

<a id="#=CustomerID#&Type=#=CustomerType#" data-role="button" data-click="GotoViewContactInformation" style="width:145px;padding: 5px;" ><span style="font-size: 0.8em; font-style:italic;">#= EmployeeName #</span></a>

#if(JobID!=0){#

<a id="ID=#=JobID#&JobNumber=#=JobNumber#" data-role="button" data-click="GoToViewJobAddActionItems" style="width:70px;padding: 5px;" >Add</a>

#}else{#

<a id="ID=#=CustomerID#&Type=#=CustomerType#&ContactName=#=EmployeeName#" data-role="button" data-click="GoToViewAddMarketingActionItem" style="width:70px;padding: 5px;" >Add</a>

#}#

</div>

</script>

// init function

function init_ActionItemsLanding(e) {

$("#endlessscrolling-JobActionItemsBinding").kendoMobileListView({

dataSource: JobActionItemDataSource,

template: kendo.template($("#endlessscrolling-JobActionItemsBinding-template").text()),

endlessScroll: true,

scrollTreshold: 30

});

}

// show funciton

JobActionItemPageIndex = 1;

var refreshJobActionItems = $("#endlessscrolling-JobActionItemsBinding").data("kendoMobileListView");

refreshJobActionItems.dataSource.read(1);

refreshJobActionItems.refresh();

thanks,

Raghw

ListView (Mobile)

asked on 25 Oct 2012

0 answers

90 views

Endless Scrolling: Invalid template: <a href ...</a>

Hi everyone!

I have this endless scrolling component but in my case I want to make every <li> clickable, so i designed this template:

...
<script id="endless-scrolling-template" type="text/x-kendo-template">
<a href="#overview-account">
<div id="parent">
<div class="img-div">
<img src="../../content/mobile/overview/nairobi.jpg" />
</div>
<div class="name-div">random_string</div>
<div class="url-div">random_string</div>
<div class="dist-div">random_string</div>
</div>
</a>
</script>

But when the page is rendered nothing is displayed...

If I remove the <a tag like this:
...
<script id="endless-scrolling-template" type="text/x-kendo-template">
<div id="parent">
<div class="img-div">
<img src="../../content/mobile/overview/nairobi.jpg" />
</div>
<div class="name-div">random_string</div>
<div class="url-div">random_string</div>
<div class="dist-div">random_string</div>
</div>

...everything is ok but the elements are not clickable :/

This is the exception:
Thank you all!

Uncaught Error: Invalid template:'<li data-uid="#=uid#"> <a href="#overview-account"> <div class="parent"> <div class="img-div"> <img src="../../content/mobile/overview/nairobi.jpg" /> </div> <div class="name-div">random_string
</div> <div class="url-div">random_string
</div> <div class="dist-div">random_string
</div> </div> </a> </li>' Generated code:'var o,e=kendo.htmlEncode;with(data){o='<li data-uid="'+(uid)+'">\n <a href="';overview-account"> <div class="parent"> <div class="img-div"> <img src="../../content/mobile/overview/nairobi.jpg" /> </div><div class="name-div">random_string
</div><div class="url-div">random_string
</div> <div class="dist-div">random_string
</div> </div> </a> </li>;o+=;}return o;'

ListView (Mobile)

asked on 24 Oct 2012

0 answers

61 views

Endless scroll won't work on GET twitter user_timeline!

Hi,

I'm trying to get a user's timeline from twitter and display it in a list view. Currently I have a list view that displays the first 10 tweets in a user's timeline. However the endless scrolling feature doesn't work! No animation is shown when you get to the bottom of the page and no call to twitter is made via http request either (I have looked using wireshark). Below is my source code:

function loadTwitterFeed() {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://api.twitter.com/1/statuses/user_timeline.json", // the remove service url

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

},

parameterMap: function(options) {

return {

screen_name: "USER_NAME",

count: 10,

since_id: options.since_id, //additional parameters sent to the remote service

max_id: options.max_id //additional parameters sent to the remove service

};

}

});

$("#twitter-feed").kendoMobileListView({

dataSource: dataSource,

template: $("#twitter-template").text(),

appendOnRefresh: true,

pullToRefresh: true,

//addition parameters which will be passed to the DataSource's read method

pullParameters: function(item) { //pass first data item of the ListView

return {

since_id: item.id_str

};

},

endlessScroll: true,

//addition parameters which will be passed to the DataSource's next method

endlessScrollParameters: function(firstOrigin) {

if (firstOrigin) {

return {

max_id: firstOrigin.id_str

};

}

});

}

It is similar to the twitter search demo but I have removed the serverPaging from the code as Twitter is getting rid of pages soon and is instead only using max_id and since_id. I've searched the documentation with no luck, it should work!

Does anybody know what's wrong?

Thanks,
Thomas

Link to twitter page on user_timeline: https://dev.twitter.com/docs/api/1/get/statuses/user_timeline

Example Json request which works when copied and pasted into browser (just replace USER_NAME with valid one): http://api.twitter.com/1/statuses/user_timeline.json?screen_name=USER_NAME&count=10

ListView (Mobile)

asked on 23 Oct 2012

0 answers

90 views

ListView inside of the Detail Template of the ListView

My applicartion has a ListView which has a detail view similar to "Sushi" app.

I need to add an array of images instead of singe image in my detail view which is implemented as template similar to sushi app again.

Can you provide me a pointer how this can be implemented,
Btw, I tried to find a span(place holder) and replace html using jquery, but it did not work.

Thanks

ListView (Mobile)

asked on 21 Sep 2012

0 answers

237 views

Data Binding using json in ListView

Hi...I saw some examples on the internet regarding data binding using json in ListView but those things are not working in my case. I have a Controller named "Contact" and there is method named "Read", in Read () method I get the Contact list which I want to show in ListView in Mobile. Here is my View Code...

<div data-role="view" id="tabstrip-profile" data-title="Dashboard" data-layout="mobile-tabstrip"
data-init="initListView">
<ul data-role="listview" data-style="inset" data-type="group">
<li>
<ul id="contactList">
</ul>
</li>
</ul>

</div>
<script type="text/javascript">
var deviceJDS = new kendo.data.DataSource({
transport: {
read: {
contentType: "application/json; charset=utf-8",
type: "GET",
data: "{}",
dataType: "json",
url: "/Contact/Read"
}
},
schema: {
data: "d"
}
});

function initListView(e) {
e.view.element.find("#contactList").kendoMobileListView({
template: "<strong>#:data.DisplayName#</strong>",
dataSource: deviceJDS
});
}

var app = new kendo.mobile.Application(document.body);

</script>

ListView (Mobile)