Questions on Kendo UI for jQuery Forum

0 answers

64 views

How to place button/dropdown menu on Chart's layout?

Please suggest how can I place button/dropdown menu on Chart's layout? it can be on the top left and right corners of the chart.

Thanks!

Charts

asked on 13 Apr 2012

1 answer

149 views

Column Header Text

Hi,

I had approximately 10 columns in my grid. With different headings i want to see the complete heading i.e for example i had "Reference" as heading it appears as "Ref.." ad well as the data in the column also but i want to see the complete header as "Reference" as well as the data in the column also... How is it possible?

Grid

answered on 13 Apr 2012

1 answer

194 views

Problems with DataSource - Incorrect Posts

I am trying to make an application which adds rows to a sub-grid by selecting a row from another grid, and then programatically adding a row to the sub-grids datasource. Visually this works beautifully, but the datasource triggers some weird events which I can't explain. In the attached code, I am referring to the Grid and datasource generated from the detailInit function. So there are 2 situations which happen:
1. If I include the id in the model then the Create event doesn't fire.
2. If I dont include the id in the model then the datasource triggers Posts for all the existing rows in the subgrid.

I've attached an image of the page and the source below (sorry its a little massive). Any tip you can give would be greatly appreciated.

<!DOCTYPE html>
<html>
<head>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="styles/SwitchMetro.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<title>Installation Users</title>
</head>
<body >
<table style="width:100%;">
<tr>
<td>
<table id="Users">
<thead>
<tr>
<th data-field="UserID">ID</th>
<th data-field="UserName">Name</th>
<th data-field="ShortName">Short Name</th>
<th data-field="Email">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td ></td>
<td >Isabella</td>
<td>Issy</td>
<td>IDarlington@SwitchAutomation.com</td>
</tr>
<tr>
<td ></td>
<td>Angus</td>
<td>Gus</td>
<td>GDarlington@SwitchAutomation.com</td>
</tr>
</tbody>
</table>
</td>
<td align="center" width="80">
<table width="80">
<tr>
<td style="vertical-align: center; horiz-align: center" >
<input id="AddInstallationButton" type="button" value="<<" onclick="return AddInstallationButton_onclick()" />
</td>
</tr>
<tr>
<td style="vertical-align: center; horiz-align: center">
<input id="RemoveInstallationButton" type="button" value=">>" onclick="return RemoveInstallationButton_onclick()" />
</td>
</tr>
</table>
</td>
<td >
<table id="Installations">
<thead>
<tr>
<th data-field="InstallationID" style="visibility: hidden">ID</th>
<th data-field="InstallationName">Name</th>
</tr>
</thead>
<tbody>
<tr>
<td ></td>
<td >The Rakey Tower 1</td>
</tr>
<tr>
<td ></td>
<td >The Rakey Tower 2</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>


<script>
var selectedInstallation = null;
var selectedUser = null;
$(document).ready(function () {

NewGuid();

$("#Users").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://localhost:17760/SwitchDataService.svc/Users",
//read: "http://odata-staging.switchautomation.com/OSwitch.svc/Users",
dataType: "jsonp"
},
schema: {
model: {
fields: {
UserID: { type: "guid", editable: false },
UserName: { type: "string", editable: true, validation: { required: true} },
ShortName: { type: "string", editable: true, validation: { required: true} },
Email: { type: "string", editable: true, validation: { required: true} }
}
}
},
batch: true,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
filter: [
{ field: "UserName", operator: "ne", value: "Administrator" },
{ field: "UserName", operator: "ne", value: "Server" }
]
},
height: 600,
// toolbar: ["create", "save", "cancel"],
editable: true,
filterable: true,
sortable: true,
scrollable: { virtual: true },
selectable: "multiple",
detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
}
});

