Questions on Kendo UI for jQuery Forum

1 answer

136 views

How can I prevent my text lines in listview rows to not overlap the little link arrows (or detail buttons)? See example below.

I did try to change margins and/or paddings for the span inside listview li tag but no success, can anyone advice me, thanks

ListView (Mobile)

answered on 31 Dec 2012

2 answers

176 views

Template data- attributes not setting up when using change: handler of datasource

This has had me searching high and low for a solution, and killed several hours, looking in all the wrong places.

Following one of the examples, I had a dataSource setup similar to this:

d =  new kendo.data.DataSource(
  {
  transport: {
  read: {
  dataType: "json",
  url: "json/favorites.json"
  }
  },
  schema: {
  type: "json",
  data: "[0].menu",
  model: {
  fields: {
  name: {},
  note: {},
  price: {}
  }
  }
  },
  change: {function(e){
var template = kendo.template($('#favorites-template').html());
$('#favorites-list').html(kendo.render(template, dataSource.view()));
}
  }
});

d.read()

Hopefully I'm missing something, however, the template renders successfully, but unobtrusive javascript features (e.g. data attribures like data-tap etc. that call a handler) fail to work as expected.

If I do it another way... (here, within an init block for the list I want to populate.)

e.view.element.find("#favorites-list").kendoMobileListView({
  template : $('#favorites-template').html(),
  dataSource: new kendo.data.DataSource(
  {
  transport: {
  read: {
  dataType: "json",
  url: "json/favorites.json"
  }
  },
  schema: {
  type: "json",
  data: "[0].menu",
  model: {
  fields: {
  name: {},
  note: {},
  price: {}
  }
  }}})
});

The UJS / data- attributes, data-tap etc. call their handlers correctly.

Now that I've fixed the problem, my only concern is for other people getting caught in the same problem. I didn't probe deep enough to figure out why this failed in a change handler, but I assume that no extra "tidying up" (i.e. binding to the newly rendered handler attributes) is done and a datasource change handler, is a bit loose. Whereas using template.datasource apparently takes good care of you.

For now I'm not sure about further ramifications, but it's still early days for me with Kendoui (about 5 days exposure so far.)

All the best,
Jason
(@fishvision)

By the way, the main reason why I'm posting this is because in the API docs, this example:

var dataSource = new kendo.data.DataSource({
    transport: {
        read: "orders.json"
    }
    change: function(e) {
       // create a template instance
       var template = kendo.template($("#template").html());
       // render a view by passing the data to a template
       kendo.render(template, dataSource.view());
    }
});

I think the example here should explain that dataSource.view(); would be provided by a data- attribute on the view, I assume that way data- attributes in the templates would work as expect (right? - untested.)

Templates

answered on 30 Dec 2012

6 answers

466 views

File Type

Is there a way to restrict the file types that can be uploaded? Say to only images.

Upload

answered on 29 Dec 2012

2 answers

163 views

OHLC StockChart not displaying data

Hi guys,

I'm using Kendo UI StockChart on my page. My data looks like this:

[{date:new Date(2012,11,27),open:26.89,high:27.09,low:26.57,close:26.96},
{date:new Date(2012,11,26),open:27.03,high:27.20,low:26.70,close:26.86},
...
]

As I understand, it is a valid stock chart data source format, but I get no data shown. My project is attached.

Charts

answered on 29 Dec 2012

2 answers

108 views

Globalization

Hi,

I had assigned UICulture to Chinese(zh-CN).

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<CarryingCapacityMD>"

UICulture="zh-CN" %>

And the content of button in the Toolbar/Command has been show in Chinese.

But when editing mode is PopUp, and I click 'Add new item'/'Edit' button popup a window.
That title still show in English.

Is a Bug?
Or give me a solution.

And why the second textbox's width in the popup window is too long.

See more detail in the attachment file.

Best regards!

Grid

answered on 29 Dec 2012

3 answers

230 views

hebrew supported ?

Hi
Is Hebrew is supported for kendoo web application ?
Thanks

Globalization

answered on 29 Dec 2012

1 answer

163 views

kendoDropDownList conflict with jquery.validate.js

If I include jquery.validate.js on my site, the dropdownlist no longer allows selection, I can just hover over the dropdown and click - but nothing happens. It does open, but I cannot select. Is there an inherent conflict? This is not desired behavior.

DropDownList

answered on 28 Dec 2012

4 answers

254 views

[Solved] How to override auto detail icon in <a> tag?

<li><a><img src="srb-images/resume-icon.png" class="fileOptionDefaultIcon"><h3>Create Document</h3></a></li>

I do not want the list item to have a auto detail icon. How would you disable this icon? ">"

ListView (Mobile)

answered on 28 Dec 2012

4 answers

1.1K+ views

template for "conditional styling" that references dataItem?

I have been injecting a class into the row at runtime to handle conditional styling scenarios, such as "if status = 'urgent' addClass('urgent')". A row with 'urgent' class might be styled bold and red. Conditional styling requires that one examine one or more cells of the row, so I've been getting the dataItem for each row and looking at the data.

$(grid.tbody).find("> tr:not(.k-grouping-row, .k-detail-row, .k-group-footer)").each(function (idx, elem) {
var dataItem = grid.dataItem(elem);
if (dataItem.status == 'urgent') {
$(this).addClass('urgent');
}
})

One problem is that the injected class does not survive a grouping operation. If the user drags a column-header to group by that column, the custom class injected into the row does not accompany the row to its new location. The conditional style is not reapplied when the rows are grouped.

So I am wondering, is it possible to use templates to do this, so that the template sticks to the row even during a grouping operation? The "urgent" class would be appended to those data rows of the tbody (i.e. not into the grouping row, or the group header and group footer rows) where the value in cell3 = "urgent". Let's say the schema field to which cell3 has been bound is called "status".

Very important: We don't want to overwrite any class that Kendo puts into the row; we want to append a class.

Here's some pseudo-code. Is something along these lines possible?

<script id="urgentTemplate" type="text/x-kendo-tmpl">
   <tr ${ if dataItem[status] == urgent this.addClass(urgent)} </tr>
If templates cannot be made to work in this manner way, or if they don't travel with the row when 
it is grouped, it would be helpful to have an event that fired after each group section was instantiated,
exposing the rows of the group, so one could iterate them, examine the dataItem of each,
and reapply a custom class to the row when applicable.

Sorry about this orange text. I'm not sure how to inject pseudo-code into my question without
messing up the styling.

Grid

answered on 28 Dec 2012

4 answers

303 views

[Solved] Dynamic Action Sheet

I am trying to get an action sheet to modify itself depending on which screen it is on. Basically in my scenario I have an button on my navbar that I wish to be a context sensitive menu. I have a jsbin to show an example of what I am trying here ... http://jsbin.com/ehicof/5/edit.

If you hit the 'logout' button on the top right initially the action sheet looks fine, when you go to the search tab and then to 'search 1' I change the action sheet contents to have a 'search 1' button, however the action sheet doesn't grow (and thus the 'cancel' button is not visible). I have tried re-initializing the action sheet to no avail (using kendo.mobile.init), perhaps I am using it wrong. Am I taking the wrong approach here? Would I be better off making multiple action sheets and then changing the link on the navbar to the appropriate one?

ActionSheet

answered on 28 Dec 2012