I have a problem with Kendo chart, when the List of item returned from controller have no item I have an error:
Uncaught TypeError: Cannot read property 'length' of undefined kendo.all.min.js:28
Vt.extend._bindCategoryAxis kendo.all.min.js:28
Vt.extend._bindCategories kendo.all.min.js:28
Vt.extend._onDataChanged kendo.all.min.js:28
b.isFunction.i jquery-1.9.1.min.js:3
i.extend.trigger kendo.all.min.js:9
tt.extend._process kendo.all.min.js:11
tt.extend.success kendo.all.min.js:11
b.isFunction.i jquery-1.9.1.min.js:3
n.success kendo.all.min.js:11
c jquery-1.9.1.min.js:3
p.fireWith jquery-1.9.1.min.js:3
k jquery-1.9.1.min.js:5
r jquery-1.9.1.min.js:5
If I delete categoryAxis from the code, all work as expected, No matter if there are no data, but the problem is that I will not have the time represented on the x axis:
function createChart() {
$("#chart").kendoChart({
dataSource: {
transport: {
read: {
url: "#Url.Action("GetLostDaysTrend", "Production")"+"?
initDate="+startDate+"&endDate="+endDate+"&reactor="+reactor
,contentType: "application/json",
type: "POST"
},
parameterMap: function (options) {
return JSON.stringify(options);
}
},
group: {
field: "Reactor"
},
sort: {
field: "Fecha",
dir: "asc"
}
},
title: {
text: "Tendencias de dias perdidos"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "line"
},
series:
[{
field: "Acumulado",
name: "Acumulado",
groupNameTemplate: "#= group.value # (#= series.name #)"
}],
categoryAxis: {
field: "Fecha",
labels: {
template: "#= formatDate(value) #",
rotation: -90
}
},
tooltip: {
visible: true,
format: "N0"
}
});
}
I'm breaking my head with this problem, any clue?
Experienced the same issue and fixing it by checking if the length of the array non zero :
parameterMap: function (options) {
...
if (options.sort.length == 0) {
return [];
}
else {
return options.sort[0].field + ',' + options.sort[0].dir;
}
}
Best I can find is that it is due to a null dataset. Here is a workaround that you can try: http://www.kendoui.com/forums/ui/grid/grid-empty-result-response-handling.aspx
Related
Can anyone explain me, what am I doing wrong?
I'm trying to load data to store and select some of that on form load.
Here is what I came up with so far:
https://fiddle.sencha.com/#fiddle/cjd
Ext.define('TagModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'some_id',
type: 'int'
}, {
name: 'some_value',
type: 'string'
}]
});
Ext.define('MyPanel',{
extend: 'Ext.panel.Panel',
renderTo: Ext.getBody(),
title: 'Some title',
width: 200,
heigh: 500,
layout: 'anchor',
items: [{
xtype: 'tagfield',
anchor: '100%',
displayField: 'some_value',
valueField: 'some_id',
store: Ext.create('Ext.data.Store', {
model: 'TagModel',
data: [{
some_id: 0,
some_value: 'value0'
}, {
some_id: 1,
some_value: 'value1'
}]
}),
// value: ['0']
}]
});
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('MyPanel');
}
});
It works well, but if you uncomment line 40, which should tell component to select items by their valueField config, it shows error in the console:
Uncaught TypeError: Cannot read property 'isModel' of undefined ext-all-debug.js:144157
According to the specification, value can be set as an array of strings associated to this field's configured valueField.
As posted by the OP Панов Владимир:
OK, I've found a solution:
The problem is in the source code of ExtJS. If anyone have same problem, you can use this override:
Ext.override(Ext.form.field.Tag, {
findRecord: function(field, value) {
var store = this.store,
matches;
if (store) {
matches = store.queryBy(function(rec) {
return rec.get(field) === value;
});
}
return matches ? matches.getAt(0) : false;
},
});
I am having difficulty getting data to my controller using the MVVM method as shown in this Kendo Dojo example
I can see in my parameterMap function that the data is in the options.models but when I look for data at the controller, FAC_FuelReceipts is null. I can manually us an ajax call but I want this to work "Out of the Box" first. What am I doing wrong?
Grid:
$("#grid").kendoGrid({
height: 430,
columns: [
{ field: "FuelReceiptID" },
{ field: "ReceiptDate", title: "Receipt Date", width: 110, format: "{0:MM/dd/yyyy}" },
{ field: "FuelType", title: "Fuel Type", width: 110, editor: fuelTypeDropDownEditor },
{ field: "Qty", width: 110 },
{ field: "ReceivedBy", width: 110 }
],
editable: true,
pageable: true,
sortable: true,
filterable: true,
navigatable: true,
toolbar: ["create", "save", "cancel"],
dataSource: viewModel.receipts
});
ViewModel Code:
var viewModel;
$(function () { //On Ready
viewModel = kendo.observable({
receipts: new kendo.data.DataSource({
schema: {
model: {
id: "FuelReceiptID",
fields: {
FuelReceiptID: { editable: false, nullable: true },
ReceiptDate: { type: "date", validation: { required: true } },
FuelType: { type: "string", defaultValue:"Diesel" },
Qty: { type: "number", validation: { required: true } },
ReceivedBy: { type: "string" }
}
}
},
batch:true,
transport: {
read: {
cache:false,
url: "/Fuels/GetFuelReceipts",
dataType: "json"
},
create: {
url: "/Fuels/Create",
dataType: "json",
type: "POST"
},
parameterMap:function(options,operation){
if (operation == "read") {
return{
SiteID: SiteID,
ReceiptMonth: ReceiptMonth,
ReceiptYear: ReceiptYear
}
}
if (operation !== "read" && options.models) {
return { FAC_FuelReceipts: kendo.stringify(options.models) };
}
} //parameterMap fuction
} //transport
})
});
Controller Code:
[HttpPost]
public JsonResult Create(IEnumerable<FAC_FuelReceipts> FAC_FuelReceipts) //**empty here**
{
//Do something with data here
return Json(FAC_FuelReceipts, JsonRequestBehavior.AllowGet);
}
Use String instead of IEnumerable, As your parameter data is in string format.
Once you get data in string format deserialize into your object
[HttpPost]
public JsonResult Create(string FAC_FuelReceipts)
{
IList<FAC_FuelReceipts> Items= new JavaScriptSerializer().Deserialize<IList<FAC_FuelReceipts>>(FAC_FuelReceipts);
/**your code*/
return Json(FAC_FuelReceipts);
}
I'm working on a donut chart type, with the Highcharts library.
As you can see in the image below, some of the inner data labels are overlapped.
I've been playing with the parameter "distance" but doesn't fix this.
Find attached the code below,
// Create the chart
$(container).highcharts({
chart: {
type: 'pie'
},
credits: {
enabled: false
},
exporting: {
buttons: {
contextButton: {
symbol: 'url(/icon-turn-down.png)'
}
}
},
title: {
text: _title,
margin: 50
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
formatter: function() {
var s = this.point.name.split('.');
if (s.length == 1) {
return this.y > 1? '<b>'+this.point.name+':</b> '+Highcharts.numberFormat(this.point.y) : null;
}
return this.y > 1? s[0]+'<br /><b>'+$.trim(s[1])+':</b> '+Highcharts.numberFormat(this.point.y) : null;
}
},
series: [{
name: '',
data: innerData,
size: '80%',
dataLabels: {
formatter: function() {
return this.y > 0 ? this.point.name : null;
},
color: 'white',
distance: -50
}
}, {
name: '',
data: outerData,
size: '100%',
innerSize: '80%',
dataLabels: {
formatter: function() {
var s = this.point.name.split('.');
if (s.length == 1) {
return this.y > 1 ? '<b>'+ this.point.name+':</b> '+ Highcharts.numberFormat(this.point.y) : null ;
}
s = this.point.name.substring(this.point.name.indexOf(".")+2);
return this.y > 1 ? '<b>'+ s+':</b> '+ Highcharts.numberFormat(this.point.y): null;
},
style: {
fontSize: "10px",
fontColor: "#000000"
}
}
}]
});
Finally, I found a solution, which is playing with the "startangle" attribute.
series: [{
name: '',
data: innerData,
startAngle:110,
size: '80%',
dataLabels: {
formatter: function() {
return this.y > 0 ? this.point.name : null;
},
color: 'white',
distance: -45
}, {
...
Distance parameter cannot be applied for each point, only general, so only what comes to my mind is iteared on each datalabel and use translate() function, or use formatter, apply CSS class and dhten use top/left parameter for each element. But will be helpful if you recreate your example as fiddle.
I have a KendoGrid like below and when I run the application, I'm not getting the expected format for date column.
$("#empGrid").kendoGrid({
dataSource: {
data: empModel.Value,
pageSize: 10
},
columns: [
{
field: "Name",
width: 90,
title: "Name"
},
{
field: "DOJ",
width: 90,
title: "DOJ",
type: "date",
format:"{0:MM-dd-yyyy}"
}
]
});
When I run this, I'm getting "2013-07-02T00:00:00Z" in DOJ column. Why it is not formatting? Any idea?
I found this piece of information and got it to work correctly. The data given to me was in string format so I needed to parse the string using kendo.parseDate before formatting it with kendo.toString.
columns: [
{
field: "FirstName",
title: "FIRST NAME"
},
{
field: "LastName",
title: "LAST NAME"
},
{
field: "DateOfBirth",
title: "DATE OF BIRTH",
template: "#= kendo.toString(kendo.parseDate(DateOfBirth, 'yyyy-MM-dd'), 'MM/dd/yyyy') #"
},
...
References:
format-date-in-grid
jsfiddle
kendo ui date formatting
just need putting the datatype of the column in the datasource
dataSource: {
data: empModel.Value,
pageSize: 10,
schema: {
model: {
fields: {
DOJ: { type: "date" }
}
}
}
}
and then your statement column:
columns: [
{
field: "Name",
width: 90,
title: "Name"
},
{
field: "DOJ",
width: 90,
title: "DOJ",
type: "date",
format:"{0:MM-dd-yyyy}"
}
]
This is how you do it using ASP.NET:
add .Format("{0:dd/MM/yyyy HH:mm:ss}");
#(Html.Kendo().Grid<AlphaStatic.Domain.ViewModels.AttributeHistoryViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.AttributeName);
columns.Bound(c => c.UpdatedDate).Format("{0:dd/MM/yyyy HH:mm:ss}");
})
.HtmlAttributes(new { #class = ".big-grid" })
.Resizable(x => x.Columns(true))
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(c => c.Id);
})
.Read(read => read.Action("Read_AttributeHistory", "Attribute", new { attributeId = attributeId })))
)
Try formatting the date in the kendo grid as:
columns.Bound(x => x.LastUpdateDate).ClientTemplate("#= kendo.toString(LastUpdateDate, \"MM/dd/yyyy hh:mm tt\") #");
The option I use is as follows:
columns.Bound(p => p.OrderDate).Format("{0:d}").ClientTemplate("#=formatDate(OrderDate)#");
function formatDate(OrderDate) {
var formatedOrderDate = kendo.format("{0:d}", OrderDate);
return formatedOrderDate;
}
As far as I'm aware in order to format a date value you have to handle it in parameterMap,
$('#listDiv').kendoGrid({
dataSource: {
type: 'json',
serverPaging: true,
pageSize: 10,
transport: {
read: {
url: '#Url.Action("_ListMy", "Placement")',
data: refreshGridParams,
type: 'POST'
},
parameterMap: function (options, operation) {
if (operation != "read") {
var d = new Date(options.StartDate);
options.StartDate = kendo.toString(new Date(d), "dd/MM/yyyy");
return options;
}
else { return options; }
}
},
schema: {
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
StartDate: { type: 'date', format: 'dd/MM/yyyy' },
Area: { type: 'string' },
Length: { type: 'string' },
Display: { type: 'string' },
Status: { type: 'string' },
Edit: { type: 'string' }
}
},
data: "Data",
total: "Count"
}
},
scrollable: false,
columns:
[
{
field: 'StartDate',
title: 'Start Date',
format: '{0:dd/MM/yyyy}',
width: 100
},
If you follow the above example and just renames objects like 'StartDate' then it should work (ignore 'data: refreshGridParams,')
For further details check out below link or just search for kendo grid parameterMap ans see what others have done.
http://docs.kendoui.com/api/framework/datasource#configuration-transport.parameterMap
This might be helpful:
columns.Bound(date=> date.START_DATE).Title("Start Date").Format("{0:MM dd, yyyy}");
I have put together a simple jsfiddle demonstrating the issue. It has a grid with two records. One has a true value in in the Boolean column and the other has a false.
I have logged the data to the console so you can see the values that the grid is getting.
Yet the grid shows false for both rows.
http://jsfiddle.net/codeowl/KhBMT/
Thanks for your time,
Scott
Code for StackOverflow:
var _Data = [
{ "SL_TestData_ID": "1", "SL_TestData_String": "Bool is 1", "SL_TestData_Boolean": "1" },
{ "SL_TestData_ID": "2", "SL_TestData_String": "Bool is 0", "SL_TestData_Boolean": "0" }
];
var _kendoDataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
console.log('Transport READ Event Raised - Data: ', JSON.stringify(_Data, null, 4));
options.success(_Data);
}
},
schema: {
model: {
id: "SL_TestData_ID",
fields: {
SL_TestData_ID: { editable: false, nullable: false },
SL_TestData_String: { type: "string" },
SL_TestData_Boolean: { type: "boolean" }
}
}
},
error: function (a) {
$('#TestGrid').data("kendoGrid").cancelChanges();
}
});
// Initialize Grid
$("#TestGrid").kendoGrid({
columns: [
{ field: "SL_TestData_ID", title: "ID" },
{ field: "SL_TestData_String", title: "String" },
{ field: "SL_TestData_Boolean", title: "Boolean" }
],
dataSource: _kendoDataSource
});
I found that if I altered my select statement to return "TRUE"/"FALSE" for my TINYINT column in the database it worked. Eg;
SELECT
SL_TestData_ID,
SL_TestData_Number,
SL_TestData_String,
SL_TestData_Date,
SL_TestData_DateTime,
if (SL_TestData_Boolean = 1, "TRUE", "FALSE") as SL_TestData_Boolean
FROM
SL_TestData;
Regards,
Scott