Questions on Kendo UI for jQuery Forum

1 answer

164 views

Hardware Button events on Android

The four buttons found on Android phones. How do I handle events related to those buttons?

Button (Mobile)

answered on 15 Jul 2012

2 answers

651 views

Update Cancel Template in Grid

I need to make more room for columns in my grid, so I am trying to change from big buttons for edit, delete, update and cancel to icons. I can get all of the icons to show right with a little CSS

/* Grid Buttons, remove background and change icon */
span.k-delete {
    background: url("../images/Delete.gif") center center;
}
span.k-edit {
    background: url("../images/Edit2.png") center center;
}
span.k-update {
    background: url("../images/save.gif") center center;
}
span.k-cancel {
    background: url("../images/cancel.png") center center;
}
.k-grid .k-button-icontext .k-icon {
    margin: 0;
    vertical-align: middle;
}
.k-grid tbody .k-button {
    min-width: 22px;
    width: 22px;
    background:none;
    border:0px;
}

plus the column def of:

                        command: [{ name: "edit", text: "" }, { name: "destroy", text: "" }, { name: "update", text: "" }, { name: "cancel", text: ""}],
                        title: "",
                        width: 100
                    }

The problem is all four of the buttons show when the grid is not in edit more (inline) and only the update and cancel show when in the edit mode, but they show with the text. Meaning the CSS is working, but the column def isn't doing anything during edit mode.

How do I setup one set of command columns for edit mode and one set for non-edit mode.

What I currently have can be seen here:
http://jsfiddle.net/randyallen/Kfdmh/1/

A little better, no save button while not in edit mode:
http://jsfiddle.net/randyallen/Kfdmh/2/

Also is there a way of getting rid of the row level save / cancel button and just use the toolbar at the top of the grid?

Thanks
Randy

Grid

answered on 15 Jul 2012

1 answer

142 views

Error - Datepicker no longer supports the touch (on IPAD).

Datepicker no longer supports the touch (on IPAD).

http://demos.kendoui.com/web/datepicker/index.html

DatePicker

answered on 15 Jul 2012

0 answers

96 views

Horizontal Kinetic Scrolling on Grid on Opera Mobile broken

Hello,

I am evaluating Kendo so don't have support subscription to file an official bug report.

Still, Horizontal kinetic scrolling works great on iOS and Android, but is broken on Opera Mobile. This can be reproduced if you have a large grid.

If you can't reproduce it I'll take some time to create a fiddle to demonstrate the issue.

Grid

asked on 15 Jul 2012

2 answers

357 views

grid foreign key datasource instead of list/array

I'm pretty new to kendo and Im trying to set up a foreign key in a grid but instead of using a list like in the example im attempting to use a second datasource instead.
At the moment when in edit mode i can select a drop down box which shows the text values of the foreign key instead of the id number but after i switch out of edit mode it reverts back to an id.

This is currently what i have
http://jsfiddle.net/QPXrf/8/

I'm just needing some direction in what would be the best way to do this.

Grid

answered on 15 Jul 2012

2 answers

169 views

DropDownLists bind the first time but not on subsequent binding

Using the dropdownlist (3) in a mobile web app, using a tabstrip and 3 views. The dropdowns are populated based on data returned after a user enters a value in a textbox. The onblur calls a function which fetches data via Ajax and then populates the dropdowns and a few textboxes. The ajax calls returns all the data needed, there is not a separate call for each dropdown.

My problem is that it always works correctly on the first binding but never on subsequent bindings. I've confirmed that the subsequent ajax calls are returning data and I've also wired up an alert message to the dataBound event for each dropdown and that also fires.

After seeing this problem I thought that maybe clearing the dropdowns before binding might solve the problem but it does not, still have the same issue. I assume there is one small piece I am missing but not sure what that might be.

I don't think this is a browser related issue because it happens in Chrome, Safari, IE, Safari for iPhone and the Android browser.

DropDownList

answered on 14 Jul 2012

3 answers

420 views

Loading Datasources

Hi,

today i have tried to read the data out of a datasource....

i have just seen this post: http://www.kendoui.com/forums/framework/mvvm/mvvm-source-binding-to-datasource.aspx

which is bascially what i have been trying to do all day.

