Questions on Kendo UI for jQuery Forum

6 answers

239 views

Is there any documentation on the Model? I see it for DataSource, but I know there are things involved, but I cannot find a good source of info on it. Such as things we can decorate the individual fields with...

Data Source

answered on 13 Apr 2012

4 answers

1.6K+ views

TreeView.select(node) does not trigger select event

When I programmatically select a node using the select(node) method, the select event handler (applied when the TreeView was created) does not get called.

TreeView

answered on 13 Apr 2012

2 answers

148 views

ToolTip in Grid Column

Hi,

Q: Is it possible to create tooltip for the column in grid by setting some property? if there is no property then how can we achieve that?
Q: Can we add row with data in grid? (Empty row insertion is there but i want to add a row with data)
Q: Can we adjust the width of grid column by setting (ex: width: adjustable) property?

Please post me the answer on my id mahaveer_agrawal@infosys.com.

Regards
Mahaveer
mahaveer_agrawal@apple.com

Grid

answered on 13 Apr 2012

0 answers

67 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

156 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

195 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

190 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