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>
eCustomer Messages link on the index page (messages/listall), the # is added automatically to the URL and is causing issues. 