tho trying the answer doesn't work, when using kendo.bind($("#container"), a); it Never hits the controller action method (using MVC3) leading me to believe that the datasource never calls the server.

VIEW:

@section ViewModel

{

<script type="text/javascript">

$(function () {

var a = kendo.observable({

theList: new kendo.data.DataSource({

transport: {

read: "/home/zaza",

dataType: "json",

type: "POST"

},

schema: {

model: {

id: "ID",

fields: {

ID: {

editable: false,

nullable: false

},

Name: {

editable: true,

nullable: true

}

})

});

kendo.bind($("#container"), a);

});

</script>

}

<h2>@ViewBag.Message</h2>

<div id="container">

<ul data-role="listview" data-template="ul-template" data-bind="source: theList">

</ul>

</div>

<script id="ul-template" type="text/x-kendo-template">

<li>

id: <span data-bind="text: ID"></span>

name: <span data-bind="text: Name"></span>

</li>

</script>

HOME - CONTROLLER:

public class Place

{

public int ID { get; set; }

public string Name { get; set; }

}

[HttpPost]

public JsonResult zaza()

{

List<Place> plases = new List<Place>();

plases.Add(new Place() { ID = 0, Name = "Larocque" });

plases.Add(new Place() { ID = 1, Name = "St-Louis" });

plases.Add(new Place() { ID = 2, Name = "Dorval" });

plases.Add(new Place() { ID = 3, Name = "St-Pierre" });

return Json(plases, JsonRequestBehavior.DenyGet);

}

I have had limited success creating a datasource and calling read() on it, but could never get the data out afterwards.

what im trying to do:

1) define #view with binding templates
2) read remote datasource
3) bind that data array (from item 2) to a viewModel property (viewModel.Groups = data???)
4) bind the viewModel to the view (using kendo.bind($("#view"), viewModel);)

I have foudn this very hard to do...

I should say im a Noob to javascript so maybe im making a basic silly mistake... but for the life of me i can figure out what.

Thank you in advance

Rhys Walden

Data Source

answered on 14 Jul 2012

2 answers

278 views

Can't get selectedItem in DataGrid when using rowTemplate

Hi guis, thx before everything:

I'd like to use the amazing Kendo's Grid to take soma advantages like paging, filtering through DataSource and more.
As I show up in ths fiddle http://jsfiddle.net/dsubiros/5fXZq/ , I can't get selectedItem when I'm using a rowTemplate.

In this example if I change the attribute columns by " columns: ['OrderID', 'ShipName'] ", and comment out the rowTemplate attribute, grid works as expected, but I need to be able to use a template, and still get grid's selected row.

$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
selectable: true,
rowTemplate: kendo.template($("#rowTemplate").html()),
columns: [''],
change: function() {
var id = this.select().data("id");
$("#log").html("LOG: selected id = " + id);
}
});

Please help me out.

Grid

answered on 13 Jul 2012

0 answers

125 views

Command buttons styles?

Hello, is there a way to change the style of the command buttons like in telerik ? To only text, text + image or just an image ?

Thanks!

Grid

asked on 13 Jul 2012

2 answers

382 views

Configure the Kendo UI DataSource, so it would issue requests only for specific (displayed) fields?

In my instance, a Kendo UI grid is bound to a OData service. The service exposes a table with many (200+) fields. The app allows users to configure displayed field set of the Grid, set initial filters and sort parameters. The app configures the Grid, which then goes off and queries OData service.

The grid kendo.Data.DataSource is defined as:

var gridDataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: "@Url.Content(dynDataSource.Url)",
contentType: "application/json; charset=utf-8",
type: "GET",
dataType: "json"
}
},
pageSize: @Model.MaxPageSize,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
filter: ...
}

Here's a sample request issued by the Grid (captured by Firebug):
http://localhost:22411/Data/Comp?%24inlinecount=allpages&%24top=1000&%24filter=DistrictCode+eq+%27460800%27

This returns all the fields of the table, which is a problem. The fields need to be limited by selecting only the required fields, the request for which would look like:
http://localhost:22411/Data/Comp?%24inlinecount=allpages&%24top=1000&%24filter=DistrictCode+eq+%27460800%27&%24select=DistrictCode,DistrictName,DistrictNumber

Again, how to configure the grid for this to happen?

Data Source

answered on 13 Jul 2012