function detailInit(e) {
$("<div id='div_" + e.data.UserID + "' />").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: {
url: "http://localhost:17760/SwitchDataService.svc/UserInstallations?$expand=Installation&$filter=UserID eq guid'" + e.data.UserID + "'",
dataType: "json"
},
create: {
url: "http://localhost:17760/SwitchDataService.svc/UserInstallations",
dataType: "json"
},
destroy: {
url: function (data) {
console.log(data);
return "http://localhost:17760/SwitchDataService.svc/UserInstallations" + "(" + data.UserInstallationID + ")";
}
},
parameterMap: function (options, type) {
var ret;
console.log(type);
switch (type) {
case "read":
ret = kendo.data.transports["odata"].parameterMap(options, type);
break;
case "destroy":
ret = kendo.data.transports["odata"].parameterMap(options, type);
break;
case "create":
{
ret = kendo.stringify(
{ UserInstallationID: options.UserInstallationID,
InstallationID: options.InstallationID,
UserID: options.UserID
});
console.log(options);
break;
}
default:
ret = kendo.data.transports["odata"].parameterMap(options, type);
break;
}
return ret;
}
},
schema: {
model: {
fields: {
UserInstallationID: { editable: false, type: "guid" },
InstallationID: { type: "guid" },
UserID: { type: "guid" }
}
}
},
serverSorting: true,
serverFiltering: true,
batch: false
},
scrollable: false,
selectable: "true",
columns: [
{ field: "Installation.InstallationName", title: "Installation Name", width: 100 },
{ field: "InstallationID", title: "Installation ID", width: 100 }
]
});
}

$("#Installations").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://localhost:17760/SwitchDataService.svc/Installations",
dataType: "json"
},
schema: {
model: {
fields: {
InstallationID: { type: "guid", editable: false, validation: { required: true} },
InstallationName: { type: "string", editable: false, validation: { required: true} }
}
}
},
batch: false,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 600,
editable: true,
filterable: true,
sortable: true,
scrollable: { virtual: true },
selectable: "true"
});
});

function AddInstallationButton_onclick() {
var usersGrid = $('#Users').data('kendoGrid');
var selectedUserItem = usersGrid.select();
var selectedUser = usersGrid.dataItem(selectedUserItem);

var installationsGrid = $('#Installations').data('kendoGrid');
var selectedItem = installationsGrid.select();
var selectedInstallation = installationsGrid.dataItem(selectedItem);

if (selectedUser != undefined && selectedInstallation != undefined)
{
var detailDiv = $('#Users').find('tr.k-master-row.k-state-selected').next('tr.k-detail-row').find('div.k-grid.k-widget');
var detailGrid = detailDiv.data('kendoGrid');

var dataSource = detailGrid.dataSource;
dataSource.add({ UserInstallationID: nextGuid, InstallationID: selectedInstallation.InstallationID, UserID: selectedUser.UserID, Installation: { InstallationID: selectedInstallation.InstallationID, InstallationName: selectedInstallation.InstallationName} });
NewGuid();

dataSource.sync();
}

}

function RemoveInstallationButton_onclick() {
var detailDiv = $('#Users').find('tr.k-master-row.k-state-selected').next('tr.k-detail-row').find('div.k-grid.k-widget');
if (detailDiv != undefined) {
var detailGrid = detailDiv.data('kendoGrid');
var selectedRow = detailDiv.find('tr.k-state-selected');
if (selectedRow != undefined) {
detailGrid.removeRow(selectedRow);
detailGrid.saveChanges();
}
}
}

var nextGuid;
function NewGuid() {
$.get('http://localhost:17760/SwitchDataService.svc/NewGuid?$format=json', function(data) {
nextGuid = data.d.NewGuid;
});
}

</script>
</body>
</html>
Thanks

Data Source

answered on 13 Apr 2012

2 answers

65 views

New in kendo mobile and needs some support

Hello,

I am new in kendo mobile, and we are asking for support in some questions:

1- We are trying to use an input of type = 'search', like the one used in the demo http://demos.kendoui.com/mobile/application/forms.html but the delete icon at the right of the input field is not displayed on the android emulator, also we tried on a real android device and it is not displayed.

2- Is there a support for dialogs/pop-ups in kendo mobile? We need to simulate something like the “share photos” button in the jquery docs http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-dialogs.html

