I exactly followed the examples on Kendo UI's website. All data shows fine, but all the operation of "sum" not happening. So in the groupFooterTemplate, all columns shows the last item in the grid including the "average" column. I have been working on this for a few days and just cannot figure out what went wrong.
Did this happen to anyone?
$scope.vmResyncGridOptions = {
dataSource: {
data: $scope.vmDataSource,
scheme: {
model: {
id: "vmName",
fields: {
vmName: { type: "string" },
vdiskName: { type: "string" },
total: { type: "number" },
synced: { type: "number" },
percent: { type: "number" }
}
}
},
group: {
field: "vmName",
aggregates: [
{ field: "vdiskName", aggregate: "count" },
{ field: "total", aggregate: "sum" },
{ field: "synced", aggregate: "sum" },
{ field: "percent", aggregate: "average" }
]
},
aggregate: [
{ field: "vdiskName", aggregate: "count" },
{ field: "total", aggregate: "sum" },
{ field: "synced", aggregate: "sum" },
{ field: "percent", aggregate: "average" }
]
},
sortable: false,
scrollable: true,
pageable: true,
groupable: true,
//height: ($scope.screenHeight-110)*0.70-8,
columns: [
{
field: "vdiskName",
title: $scope.translation.Resync_Table_VDisk_Name,
aggregates: ["count"],
groupFooterTemplate: "Count: #=count#"
},
{
field: "total",
title: $scope.translation.Resync_Table_Total_Bytes,
aggregates: ["sum"],
groupFooterTemplate: "Total: #=sum#"
},
{
field: "synced",
title: $scope.translation.Resync_Table_Has_Resynced,
aggregates: ["sum"],
groupFooterTemplate: "Total Resynced: #=sum#"
},
{
field: "percent",
title: $scope.translation.Resync_Table_VDisck_Completed,
aggregates: ["average"],
groupFooterTemplate: "Percent: #=average#"
}
]
};
Initially check all the table data. There is a possibility of spaces or newline characters in the table columns. Even if the columns, which are not aggregated. After the changes recheck the solution.
You group by the same column as the datasource id:
id: "vmName",
fields: {
vmName: { type: "string" },
vdiskName: { type: "string" },
total: { type: "number" },
synced: { type: "number" },
percent: { type: "number" }
}
}
},
group: {
field: "vmName",
Thats why you don't get sum and averages.
The issue here is that the data is only cast according to the datasource schema (i.e. type: "number") during transport operations. In your case, I'm assuming you're applying the data directly using the Datasource.data([array]) method. When you apply the data yourself, the datatypes in your supplied array are preserved. So, if you pass a numberic value as a string, it will remain as a string in the datasource despite the model indicating that it should be a number. Numeric data that is cast as a string will not sum; only the last value will be returned. Look at the data you're trying to sum; see what datatype it is within the datasource. My guess is that if you're only seeing the last value then your datatype is a string.
Related
Using ExtJS 4.2.3. Have form with treecolumn xtype field which contains string value with number in begin. Column has 3 lvls of structure. On first lvl sort needs to be in order like (2, 3, 5, 40, 100 and etc).
After picking third lvl value in selection form, value in box will look like:
3.ABC.<BR>3.23.ABCCDD.<BR>3.23.5. ABCC
Sample of code:
enter Picker = new Project.Picker({
title: "Title1",
proxyCfg: {
url: Ext.state.Manager.get("url") + "TreeList",
type: "ajax"},
idProperty: "id",
defaultRootId: "NULL",
nodeParam: "parent_Code",
PickerCfg: [
{ name: "id", type: "string", isSC: false },
{ xtype: "treecolumn", name: "Fieldname", header: "Header1", type: "string", isSC: true, isHC: true },
{ name: "name2", type: "string" },
{ name: "code", header: "Header3", type: "string", isSC: true}],
viewConfig: {
listeners: {
itemdblclick: function (view, record) {
Order_Form.getComponent("Grid").selModel.getSelection()[0].set("id", record.get("id"));
Order_Form.getComponent("Grid").selModel.getSelection()[0].set("Fieldname", record.get("Fieldname"));
Order_Form.getComponent("Grid").selModel.getSelection()[0].set("code", record.get("code"));
trigger.setValue(record.get("name2"));
this.up().up().destroy();
}
}
},
sorters: [{
property: "code",
direction: "ASC"
}]
}).show(this, function () { this.getComponent(0).DMS_search(); Picker.getComponent(0).getView().refresh(); });
}
},
tpl: "<table class='Gridd' style='border-collapse: collapse; border: medium none;'><tr><td><b>[Header1]: </b></td><td style='width:100%;'>{Name2}</td></tr><tr><td><b>[Header3]: </b></td><td>{code}</td></tr></table>"
Asking for help with sorting in selection form.
I am using KendoUI - Grid component
How can I convert this into Kendo Grid:
For Eg:
I have created kendo grid (table) by using local data. As soon as I click on "Generate chart" button, above table's filter data should create the Kendo pie chart like below...
As I am new to Kendo, can somebody please suggest me the answer?
Code:
var localData = [
{
Id: 1,
userName: "John",
game: "A",
difficultyLevel: "Easy",
startTime: "25-05-2017",
endTime: "26-05-2017",
score: "210"
},
{
Id: 2,
userName: "Sam",
game: "B",
difficultyLevel: "Hard",
startTime: "04-11-2016",
endTime: "01-12-2016",
score: "4800"
},
];
var dataSource = new kendo.data.DataSource({
data: localData,
schema: {
model: {
fields: {
Id: {
type: "number"
},
userName: {
type: "string"
},
userName: {
type: "string"
},
difficultyLevel: {
type: "string"
},
startTime: {
type: "string"
},
endTime: {
type: "string"
},
score: {
type: "number"
},
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
scrollable: true,
height: 300,
sortable: true,
filterable: false,
groupable: true,
pageable: true,
columns: [{
field: "Id",
title: "Id",
filterable: true
}, {
field: "userName",
title: "userName"
}, {
field: "game",
title: "game"
}, {
field: "difficultyLevel",
title: "difficultyLevel"
}, {
field: "startTime",
title: "startTime"
}, {
field: "endTime",
title: "endTime"
}, {
field: "score",
title: "score"
}]
});
JsFiddle
You need to prepare your data to the chart's format. Something like:
$chartContainer.kendoChart({
dataSource: {
data: localData,
schema: {
parse: function(data) {
return data.map(x => {
return {
value: Number(x.score),
category: x.userName
}
});
}
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category"
}],
tooltip: {
visible: true,
template: "#= category #: #= value #"
}
});
Updated Fiddle
When we filter Kendo datagrid, use different types of operator like eq, and, or,
gt, lt etc. that's work well in string and number. When we use date to match another date using eq operator does not work but gt,lt works.
This is my source code
dataSource: {
data: data,
schema: {
model: {
fields: {
date: { type: "date"},
id: { type: "string" },
name: { type: "number" },
account: { type: "number" }
}
}
},
sort: [ { field: "date", dir: "desc" }],
filter : [{
field: "date", operator: "eq", value: dateString
}],
pageSize: 30,
}
probably your datestring is not being read has a date, so when it goes filter it throws a error.
Try to or use the format propertie in the grid
columns : [
{
field : "Date",
title : "Date",
format : "{0:dd-MMM-yyyy}",
filterable: {
ui: "datepicker"
}
}
]
I am trying to add a kendo checkbox column. I have done this successfully in another grid. However, when I tried to do the same thing in another grid, I am getting a "IsSimple is undefined" error, where IsSimple is a simple boolean model field.
Model for my kendo data source:
schema: {
data: function (data) { //specify the array that contains the data
console.log("DATA RETURN TEST");
console.log(data);
return data || [];
},
model: {
id: "Id",
fields: {
Id: { editable: false,
nullable: false,
type: "number"
},
DesignatorName: { type: "string" },
TXFreq: { type: "string" },
RXFreq: { type: "string" },
IsSpecial: { type: "bool" },
IsCommand: { type: "bool" },
}
}
Here is my column definition for my kendoGrid.
$("#DesignatorFreqGrid").kendoGrid({
dataSource: DesignatorDS,
columns: [
{ field: "DesignatorName", title: "Frequency", format: "{0:c}", width: "120px" },
{ field: "TXFreq", editor: TXFreqEditor, title: "TX Frequency", format: "{0:c}", width: "120px" },
{ field: "RXFreq", editor: TXFreqEditor, title: "RX Frequency", format: "{0:c}", width: "120px" },
{ field: "IsSpecial", template: '<input type="checkbox" #= IsSpecial ? checked="checked" : "" # disabled="disabled" ></input>', title: "Is Special", format: "{0:c}", width: "120px" },
{ field: "IsCommand", template: '<input type="checkbox" #= IsCommand ? checked="checked" : "" # disabled="disabled" ></input>', title: "Is Command", format: "{0:c}", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
],
toolbar: ["create"],
editable: "inline",
pageable: true
});
Here is my JSON object:
"other fields........DesignatorName: "11"
EQUIPMENT: ObjectId: 2
IsCommand: true
IsSpecial: true
RXFreq: "55"
TXFreq: "22"
As you can see, IsSpecial is defined. The binding works when I load data into the grid. The checkboxes are indeed checked. But if I try to add a new record with the "Add New Record" button in the grid, I will get the error "Uncaught ReferenceError: IsSpecial is not defined".
If I change the binding to this.IsSpecial, I don't get the error anymore, and can add a new row to my database, but then the binding won't work and the boxes aren't checked when loading the grid,
It seems like it should work, and I do not know where else to look. Any ideas? Thanks.
You need to use boolean, instead of bool.
IsSpecial: { type: "boolean" },
IsCommand: { type: "boolean" }
i'm currently using kendo ui, and i got a little problem, got the grid
schema:
{
data: "data",
total: function(response)
{
return response.data.length;
},
model:
{
id: "id",
fields:
{
clasificacion :{editable: false},
tipo_rubros :{editable: false },
rubro :{editable: false },
proveedor_rubro :{editable:false },
valor :{editable: false ,type:"number"},
num_factura :{editable: true },
neto :{editable: true ,type:"number"},
iva :{editable: true ,type:"number"},
observacion :{editable: true },
fecha_factura :{editable: true },
}
}
},
group: {
field: "tipo_rubros", aggregates: [
{ field: "valor", aggregate: "sum"}
]
},
aggregate: [ { field: "valor", aggregate: "sum" },
]
},
I want to do the math operation between "neto" and "iva" and in real time the answer appear on the "valor" field.
Any suggestion?
You need to implement save function for your grid. It is fired when you have changed cell value and pressed enter.
Your question does not include the whole source code, but the implementation should be something like this:
save: function (e) {
yourDataSource.valor = e.model.neto + e.model.iva;
yourGrid.data('kendoGrid').dataSource.read();
yourGrid.data('kendoGrid').refresh();
}
Hopefully this helps.