We are trying to set specific date returns and reload the charts. Everything is working except that when the we call the chart.refresh or chart.redraw functions, the dataItem specified in the tooltip template is returning undefined. Would appreciate any help.

function updateDateRange(timelabel) {
  var prevDateRange = timelabel.text();

  var dateRange = new Date();

  switch (prevDateRange) {
    case "7 days":
      timelabel.text("30 days");
      dateRange.setDate(dateRange.getDate() - 30);
      break;
    case "30 days":
      timelabel.text("60 days");
      dateRange.setDate(dateRange.getDate() - 60);
      break;
    case "60 days":
      timelabel.text("90 days");
      dateRange.setDate(dateRange.getDate() - 90);
      break;
    case "90 days":
      timelabel.text("7 days");
      dateRange.setDate(dateRange.getDate() - 7);
      break;
  }

  var chart = timelabel.siblings(".widgetchart").data("kendoChart");

  chart.options.categoryAxis.min = dateRange;
  /* Note: For some reason, if the min value of the categoryAxis is set to a low enough  value (in my tests, less than 10 days from the current date), it rewrites the dataItem value in the tooltip template, causing it to throw a few undefined where dataItem properties are being accessed. Modifying other properties of the kendoChart data object does not cause it to break. */
  chart.redraw();
}

$("#" + id).kendoChart({
theme: "metroblack",
//autoBind: false,
dataSource: {
transport: {
read: {
url: url,
dataType: jsontype
}
},

schema: {
data: function(response) {
var data = response.data;

//remapping of data to match format
for (var i=0; i < data.length; i++) {
var item = data[i];
item.date = item.date;
item.value = item.engagement;
item.retweets = item.retweet_count;
item.replies = item.reply_count;
item.display = item.group_name;
}

return data;
},
model: {
fields: {
date: {
type: "date",
}
}
}
}
},
chartArea: {
opacity: 0
},
legend: {
position: "custom",
offsetX: $("#" + id).fromRight(100),
offsetY: 20,
},
series: [{
type: "line",
field: "value",
markers: {
border: {
width: 0
},
visible: true,
},
width: 2,
missingValues: "interpolate"
}],
dataBound: fillPoints,
categoryAxis: {
min: new Date().setDate(new Date().getDate() - 7),
baseUnitStep: "auto",
field: "date",
},
valueAxis: {
labels: {
format: "N0",
},
},
tooltip: {
visible: true,
// This item works the first time but every refresh, the dataItem is "undefined"
template: "<div style='text-align:center'>Retweets: #= dataItem.retweets #<br>Engagement: #= value.addCommas() #<br>#= category.toString('M/d') #</div>"
},
});

Hi,

I am using struts tags eg <s:textbox> and when I try to use the kendo validators in struts it does not work and I do not want to use <input type > tags as they are not shown properly on IE for my project but kendo validation works fine on them.

Kindly show me a workaround to use the kendoValidator in struts2.0 as the whole project is made using struts tag library and Its not very difficult to change to <input type>

Please help.

Regards and thanks in advance
Nitesh

Hi,
I'm trying to create the attached chart with Kendo UI. I'm having trouble with the stacked x-axis (categories).
The closest I've come is this fiddle, but obviously the categories aren't attached to the data.

Is it possible to achieve this with Kendo? Any direction would be appreciated.

I am attempting to convert my JSON data to a Kendo UI Mobile Listview. my php script outputs this data:



This JS Fiddle uses the same html css and javascript file that my app does. 

My question is, what do I need to put in my transport & read methods to get it to interpret the data correctly. 

Do you have something similar to this like the jquery mobile? im still debating if im going to use jquery mobile or your Kendo UI

http://view.jquerymobile.com/1.3.1/dist/demos/widgets/panels/

I have a situation where the activate event (or any tab event for that matter) does not fire when i programmatically select a tab. What i am eventually attempting to do is have my app perform a search on one tab and then populate the contents of the grid within another tab (Grid tab) and have that grid be 100% height of the tab.

Seems the grid only displays properly when the tab activate event fires (to resize the tab and grid). But its not in this case.

JSFiddle:
http://jsfiddle.net/jmika99/urYVe/1/

Thanks,
Ashley

Hi Guys,


Since Our database is using AUS format date not US Format.I have added this in my cshtml page, but it is not working since when it pass to the controller it still get the US Date format.

my cshtml page is also inside the Kendo ui tab

i have placed the following in my cshtml page, however the controller still pick up US date format:

<script type="text/javascript" src="@Url.Content("~/Scripts/kendo/cultures/kendo.culture.en-AU.min.js")" ></script>
<script>
kendo.culture("en-AU");
</script>


Please advise

How can I get the id of the current view?

So for the code example below, it should alert "page_introduction". 

Example:
<div data-role="view" data-layout="app" data-title="My App" id="page_introduction" data-transition="fade">
content
</div>

<script>
alert("You are currently watching "+app.view.id());
</script>

Usually i am using below  syntax to get popup. It is working fine.

<a data-align="right" data-role="button" data-rel="modalview" href="#MySetttings"/></a>  
 

The issue is Now, i have one .aspx page which i want to open in popup. I am using below  syntax  is not  Working 

<a data-align="right" data-role="button" data-rel="modalview"  href="Settings.aspx"/></a> 

When using RequireJS to initialize kendo.view.min, IE10 returns error "Object doesn't support property or method 'bind'". The Kendo View does not work in both IE10 and Chrome unless kendo.binder.min is also included.

Expected behavior: Kendo View should just work when kendo.view.min is included in the require line.

The attached .zip contains one index.htm file where the Kendo View does not work until kendo.binder.min is moved inside the require line.