This should be an easy one but I'm missing something. I have an MVC application that returns JSON data using this controller method:
public ActionResult GetVenues()
{
ActionResult ar = Json(_VenueRepository.GetData(), JsonRequestBehavior.AllowGet);
return ar;
}
Nothing fancy here. I'm displaying a Kendo treeview on my view using the following code:
var venuetree = function () {
$("#venuetreeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{ id: 0, text: "Venues", items: [{ id: 1, text: "Venue 1", items: [{ id: 5, text: "Venue 2" }] }, { id: 2, text: "Venue 3", items: [{ id: 14, text: "Venue 4" }] }, { id: 3, text: "Venue 5", items: [{ id: 38, text: "Venue 6" }, { id: 39, text: "Venue 7" }, { id: 25, text: "Venue 8" }, { id: 26, text: "Venue 9" }, { id: 27, text: "Venue 10" }, { id: 28, text: "Venue 11" }] }, { id: 30, text: "Venue 12" }, { id: 40, text: "Venue 13", items: [{ id: 41, text: "Venue 14" }] }, { id: 4, text: "Venue 15", items: [{ id: 29, text: "Venue 16" }] }, { id: 31, text: "Venue 17" }, { id: 32, text: "Venue 18" }] }]
//dataSource: new kendo.data.HierarchicalDataSource({
// transport: {
// read: {
// url: "DataManager/GetVenues",
// dataType: "json",
// contentType: "application/json"
// }
// },
// pageSize: 100,
// requestEnd: function (e) {
// $("#wait").hide();
// },
//})
}).data("kendoTreeView");
};
The hard-coded JSON here renders just fine. I obtained this JSON directly from the ActionResult object in the controller method.
However, when I uncomment the code that returns the HierarchicalDataSource (while commenting out the hard-coded version, of course) The treeview displays a Loading message with a wait animation. Note: same problem using DataSource as HierarchicalDataSource.
Any ideas why its acting this way?
Thanks
Carl
i use this
var dataSource = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: foo,
datatype: "json",
contentType: "application/json"
}
},
schema: {
model: {
children: "items",
id: "id"
},
data: function(data) {
var dataArray = eval(data);
return dataArray;
}
}
});
I think eval(data) is the solution.
I tried many things and after using eval it works :)
Related
how can i do something like that in React-Native:
data = [
{id:1,title:'Action',games:[
{id:1,title:'Game1'},
{id:2,title:'Game2'},
{id:3,title:'Game3'},
]},
{id:2,title:'Horror',games:[
{id:1,title:'Game1'},
{id:2,title:'Game2'},
{id:3,title:'Game3'},
]},
]
Every time the query string is updated, look for the game within the category.
Returns only the categories that contain a game with the searched characters.
Thank you! :D
I don't know if I understand your question correctly. This is my solution.
If you query for "Game5" you will get whole object that contains query
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game4" },
{ id: 2, title: "Game5" },
{ id: 3, title: "Game6" },
],
},
];
const query = "Game5";
const result = data.find((category) =>
category.games.find((g) => g.title === query)
);
console.log(result);
You can use 'filter' instead of 'find' and result will be an array.
This is example of filter version. I add one more category so you can see how it filter
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 3,
title: "Comedy",
games: [
{ id: 1, title: "Game5" },
{ id: 2, title: "Game6" },
{ id: 3, title: "Game7" },
],
},
];
const query = "Game2";
const result = data.filter((category) =>
category.games.find((g) => g.title === query)
);
console.log(result);
And you might want to look at life cycle componentDidUpdate if you write class component, but if you write function component you might want to use useEffect
This is official react hook explaination
EDIT: from your comment you might want something like this
const data = [
{
id: 1,
title: "Action",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 2,
title: "Horror",
games: [
{ id: 1, title: "Game1" },
{ id: 2, title: "Game2" },
{ id: 3, title: "Game3" },
],
},
{
id: 3,
title: "Comedy",
games: [
{ id: 1, title: "Game5" },
{ id: 2, title: "Game6" },
{ id: 3, title: "Game7" },
],
},
];
const query = "Game5";
let result = null;
data.forEach((category) => {
const game = category.games.filter((g) => g.title === query);
if (game.length) result = { ...category, games: game };
});
console.log(result);
For example, I have a view with model IEnumerable<Correspondence>. I want to bind it to KendoUI grid. What should I do? I've tried
#model IEnumerable<Correspondence>
<div id="Correspondence"></div>
<script>
$(document).ready(function () {
$('#Correspondence').kendoGrid({
dataSource: {
data: #Html.Raw(Json.Encode(Model)),
editable: { destroy: true },
batch: true,
pageSize: 15,
schema: {
model: {
id: "Id",
fields: {
Subject: { type: "string" },
CorrespondenceType: { type: "number" },
SentDate: { type: "date" }
}
}
}
},
navigatable: true,
selectable: "row",
filterable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
columns: [
{
title: "Subject",
field: "Subject"
},
{
title: "Type",
field: "CorrespondenceType"
},
{
title: "Sent Date",
field: "SentDate",
format: "{0:MM/dd/yyyy}"
},
{
command: [{ name: "openCorrespondence", text: "Open", className: "k-grid-openLaboratory", imageClass: "k-icon k-i-maximize", click: Open },
{ name: "deleteCorrespondence", text: "Delete", className: "k-grid-deleteLaboratory", imageClass: "k-icon k-delete", click: Delete },
{ name: "EditCorrespondence", text: "Edit", className: "k-grid-editLaboratory", imageClass: "k-icon k-edit", click: Edit }],
title: "Action"
}
]
});
}); // end ready
</script>
But it doesn't work. The table even doesn't show up. Please help me. Thank you.
Edited!!!
I have solved my own problem. Because I used command column, so I have to add 3 functions: Open, Edit, and Delete. Then, the grid showed successfully.
I'm trying to get my footerTemplate working with a Kendo UI grid. I want to get the sum of 'hours_worked' in the footer of the tabel. I've tryed several options from the Kendo UI example but it doesn't work for me. What im doing wrong?
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
transport:
read: {
url: "mods/hours/data/get_hours.php?id=<?php echo $volunteer_id; ?>",
dataType: "json"
}
},
schema: {
model: {
fields: {
hours_id: { type: "number" },
volunteer_first_name: { type: "string" },
volunteer_last_name: { type: "string" },
hours_date: { type: "date" },
location_name: { type: "string" },
work_type_name: { type: "string" },
volunteer_id: { type: "number" },
hours_worked: { type: "number" }
}
}
},
aggregate:[{ field:"hours_worked", aggregate:"sum" }],
pageSize: 10
},
height: 350,
filterable: true,
sortable: true,
pageable: true,
selectable:true,
columns: [
{
title:"Naam",
template:"#=volunteer_last_name#, #=volunteer_first_name#",
},{
title:"Locatie",
field:"location_name",
},{
title:"Werkzaamheden",
field:"work_type_name",
},{
title:"Uren",
field:"hours_worked",
footerTemplate:"Sum: #=sum#",
},{
title:"Datum",
field:"hours_date",
},{
width:"200px",
title:"Opties",
filterable: false,
template:"<a href='?p=edit_reported_hours&id=#=volunteer_id#&hours_id=#=hours_id#' class='k-button'>Bewerken</a> <a href='?p=manage_reported_hours&o=delete&id=#=volunteer_id#&hours_id=#=hours_id#' class='k-button'>Delete</a>"
},
]
});
});
</script>
Add a curly bracket after transport and it will work.
transport: {
read: {
url: "mods/hours/data/get_hours.php?id=<?php echo $volunteer_id; ?>",
dataType: "json"
}
},
See it here: http://jsfiddle.net/OnaBai/bWS7C/
I have a model, a store and a grid (which will be populated with the data in the store). On clicking on a row in the grid, it opens up a window which has a testbox, a panel which intern holds another grid. My data is nested and I'm finding it difficult to pass the values to the grid. Below is my model, store and the components.
Ext.onReady(function() {
//Model
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'senority', type: 'int' },
{ name: 'dep', type: 'auto' },
{ name: 'dep_id', type: 'int', mapping: 'dep.dep_id'},
{ name: 'dep_Name', type: 'string', mapping: 'dep.dep_Name'},
{ name: 'hired', type: 'string' }
]
});
//Store
Ext.create('Ext.data.Store', {
model: 'User',
storeId:'employeeStore',
// fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
data:[
{firstname:"Michael",
lastname:"Scott",
senority:7,
dep:[{
dep_id: 1000,
dep_Name: 'HR'
}],
hired:"01/10/2004"},
{firstname:"Dwight",
lastname:"Schrute",
senority:2,
dep:[{
dep_id: 1001,
dep_Name: 'Sales'
}],
hired:"04/01/2004"}
]
});
//First grid Panel
Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
id: 'gridID',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: 'First Name', dataIndex: 'firstname' },
{
header: 'Button',
xtype: 'actioncolumn',
icon : 'test.png',
handler: function(grid, rowIndex, colIndex, item, e , record) {
rIx=rowIndex;
Ext.create('MyWindow',{rIx: rowIndex}).show();
}
}
],
width: 500,
renderTo: Ext.getBody()
});
// Window
Ext.define('MyWindow', {
extend: 'Ext.window.Window',
store : Ext.data.StoreManager.lookup('employeeStore'),
height: 300,
width: 400,
title: 'My Window',
items: [ //testfield
{
xtype: 'textfield',
id : 'fname',
fieldLabel:'Name'
},
//panel
{
xtype: 'panel',
id: 'wPanel',
title: 'Test',
height: 400,
listeners: {
afterrender: function(){//alert("-->");
//grid inside the panel which is in window
var wgrid = Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
id: 'gridID1',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: 'Department ID',
dataIndex: 'dep_id'
},
{
text: 'Department Name',
dataIndex: 'dep_Name'
}
],
width: 300,
height: 250
});
Ext.getCmp('wPanel').add(wgrid);
}
}
}
],
listeners: {
afterrender: function(win){
//alert("idx= " + win.rIx);
var r = Ext.data.StoreManager.lookup('employeeStore').getAt(win.rIx);
var firstname = r.get('firstname');
Ext.getCmp('fname').setValue(firstname);
}
}
});
});
Im trying it with mapping and Im not able to see any data in the grid inside the panel. On clicking on the first row, the text box inside the window should display firstname( which is working fine), and the grid inside the window should display department id and department name of that particular employee alone. First, i tried with hasMany and belongsTo, but of no luck. Now I'm trying with mapping. Pls help....
You indeed use hasMany in your mapping.
I've made a fiddle for you with your example, I changed a few stuff arround, it's working now. http://jsfiddle.net/johanhaest/UehS2/
Ext.onReady(function () {
//Model
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'senority',
type: 'int'
}, {
name: 'dep'
}, {
name: 'hired',
type: 'string'
}]
});
Ext.define('Department', {
extend: 'Ext.data.Model',
fields: [{
name: 'dep_id',
type: 'int'
}, {
name: 'dep_Name',
type: 'string'
}]
});
//Store
Ext.create('Ext.data.Store', {
model: 'User',
storeId: 'employeeStore',
// fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
data: [{
firstname: "Michael",
lastname: "Scott",
senority: 7,
dep: [{
dep_id: 1000,
dep_Name: 'HR'
}],
hired: "01/10/2004"
}, {
firstname: "Dwight",
lastname: "Schrute",
senority: 2,
dep: [{
dep_id: 1001,
dep_Name: 'Sales'
}],
hired: "04/01/2004"
}]
});
//First grid Panel
Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
id: 'gridID',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'First Name',
dataIndex: 'firstname'
},
{
header: 'Button',
xtype: 'actioncolumn',
icon: 'test.png',
handler: function (grid, rowIndex, colIndex, item, e, record) {
rIx = rowIndex;
Ext.create('MyWindow', {
rIx: rowIndex
}).show();
}
}
],
width: 500,
renderTo: Ext.getBody()
});
// Window
Ext.define('MyWindow', {
extend: 'Ext.window.Window',
store: Ext.data.StoreManager.lookup('employeeStore'),
height: 300,
width: 400,
title: 'My Window',
items: [ //testfield
{
xtype: 'textfield',
id: 'fname',
fieldLabel: 'Name'
},
//panel
{
xtype: 'panel',
id: 'wPanel',
title: 'Test',
height: 400,
listeners: {
afterrender: function (panel) { //alert("-->");
//grid inside the panel which is in window
var emplStore = Ext.data.StoreManager.lookup('employeeStore');
var win = panel.up('window');
var depStore = Ext.create('Ext.data.Store', {
model: 'Department',
data: emplStore.getAt(win.rIx).get('dep')
});
var wgrid = Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
id: 'gridID1',
store: depStore,
columns: [{
text: 'Department ID',
dataIndex: 'dep_id'
}, {
text: 'Department Name',
dataIndex: 'dep_Name'
}],
width: 300,
height: 250
});
Ext.getCmp('wPanel').add(wgrid);
}
}
}
],
listeners: {
afterrender: function (win) {
//alert("idx= " + win.rIx);
var r = Ext.data.StoreManager.lookup('employeeStore').getAt(win.rIx);
var firstname = r.get('firstname');
Ext.getCmp('fname').setValue(firstname);
}
}
});
});
Note that your code can be optimised a lot, but I focused on your current prob.
I am new to Sencha Touch and web-programming. I am trying to display a nested list and am only getting the first level items in a loop over and over again.
I have looked at the documentation and kitchen sink examples, but I just can't get it right. I would be very thankful for tips!
This is my Code:
Ext.regModel('Site', {
fields: [{
name: "sitename",
type: "string"
}, {
name: "last_connection",
type: 'auto'
}]
});
Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var store = new Ext.data.TreeStore({
model: 'Site',
proxy: {
type: 'ajax',
url: 'network.json',
reader: {
type: 'json',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
fullscreen: true,
title: 'Netzwerk',
displayField: 'sitename',
plugins: [new Ext.LeafSelectedPlugin()],
// add a / for folder nodes in title/back button
getTitleTextTpl: function() {
return '{' + this.displayField + '}<tpl if="leaf !== true">/</tpl>';
},
// add a / for folder nodes in the list
getItemTextTpl: function() {
return '{' + this.displayField + '}<tpl if="leaf !== true">/</tpl>';
},
store: store
});
}
});
And the structure of the json-file (only one node as example):
{
"items": [{
"id": "11",
"sitename": "Site A",
"items": [{
"id": "11",
"sitename": "Endpoint 1",
"last_connection": "2012-03-02T10:03:22+0100",
"ping_time": 63,
"leaf": true
}, {
"id": "12",
"sitename": "Endpoint 2",
"last_connection": "2012-03-02T10:03:22+0100",
"ping_time": 57,
"leaf": true
}],
"last_connection": "2012-03-02T10:03:22+0100",
"ping_time": 57
}]
}
Thanks!
I know this post is a little bit old, but if it would already be answered it would have saved me 2 "long" hours of my life, so here it goes:
I figured out I was missing the defaultRootProperty inside TreeStore. According to your JSON you need to set this property to items.
Here is how your TreeStore should look like:
var store = new Ext.data.TreeStore({
model: 'Site',
defaultRootProperty: 'items',
proxy: {
type: 'ajax',
url: 'network.json',
reader: {
type: 'json',
root: 'items'
}
}
});