3- We are using custom templates/data sources to bind a list view to simulate a similar scenario like the “Sushi” demo, for the details template, there will be another list view.

It means that the json object to be bind to the first level list view will be something like that:

[

item1: {property1:value1,

property2:[propertyA:valueA, propertyB:valueB]

},

item2: {property1:value2,

property2:[propertyA:valueA, propertyB:valueB]

}

]

but it seems that the list view used in the details view to list the 'property2' value, is not working well, any suggestions?

Thanks

General Discussions

answered on 13 Apr 2012

1 answer

186 views

MVVM JSONP Update WCF service

I have a WCF service that supports JSONP for CRUD operations as I use it with Sencha Touch (only mention this to confirm it works). Now I build an MVVM Mobile app that I very pleased except my CRUD update throws on the server side. My Datasource looks like:

var ds = kendo.data.DataSource.create({

schema: schema,

transport: {

read: {

url: myserver + "/getcontacts",

dataType: "jsonp"

},

update: {

url: myserver + "/UpdateContact",

dataType: "jsonp"

},

}

});

I have an save button that triggers update method on the viewmodel for my edit view:

<div data-role="view" id="Edit" data-transition="slide" data-layout="default" data-model="detailViewModel" >

<header data-role="header">

<div data-role="navbar">

<a data-role="backbutton" data-align="left">Back</a>

<span data-role="view-title">Item</span>

<button class="about-button" data-bind="click: update, enabled: hasChanges">Save</button>

<!--  <a class="about-button" data-align="right"   data-role="button" data-bind="click:update, enabled: hasChanges">Save</a>-->

</div>

</header>

<div data-role="content">

<ul data-role="listview" data-style="inset" data-type="group">

<li>

Contact

<ul>

<li>

<input type="text" data-bind="value: currentItem.FullName" />

FullName

</li>

</ul>

</li>

<li>

Phone

<ul>

<li> <input type="tel" data-bind="value: currentItem.Homephone"/>Home</li>

<li> <input type="tel" data-bind="value: currentItem.Cellphone"/>Home</li>

</ul>

</li>

</ul>

</div>

//detail view model

var detailViewModel = kendo.observable({

currentItem: null,

hasChanges: true,

change: function () {

this.set("hasChanges", true);

},

update: function () {

ds.sync();

}

});

Must say I love this Viewmodel stuff as it makes progamming in Javascript feel good! As u can see the update just calls sync() which generates the JSONP call ro the server. u are correctly doing a GET as JSONP will not allow a POST but my service call which looks like:

[OperationContract]

[WebGet(ResponseFormat = WebMessageFormat.Json)]

void UpdateContact(string jsonData);

implementation:

public void UpdateContact(string jsonString)

