or
I am using the Grid with remote data, but client side paging/filtering/sorting. The data source is pre-filtered, and setup as follows:
var
dataSource =
new
kendo.data.DataSource({
error:
function
(e) {
alert(e.errors);
},
filter: {
field:
"CreatorADGuid"
,
operator:
"eq"
,
value:
'@ViewBag.UserId'
},
pageSize: 40,
batch:
true
,
transport: {
read: {
url:
"/api/project/"
,
dataType:
"json"
},
update: {
url:
"/api/project/"
,
type:
"POST"
,
dataType:
"json"
},
create: {
url:
"/api/project/"
,
type:
"PUT"
,
dataType:
"json"
}
},
schema: {
data:
"Body"
,
total:
function
(response) {
return
response.Body.length;
},
model: {
id:
"Id"
,
fields: {
Id: {
type:
"string"
,
defaultValue: Constants.emptyGUID
},
Title: {
type:
"string"
,
validation: {
required:
true
},
editable:
true
},
ScheduAllId: {
type:
"string"
,
editable:
true
},
CreatorDisplayName: {
type:
"string"
,
editable:
false
},
CurrentStatusDate: {
type:
"string"
,
defaultValue:
'@DateTime.Now.ToShortDateString()'
,
editable:
false
}
}
},
errors:
"MessageDetails"
}
});
$(
"#project-grid"
).kendoGrid({
dataSource: dataSource,
toolbar: kendo.template($(
"#project-toolbar-template"
).html()),
pageable:
true
,
height: $(
'body'
).height(),
sortable: {
mode:
"multiple"
,
allowUnsort:
true
},
filterable:
true
,
columns: [
{
field:
"Title"
,
title:
"Title"
,
template: kendo.template($(
"#project-title-template"
).html())
},
{
field:
"ScheduAllId"
,
title:
"ScheduAllId"
,
width:
"20%"
},
{
field:
"CreatorADGuid"
,
title:
"Creator"
,
template :
'#= CreatorDisplayName #'
,
width:
"20%"
},
{
field:
"CurrentStatusDate"
,
title:
"Created Date"
,
width:
"20%"
,
format:
"{0:dd/MM/yy}"
},
{
command: [
"edit"
],
title:
" "
,
}],
editable: {
mode:
'popup'
,
template: kendo.template($(
"#project-edit-template"
).html()),
},
edit:
function
(e) {
var
editWindow = e.container.data(
"kendoWindow"
);
if
(e.model.isNew()) {
e.container.data(
"kendoWindow"
).title(
'Add New Project'
);
}
else
{
e.container.data(
"kendoWindow"
).title(
'Edit Project'
);
}
}
});
<
table
id
=
"comments"
>
<
tr
>
<
th
data-field
=
"module"
></
th
>
<
th
data-field
=
"author"
></
th
>
<
th
data-field
=
"date"
></
th
>
<
th
data-field
=
"comment"
></
th
>
<
th
data-field
=
"status"
></
th
>
</
tr
>
</
table
>
$(
"#comments"
).kendoGrid();
<
div
data-role
=
"view"
data-title
=
"Control Panel"
>
<
div
data-role
=
"header"
>
<
a
data-role
=
"backbutton"
>Back</
a
>
</
div
>
<?
php
if (isset($error)){ echo '<p
style
=
"color:red"
>Error: '. $error .'</
p
>';} ?>
<
ul
data-role
=
"listview"
data-style
=
"inset"
>
<
li
><
a
href
=
"messages/listall"
>Customer Messages (<?=$unread_messages?>)</
a
></
li
>
</
ul
>
<
script
>
var listView = $("#listView").kendoMobileListView({
pullToRefresh: true,
appendOnRefresh: true
});
</
script
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
href
=
"index"
data-icon
=
"/mobile_kendo/"
>Home</
a
>
<
a
href
=
""
data-icon
=
"refresh"
>Refresh</
a
>
<
a
href
=
"settings"
data-icon
=
"settings"
>Settings</
a
>
</
div
>
</
div
>
</
div
>
<
script
>
var app = new kendo.mobile.Application($(document.body), {
icon: "URL to a web clip icon"
});
</
script
>
<
div
data-role
=
"view"
data-title
=
"Control Panel"
>
<
div
data-role
=
"header"
>
<
a
data-role
=
"backbutton"
>Back</
a
>
</
div
>
<
h2
>Messages</
h2
>
<
table
>
<?
php
echo $unread_messages . ' - unread messages'; ?>
<
tr
>
<
th
>From</
th
><
th
>Intro</
th
><
th
>Date</
th
><
th
>Status</
th
>
</
tr
>
<?
php
foreach ($messages as $message):?>
<?
php
if ($message->isnew == 1){ ?>
<
tr
style
=
"font-weight:bold"
>
<?
php
} else { ?>
<
tr
>
<?
php
} ?>
<
td
><?=$message->customer_name?></
td
><
td
><
a
href="messages/view/<?=$message->id?>"><?=$message->message?></
a
></
td
><
td
><?=$message->created?></
td
><
td
><?=$message->isnew?></
td
>
</
tr
>
<?
php
endforeach?>
</
table
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
href
=
"index"
data-icon
=
"/mobile_kendo/"
>Home</
a
>
<
a
href
=
""
data-icon
=
"refresh"
>Refresh</
a
>
<
a
href
=
"settings"
data-icon
=
"settings"
>Settings</
a
>
</
div
>
</
div
>
<
script
>
var app = new kendo.mobile.Application($(document.body), {
icon: "URL to a web clip icon"
});
</
script
>
<
div
data-role
=
"view"
data-title
=
"Control Panel"
>
<
div
data-role
=
"header"
>
<
a
data-role
=
"backbutton"
>Back</
a
>
</
div
>
<
h2
>Message</
h2
>
<
p
>Date: <?=$message->message->created?></
p
>
<
p
>From: <?=$message->message->customer_name?></
p
>
<
p
>Email: <
a
href="mailto:<?=$message->message->email?>" target="_blank"><?=$message->message->email?></
a
></
p
>
<
p
>Telephone: <?=$message->message->customer_telephone?></
p
>
<
p
>Location IP:<?=$message->message->ip?></
p
>
<
p
>Message: <?=$message->message->message?></
p
>
<
p
><
a
href="../markasread/<?=$message->message->id?>/0">Mark as unread</
a
> | <
a
href="../delete/<?=$message->message->id?>">Delete</
a
></
p
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
href
=
"index"
data-icon
=
"/mobile_kendo/"
>Home</
a
>
<
a
href
=
""
data-icon
=
"refresh"
>Refresh</
a
>
<
a
href
=
"settings"
data-icon
=
"settings"
>Settings</
a
>
</
div
>
</
div
>
</
div
>
<
script
>
var app = new kendo.mobile.Application($(document.body), {
icon: "URL to a web clip icon"
});
</
script
>
e
Customer Messages
link on the index page (messages/listall), the # is added automatically to the URL and is causing issues.