Questions on Kendo UI for jQuery Forum

0 answers

73 views

Unable to view grid data component in firefox 3.0.19 version.

Unable to view grid data component in firefox 3.0.19 version.
i am using Kendo UI v2011.3.1129 version.

Please assist me.

Thanks in Advance.

Grid

asked on 13 Apr 2012

0 answers

128 views

Datasource.add and observableObject overridden

Hi,

I've been using the last version with the MVVM and new DataSource, and I have a problem when adding an entity to a remote DataSource.

After sending the ajax request for adding a new entity, the response is merged with the entity.
This is done in dataSource._accept :

  if (type !== "destroy") {

                    models[idx].accept(response[idx]);

But the Model.accept will extends the model and will override all observable fields by the response from the server.
I have to modify the Model.accept method like this :
if (that instanceof ObservableObject) {
that.init(data);
} else {
extend(that, data);
if (that.idField) {
that.id = that.get(that.idField);
}
}

After the modification, my code works but I strongly believe it's not the good way.

Thanks in advance,

Laurent.

Data Source

asked on 13 Apr 2012

0 answers

81 views

Unable to display Grid data component in firefox 3.0.19 version.

Unable to display Grid data component in firefox 3.0.19 version.
i am using Kendo UI v2011.3.1129 version.

Please assist me.

Thanks in Advance.

Grid

asked on 13 Apr 2012

0 answers

94 views

Kendo grid blowing up when properties have spaces

Hello-

I'm trying to use Kendo grid and so far it's pretty good. The one thing I don't heart about it is that when you do

$("#mydiv").kendoGrid( { dataSource: myJsonObjects })

it takes the explicit property name. For a good user experience, CamelCasing isn't awesome. Instead, I'd like to have my columns in English, so I would not want
"AccountName" and "ThisIsAColumnThatIsHardToRead"
but rather
"Account Name" and "This Is a Column That Is Easy To Read".

So I walk my JSON objects and insert spaces in the property names (this is unusual but 'legal' in Javascript). But when I hand this revamped object list to Kendo, I get an error:

Invalid template: '<tr><td>#=Account

Name"</td><td>#=This Is A Column That Is Easy To

Read</td></tr>'enerated code:'var

o,e=kendo.htmlEncode;with(data){o='<tr><td>'+(Account Name)

+'</td><td>' + (This Is A Column That Is Easy To Read) +

'</td></tr>';>return o;'

Grid

asked on 13 Apr 2012

6 answers

266 views

Model Documentation

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.7K+ views

[Solved] 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

177 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

84 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

178 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

233 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