{

if (jsonString.Length == 0)

return;

Now I have a breakpoint on the first line and jsonString is null. If I look at the HTTP request in Fiddler it is:

http://127.0.0.1/Contacts/Service1.svc/UpdateContact?callback=jQuery17107894782717339694_1334252488498&Cellphone=(352)+359-8882&FullName=chris+gaynor&HomeAddress=null&Homephone=555555&email=cgaynor8%40bellsouth.net&_=1334252736709

the same update from Sencha results in the JsonString containing the changed object in the WCF method:

http://127.0.0.1/Contacts/Service1.svc/UpdateContact?jsonData=%7B%22id%22%3A76%2C%22FullName%22%3A%22connie%20dixon%22%2C%22email%22%3A%22jmcfet%40bellsouth.net%22%2C%22Cellphone%22%3A%22727%22%2C%22Homephone%22%3A%22777777%22%7D&callback=Ext.util.JSONP.callback

General Discussions

answered on 13 Apr 2012

0 answers

81 views

Navigate to external file from TabStrip view - and show it within the TabStrip in Phonegap

when navigate to another file from within my tabstrip view the page is load took long time when page loaded it shows empty screen after taking long time the page is loaded

Here is the tabstrip code in default.html

<div data-role="footer">

<div data-role="tabstrip">

<a href="#Home" data-icon="home">Home</a>

<a href="External.html" data-icon="info">Details</a>

</div>

TabStrip (Mobile)

asked on 13 Apr 2012

0 answers

86 views

Accessing certain grid detail when adding children

Hi,

I am using kendo ui, and having a problem with kendo grid.
The grid is used with a datasource and has a structure like:

var productsGrid = $("#productsGrid").kendoGrid({
dataSource: productsDataSource,
scrollable: {
virtual: true
},
sortable: true,
selectable: false,

detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
columns:
[
{ width: "80px", template: "<a href='javascript:deletAssetClass(\"#=uid#\")'>delete</a>" },
{ field: "Name", title: "Name" }
]
});
where productDataSource is

var productDataSource
= new kendo.data.DataSource({
transport:
{
read: {
url: "api/Products",
contentType: "application/json; charset=utf-8",
dataType: "json"
}
},
schema: {
model: Product
}
});

and Product schema is :
var AssetClass = kendo.data.Model.define({
id: "Id",
fields: {
Id: { editable: false, nullable: true },
Name: { editable: false, nullable: true },
}
});

I have a button below the grid, and when click it I call in javascript:
productsGrid.add({ id: "prodId", Name: "ProductName"});
productsGrid.sync();

and a row with the new product is added to the grid on the UI. That is the expected result (to be displayed only on gui, a SAVE in the database will be made with all added products when pressing another button below the grid), and it works.

The problem arises when I want to add (the same way) a item to this product. The item is described below, in the detail of the grid.

Template is:
<script type="text/x-kendo-template" id="template">
<div class="items"/>
Add new item to product
<br/>
Type:
<div class="securityType"></div>
<input id="itemHiddenImput" type="hidden" value="${data.productId}" /> // <--------------
<input id="itemName" type="text" style="width=60px;"/>
<button onclick="addItem();"> Add Item</button
</script>

I have another source for the items of the products of course, but when calling AddItem() in javascript, I need somehow to know to what product this item belongs (in which product I want to add it).
Here comes the question: I couldn't find a way to get the corresponding product to which I add the item, when pressing the button on the template, when calling addItem.

Does anyone have a idea ?
Thank you

Grid

asked on 13 Apr 2012

5 answers

477 views

Manually Paging / attach to paging event

Is there an easy way (without changing the kendo-UI Files) to do the paging in my grid on my own.
I need to do so because I'm using a toolkit for receiving my requested data via REST calls. I am not able to use the automatic odata databinding because the Service is a WCF Svc and it does not support $callback and $format parameters and I am not able to extend this wcf service.

So I make a call for getting the next 50 Items which I want to bind to the grid on 1 page.

It would be great if I can give the grid a function pointer for paging.

Thanks

Grid

answered on 13 Apr 2012

1 answer

88 views

Implementing an controller action for Grid paging

I think I might be missing the main documentation.

Is there documentation explaining how to implement an ajax controller handling grid data to be paged? The same for sorting and filtering? It seems like this should be clear in the docs (either here or here), but I don't see it. Am I missing the complete docs?

Basically, I need to know how to write (i.e. what parameters I should accept and what I need to return) an ajax controller action that will handle paging, sorting, and filtering. For example, what page we are on, how many pages are left, filters, etc...

I looked through the walkthrough as well, but didn't see anything handling these issues.

Thanks

Grid

answered on 12 Apr 2012

0 answers

93 views

Appending data

I want to give users an option to load n more records once they've scrolled to the bottom of a ListView. I have a very large dataset and have set serverFiltering: true, serverPaging: false, serverGrouping: true, serverSorting: true. What's the best way to approach this? My ListView is currently bound to the datasource. I'm thinking about instead declaring a local data object and using datasource's change event to append data to that local data object and purge as necessary (from the beginning once record set reaches a certain point).

Is there a more elegant approach that I am missing? It sounds as if ListView's appendOnRefresh option is going to work the opposite way that I would like (pulling down to put data on top, whereas I want to scroll down and then click to append data on bottom).

Help appreciated

Data Source

asked on 12 Apr 2012