Related
i have a chart and grid having the same data,i want my chart to be sorted when i sort the grid by clicking on sort option ,for example:
here is the dataSource:
var Data= [
{ id: 1, name: "Jane Do", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
];
here is the grid:
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data:Data
},
sortable: true,
sort: function(e) {
console.log(e.sort.field);
console.log(e.sort.dir);
}
});
here is the chart:
$("#chart").kendoChart({
dataSource: {
data: Data,
},
series: [{
type: "column",
field: "age",
categoryField: "name"
}],
});
You need to apply the same grid sorting options to the chart:
sort: function(e) {
$("#chart").data("kendoChart").dataSource.sort(e.sort);
}
Demo
need help.
Kendo ui Grid
Kendo grid code:
$('#triggerParameterData').kendoGrid({
columns: [{field: "name"},{field: "value"},{field: "description"}],
selectable: "multiple,row",
pageable: false,
scrollable: false,
editable: true,
dataSource: {
data: popup, schema: {
model: {
fields: {
name: { editable: false },
description: { editable: false },
}
}
}
},
})
I want to make 2nd row value cell into a check box. if anyone have solution please share.
special thanks.
Reference: Kendo Grid Columns.Template
.....
columns: [
{field: "name"},
{field: "value", template: '<input type="checkbox" value="#: value #">'},
{field: "description"}
]
......
Use this fiddle
JS:
var popup = [ { value:true, name: "Enos", description: "Es" },
{ value:true,name: "Ray", description: "Rs" },
{ value:true,name: "Justice", description: "Js" },
{ value:true,name: "RR", description: "ESW" },
{ value:true,name: "Gop", description: "Gp" },
{ value:true,name: "DS", description: "JN" },
{ value:true,name: "Raven", description: "Rv" },
{ value:true,name: "FD", description: "FDGH" },
{ value:true,name: "Andrew", description: "Ar" },
{ value:true,name: "DDD", description: "GFG" },
{ value:true,name: "Shayne", description: "S" },
{ value:true,name: "YYY", description: "GHFGH" },
{ value:true,name: "Walter", description: "W" },
{ value:true,name: "EEE", description: "LUIO" },
{ value:true,name: "ZKZG", description: "RD" },
{ value:true,name: "JJJ", description: "FGJHGH" }];
$(document).ready(function () {
$('#triggerParameterData').kendoGrid({
columns: [{ field: "name" },
{ field: "value", template: '<input type="checkbox" value="#: value #">' },
{ field: "description" }],
selectable: "multiple,row",
pageable: false,
scrollable: false,
editable: true,
dataSource: {
data: popup, schema: {
model: {
fields: {
name: { editable: false },
value: { editable: false },
description: { editable: false },
}
}
}
},
})
});
I am trying to change Kendo UI Gantt title. i found one demo code, but it was not working
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
dataSource: [{
id: 1,
orderId: 0,
parentId: null,
title: "Task1",
start: new Date("2014/6/17 9:00"),
end: new Date("2014/6/17 11:00")
}],
messages: {
views: {
editor: {
editorTitle:"Edit Task"
}
}
}
});
</script>
Is it possible to change the label on Gantt bars ?
I want some info on left side tree and other info on bars is it possible ?
parent child relation is not retaining if i add gantt columns other than title.
model: {
id: "id",
fields: {
id: { from: "ID", type: "number" },
descr : { from : "DESCR", type: "string"},
orderId: { from: "ORDERID", type: "number", validation: { required: true } },
parentId: { from: "PARENTID", type: "number", defaultValue: null, validation: { required: true } },
start: { from: "START", type: "date" },
end: { from: "END", type: "date" },
Title: { from: "TITLE", defaultValue: "", type: "string" },
percentComplete: { from: "PERCENTCOMPLETE", type: "number" },
summary: { from: "SUMMARY", type: "boolean" },
expanded: { from: "EXPANDED", type: "boolean", defaultValue: true }
}
}
var gantt = $("#gantt").kendoGantt({
dataSource: tasksDataSource,
views: [
"day",
"week",
"month",
{ type: "year", selected: true },
],
columns: [
{ field: "descr", title: "Descr", editable: true, sortable: true },
],
height: 400,
showWorkHours: false,
showWorkDays: false,
snap: false
}).data("kendoGantt");
var gantt1 = $("#gantt1").kendoGantt({
dataSource: tasksDataSource1,
views: [
"day",
"week",
"month",
{ type: "year", selected: true },
],
columns: [
{ field: "title", title: " ", editable: true, sortable: true },
],
height: 400,
showWorkHours: false,
showWorkDays: false,
snap: false
}).data("kendoGantt");
Try starting uppercase:
dataSource: [{
ID: 1,
OrderId: 0,
ParentId: null,
Title: "Task1",
Start: new Date("2014/6/17 9:00"),
End: new Date("2014/6/17 11:00")
}],
EDIT:
Answering to your comment:
Define columns definition:
dataSource: [{
ID: 1,
OrderId: 0,
ParentId: null,
Title: "Task1",
Start: new Date("2014/6/17 9:00"),
End: new Date("2014/6/17 11:00"),
Description: "Some longer description"
}],
columns: [
{ field: "ID", title: "ID", width: 60 },
{ field: "Title", title: "Title", editable: true, sortable: true },
{ field: "Description", title: "Description", width: 100, editable: true, sortable: true }
],
I'm trying to get Kendo's Grid to show a filter using a combo box rather than a drop down list when used with values. What I mean is, on the grid columns array, each column can be given a list of values (objects with text and value properties) for each possible entry in the database, thereby rather than showing a code, it shows a recognisable name or text instead of the code. The problem is that whenever I specify values against the column, the filter reverts to a fixed list of criteria and a drop-down list, which I don't want.
See an example of what I mean here. What I'd like to see is the filter (on the Category column) to show a combo-box rather than a drop down list, but still use the values against the codes in the table to show in the data in the grid, but it doesn't seem to work.
As you say it doesn't work with the values property, so one approach would be to set up a custom row template and use a lookup function on category ID and replace it with the corresponding text:
var categories = [{
"value": 1,
"text": "Beverages"
}, {
"value": 2,
"text": "Condiments"
}, {
"value": 3,
"text": "Confections"
}, {
"value": 4,
"text": "Dairy Products"
}, {
"value": 5,
"text": "Grains/Cereals"
}, {
"value": 6,
"text": "Meat/Poultry"
}, {
"value": 7,
"text": "Produce"
}, {
"value": 8,
"text": "Seafood"
}];
function getCategory(catID) {
return $.grep(categories, function(n, i) {
return n.value === catID;
})[0].text;
}
$(document).ready(function() {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
autoSync: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: {
editable: false,
nullable: true
},
ProductName: {
validation: {
required: true
}
},
CategoryID: {
field: "CategoryID",
type: "number",
defaultValue: 1
},
UnitPrice: {
type: "number",
validation: {
required: true,
min: 1
}
}
}
}
}
});
var rowTemplateString = '<tr data-uid="#: uid #">' +
'<td>#: ProductName #</td>' +
'<td>#: getCategory(CategoryID) #</td>' +
'<td>#: UnitPrice #</td>' + '<td></td>' +
'</tr>';
var altRowTemplateString = rowTemplateString.replace('tr class="', 'tr class="k-alt ');
var commonSettings = {
dataSource: dataSource,
filterable: true,
groupable: true,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [{
field: "ProductName",
title: "Product Name"
},
{
field: "CategoryID",
width: "150px",
//values: categories,
dataTextField: "text",
dataValueField: "value",
dataSource: categories,
filterable: {
ui: function(element) {
element.kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: categories
});
}
},
title: "Category"
},
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: "150px"
},
{
command: "destroy",
title: " ",
width: "110px"
}
],
editable: true
};
$("#grid").kendoGrid($.extend({
rowTemplate: rowTemplateString,
altRowTemplate: altRowTemplateString
}, commonSettings));
});
Note: In this demo I haven't tried to handle the template for the Delete column. I just left it blank.
Here's the Dojo http://dojo.telerik.com/oFulu
Try this One,According to your demo here
</script>
<div id="example" class="k-content">
<div id="grid"></div>
<script>
var categories = [{
"value": 1,
"text": "Beverages"
},{
"value": 2,
"text": "Condiments"
},{
"value": 3,
"text": "Confections"
},{
"value": 4,
"text": "Dairy Products"
},{
"value": 5,
"text": "Grains/Cereals"
},{
"value": 6,
"text": "Meat/Poultry"
},{
"value": 7,
"text": "Produce"
},{
"value": 8,
"text": "Seafood"
}];
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
autoSync: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true} },
CategoryID: { field: "CategoryID", type: "number", defaultValue: 1 },
UnitPrice: { type: "number", validation: { required: true, min: 1} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
filterable: true,
groupable: true,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
{ field: "ProductName", title: "Product Name" },
{
field: "CategoryID",
width: "150px",
values: categories,
editor:function(container,options)
{
$('<input name-"' + options.fields +'"/>').
appendTo(container).kendoComboBox({
autoBind:false,
dataTextField:"text",
dataValueFiled:"value",
dataSource:new kendo.data.DataSource({
schema:{
model:{
id:"value",
fields:{
text:{},
value:{}
}
}
},
data:categories
})
})
},
title: "Category"
},
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "150px" },
{ command: "destroy", title: " ", width: "110px"}],
editable: true
});
});
</script>
Further progress. Please see at http://www.sencha.com/forum/showthread.php?153986-Empty-column-something-I-can-t-get-with-Ext.data.TreeStore-and-or-Ext.tree.Panel
I always appreciate any further advise.
I am trying to develop a simple extJS Ext 4.0.2a script to display some nested data as a Drag&Drop tree.
To try, I use a simple example from http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader
Data are given as a users.json file:
{
"users": [
{
"id": 123,
"name": "Ed",
"orders": [
{
"id": 50,
"total": 100,
"order_items": [
{
"id" : 20,
"price" : 40,
"quantity": 2,
"product" : {
"id": 1000,
"name": "MacBook Pro"
}
},
{
"id" : 21,
"price" : 20,
"quantity": 3,
"product" : {
"id": 1001,
"name": "iPhone"
}
}
]
}
]
}
]
}
I wish to display data as a tree, whose first level nodes are users, second level nodes are orders, and so on.
From the same doc, I learn how to define my models (I believe):
Ext.define("User", {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
],
hasMany: {model: 'Order', name: 'orders'},
proxy: {
type: 'ajax', // rest
url : 'users.json',
reader: {
type: 'json',
root: 'users'
}
}
})
;
Ext.define("Order", {
extend: 'Ext.data.Model',
fields: [
'id', 'total'
],
hasMany : {model: 'OrderItem', name: 'orderItems', associationKey: 'order_items'},
belongsTo: 'User'
});
Ext.define("OrderItem", {
extend: 'Ext.data.Model',
fields: [
'id', 'price', 'quantity', 'order_id', 'product_id'
],
belongsTo: ['Order', {model: 'Product', associationKey: 'product'}]
});
Ext.define("Product", {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
],
hasMany: 'OrderItem'
});
next, I define a tree store and a tree panel (for some selected fields):
var store = Ext.create('Ext.data.TreeStore', {
model: 'User',
autoLoad: true,
autoSync: true,
root: {
name: "Root node",
id: '0',
expanded: true
},
sorters: [{
property: 'id',
direction: 'ASC' // DESC
}]
});
var tree = Ext.create('Ext.tree.Panel', {
store: store,
displayField: 'name', // what nodes display (default->text)
columns: [{
xtype: 'treecolumn',
text: 'name',
dataIndex: 'name',
width: 150,
sortable: true
}, {
text: 'total',
dataIndex: 'total',
width: 150,
flex: 1,
sortable: true
}, {
text: 'price',
dataIndex: 'price',
width: 50,
flex: 1,
sortable: true
},{
text: 'quantity',
dataIndex: 'quantity',
width: 150,
flex: 1
}, {
text: 'id',
dataIndex: 'id',
flex: 1,
width: 15,
sortable: true
}],
collapsible: true,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop', // see Ext.tree.plugin.TreeViewDragDrop
nodeHighlightColor : '7B68EE',
nodeHighlightOnDrop : true,
nodeHighlightOnRepair: true,
enableDrag: true,
enableDrop: true
}
},
renderTo: 'tree-div',
height: 300,
width: 900,
title: 'Items',
useArrows: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Expand All',
handler: function(){
tree.expandAll();
}
}, {
text: 'Collapse All',
handler: function(){
tree.collapseAll();
}
}]
}]
});
});
I see the panel, the root and the first level users (as subnodes of the root). I do not see any subnodes (orders, order_items and so on).
I looked carefully at a number of posts, improved things quite a lot, but still miss to get a working solution.
I am facing the same task, and first was glad to run into your post!
After 5 hours of exploring the official docs regarding to it:
http://docs.sencha.com/ext-js/4-0/#!/guide/data
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader
I was able to populate my nested treestore with nothing better than this:
(in my case the main model is Camgroup which hasMany Camera as 'cams': which allows to use .cams() for every group)
Ext.define('AV.store.sCamgroups', {
extend: 'Ext.data.TreeStore',
model: 'AV.model.Camgroup',
autoLoad: true,
root: {
expanded: true,
text: "Grouped Cameras"
},
proxy: {
type: 'ajax',
url: 'data/camgroups.json',
reader: {
type: 'json',
root: 'camgroups',
successProperty: 'success'
}
},
listeners: {
load: function(thisStore, rootnode, records, successful, eOpts){
records.forEach(function(group){
group.cams().each(function(cam) {
group.appendChild({
text: cam.get('name'),
leaf: true
});
});
});
}
}
});
camgroups.json returns smth like this:
{
success: true,
camgroups: [{
"id" : "group1",
"name" : "Exterior cams",
"cams" : [{
"id" : "cam3",
"name" : "Camera three",
"url" : "...",
"img" : "images/cams/3.png",
"ratio" : 1.33
},{
"id" : "cam4",
"name" : "Camera four",
"url" : "...",
"img" : "images/cams/4.png",
"ratio" : 1.33
}]
}]
}
Hope this will help you though keep looking for a better solution (prob defining a proper reader).
Again, in "Ext.data.reader.Reader" I can see that Reader has config property 'implicitIncludes' which is supposed 'to automatically parse models nested within other models in a response object', but I cannot make it working =(
Cheers,
Ilya
Further progress.
Please see at
http://www.sencha.com/forum/showthread.php?153986-Empty-column-something-I-can-t-get-with-Ext.data.TreeStore-and-or-Ext.tree.Panel
I appreciate any further advise.
I made some progress. It seems I need to modify my json:
{
"children": [ <<<<---- use the same string to insert nested data, see below too
{
"id": 12,
"name": "Ed2",
"children": [] <<<<---- need this line, otherwise, JS tries to load subnodes for ever
},
{
"id": 123,
"name": "Ed",
"children": [ <<<<---- as above
{
"id": 50,
"total": 100,
"info" : "hello",
"name" : "ciao",
"children": [ <<<<---- as above
{
"id" : 20,
"price" : 40,
"quantity": 2,
"children" : { <<<<---- as above
"id": 1000,
"name": "MacBook Pro",
"children": [] <<<<---- as above bis
}
},
{
"id" : 21,
"price" : 20,
"quantity": 3,
"children" : { <<<<---- as above
"id": 1001,
"name": "iPhone",
"children": [] <<<<---- as above bis
}
}
]
}
]
}
]
}
Then the following definition of a model works:
Ext.define("User", {
extend: 'Ext.data.Model',
fields: [
'id', 'name', 'info', 'price', 'quantity', 'order_id', 'product_id'
],
proxy: {
type: 'ajax', //rest
url : 'ex1.json',
reader: {
type: 'json',
root: 'children'
}
}
});
So, it seems that associations among models for the different levels of my nested data are not needed at all.
It works, although I am not sure whether there are drawbacks or not.
I am still looking for your advise, I go by try&mistake, I do not see the underlying logic yet.
Thks.
I have second thoughts. The trick to use a unique string 'children' does not seem so good.
Let me consider a very simple json:
{
"users": [
{
"id": 12,
"name": "Ed2",
"orders": []
},
{
"id": 123,
"name": "Ed",
"orders": [
{
"id": 50,
"info" : "hello",
"name" : "MM",
"leaf" : 'true',
"some_else": []
}]
}
]
}
The extJS tree I wish to get is:
Root
|--ED
|--ED2
|--MM
The model is just
Ext.define("User", {
extend: 'Ext.data.Model',
fields: [
'id', 'name'
],
hasMany: {model: 'Order', name: 'orders'},
proxy: {
type: 'ajax', //rest
url : 'my_file.json',
reader: {
type: 'json',
root: 'users'
}
}
});
Ext.define("Order", {
extend: 'Ext.data.Model',
fields: [
'id', 'name', 'info'
],
belongsTo: 'User'
});
The final output I get is just:
Root
|--ED
|--ED2
is it a mistake of mine, or a missing feature? is there a way out without to change my json?
Thanks a lot