I have a Kendo HierarchicalDataSource object bound to a Kendo treeview widget.
The HierarchicalDataSource simply returns a one-level-deep json formatted object, but for some reason it won't render in the treeview. It just shows the top node "Dimensions", but renders no data when expanded.
Here is my plunk treeview sample , which contains index.html and script.js .
FYI for script.js :
$scope.dimenDataSource is the Kendo HierarchicalDataSource object which uses the transport property to call my method getDimensionsFromServer2 and also specify the schema.
Another FYI: In getDimensionsFromServer2() I have two ways of returning my test data. The dataFlat var returns a flat array, which renders fine. The data object has nested data, but does NOT render in treeview.
I'm not sure what's going wrong.
Thank you,
Bob
**** UPDATE ****
The problem was the incorrect placement of the schema setting (see my answer):
settings.dimenDataSource = new kendo.data.HierarchicalDataSource({
transport: {
read: function(options){
datacontext.getDimensionsFromServer().then(function (data) {
var rootnode = [{ name: "Dimensions", items: data.data }];
options.success(rootnode);
});
},
schema: {
model: { children: "items" }
},
loadOnDemand: false
}
});
My mistake was in the schema placement, which I had inadvertently placed in the transport option. It should placed at the same level, not within it.
Here's is the corrected version:
settings.dimenDataSource = new kendo.data.HierarchicalDataSource({
transport: {
read: function(options){
datacontext.getDimensionsFromServer().then(function (data) {
var rootnode = [{ name: "Dimensions", items: data.data }];
options.success(rootnode);
});
},
loadOnDemand: false
},
schema: {
model: { children: "items" }
}
});
Related
Backgrid is rendering
<table class="backgrid"></table>
but nothing else. Breakpoints in Backgrid:render() are not reached. I'm a Backbone newbie adapting someone else's code and so am not sure exactly what should be happening but LayoutManager:render() is called..it just never seems to get to Backgrid... The data I want to display are being fetched and look as if they are in the right format...but have to admit that it's difficult to tell once they've been wrapped up in a Backbone collection. Any pointers for how to debug/why Backgrid's render is not being called gratefully received.
Code below:
ListenView.js
define([
'backbone',
'underscore',
'backgrid',
'app/models/PersonModel',
'app/collections/PersonCollection',
'app/views/PersonListView',
'hbs!app/templates/listen_template'
],
function(
Backbone,
_,
Backgrid,
Person,
PersonCollection,
PersonListView,
listenTemplate
) {
App = window.App || {};
var ListenView = Backbone.View.extend({
template: listenTemplate,
initialize: function(params) {
//fetch the list of seen people
this.model.attributes.seenPeople.fetch( {
success: function(coll, resp) {
//console.log(coll);
}
});
},
afterRender: function() {
//initialise person view
console.log("creating Backgrid");
this.seenPeopleView = new Backgrid.Grid({
columns: [{
name: "email",
label: "Email",
cell: "string"
},{
name: "id",
label: "ID",
cell: "integer"
}, {
name: "title",
label: "Title",
cell: "string" }
],
collection: this.model.attributes.seenPeople
});
this.seenPeopleView.render();
$('#seen-people-list').append(this.seenPeopleView.el);
}
On the success method from the fetch you should call afterRender.
var self=this;
this.model.attributes.seenPeople.fetch( {
success: function(coll, resp) {
self.afterRender();
}
});
Instead of creating backgrid instance in view (this.seenPeopleView) create instance as
var grid = new Backgrid.Grid({...<your columns and collection related code>..});
Then Render the grid and attach the root to your HTML document as
$('#seen-people-list').append(grid.render().el);
Hope it will work :)
I am using Restangular to resolve an response (a list of products)...I know this is being resolved OK.
I am new to Kendo-UI. But have set up a basic test grid as below. I am using k-rebind, as the products array is likely not resolved at the time the grid is created.
<kendo-grid k-options="mainGridOptions" k-rebind="products"></kendo-grid>
In my controller:
$scope.products = [];
$scope.therapyAreas = [];
$scope.dropDownTAs = [];
prProductService.getProducts().then(function(products) {
$scope.products = products;
prTAService.getTAs().then(function(tas) {
$scope.therapyAreas = tas;
for(var i = 0; i < $scope.therapyAreas.length;i++) {
$scope.dropDownTAs.push({id: $scope.therapyAreas[i].id, therapyArea: $scope.therapyAreas[i].therapyArea});
}
});
});
$scope.mainGridOptions = {
dataSource: {
data: $scope.products
},
height: 550,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
"productName",
"activeIngredients",
"productComments",
"gpt",
"ta"
]
};
}])
I know the products array is being returned, and I would have thought k-rebind would watch the products array for changes so when it is resolved it refreshes the UI...no such luck.
I have tried bashing in a manual array into the data source to mirror the response for the products array, and the grid works fine.
Regards
i
You are absolutely correct that the Kendo UI Grid will initially not have access to the data, so when the Grid gets rendered on the page it will simply bind to an empty array - giving you no data. You're also correct to use the k-rebind attribute in this scenario, since it should keep an eye out for when the scope changes.
However, one important thing that you missed is that k-rebind should be set to the same as your options, as mentioned in this documentation article. This can easily be missed, but I've used this before in similar scenarios.
So, while I haven't tested this I believe the following should work for you:
<kendo-grid k-options="mainGridOptions" k-rebind="mainGridOptions"></kendo-grid>
i got the same error. But this worked for me:
in the html view code:
<kendo-grid data-source="vm.kendoData.data"
sortable="true"
options="vm.gridOptions">
</kendo-grid>
in the angular controller:
vm.kendoData = new kendo.data.DataSource({});
vm.getRegistros = function () {
vm.loading = true;
registroDePontoService.registrosPorPeriodo(vm.registroPorPeriodo)
.success(function (result) {
vm.kendoData.data = result.registros;
}).finally(function () {
vm.loading = false;
});
};
vm.gridOptions = {
columns: [{
field: "date",
title: "Date",
width: "120px"
}, {
field: "column1",
title: "column1",
width: "120px"
}, {
field: "column2",
title: "column2",
width: "120px"
}]
(Let me preface with I am new to Backbone and Backgrid.) I am using Backgrid and select-all extension and I was having issues "catching" the event that the select all fires in my containing/parent view. I want to show a details view when a row is selected in the master grid. So, I need the select event in the grid to bubble up to the parent view so it can show the details in another view.
var view = Backbone.View.extend({
el: '.grid',
initialize: function () {
var columns = [{
name: "id",
label: "ID",
editable: false,
cell: "string"
}, {
name: "",
label: "Action",
cell: "select-row"
}];
var grid = new Backgrid.Grid({
columns: columns,
collection: this.collection
});
$("#backgrid").append(grid.render().$el);
});
});
Now I am thinking I want to add something like this to the view
events: {
"backgrid:select": "<name of the function i want to call>"
}
But that doesn't seem to work. Any help would be appreciated.
I was able to answer my own question...in the view add....
this.collection.on('backgrid:selected', function(model, selected) {
//do what i need here
});
backgrid is already triggering the event backgrid:select (which is handled via the model) but it also triggers the event backgrid:selected which bubbles up in the collection...which in turn is accessible via the parent view.
A reference to the official API documentation pointing this out can be found here
I would like to reload items in the carousel onPainted() method. So whenever users come the carousel item then we have a fresh list of carousel items. Problem at this point of time (please have a look at the source code), the carousel reloads items, however until I touch the carousel, the first carousel item is blank (or not selected) and no items selected. I would like at least to see the first element to be selected.
So here is the simplified source code:
Ext.define("APN.view.FeaturedCarousel", {
config: {
listeners: {
painted: function(carousel, eOpts) {
var features_url = Ext.getStore("regionalisation").getRegionalisedMenus().feature.url;
this.setCarouselStore(features_url);
}
}
},
initialize: function () {
this.callParent();
var me = this;
var features_url = Ext.getStore("regionalisation").getRegionalisedMenus().feature.url;
this.setCarouselStore(features_url);
},
setCarouselStore: function (features_url) {
var me = this;
Ext.Ajax.request({
url: features_url,
success: function (response) {
me.removeAll();
if (!xml) return;
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: [
],
data: xml,
proxy: {
type: 'memory',
reader: {
type: 'xml',
rootProperty: 'xml',
record: 'item'
}
}
});
store.each(function (record) {
var item = Ext.create("Ext.Container", {
html: "some HTML HERE"
});
me.add(item);
});
}
});
}
});
I think you should activate the first item in the carousel once all the items are added. Like this:
store.each(function (record) {
var item = Ext.create("Ext.Container", {
html: "some HTML HERE"
});
me.add(item);
});
me.setActiveItem(0);
This should make the first item selected.
If you want to change the carousel content every time it is activated, use "active" listener. Because "painted" will be called only once and if you want that, then no point in adding a painted event because you are already calling the "setCarouselStore" function in "initialize" method.
I'm trying to add a bunch of components to my container using data populated in my store. I want to iterate through my stores records and output a label/panel/etc to display the data.
This is how I'm looping through now:
initComponent: function () {
//Create a container for each array, then in that container,
//create a label and wrapping panel, then add the items to the wrapping panel
this.store = Ext.create('Ext.data.Store', {
model: 'MyProject.model.ItemArray',
data: []
});
Ext.apply(this, {
items: [
this.store.each(function() {
{
xtype:'label', text:
'test'
}
})
]
});
this.callParent(arguments);
}
But of course, being the EXTJS noob that I am, this doesn't work. I would appreciate any advice and best practice tips you can provide to get this working.
My model, ItemArray, contains Items. I need to loop through my store of ItemArrays and make containers, then loop through the Items in the ItemArray populate those containers with Items.
Thanks everyone!
You need to load your store first, then on the store callback generate your labels.
var me = this;
me.store.load(function(records) {
Ext.each(records, function(record) {
//Add a container for each record
me.add({
xtype: 'container',
items: [] //your labels here
});
});
});
Your store is not populated yet in your example. It also loads asynchronous so there will be a slight delay.
Ext.define('Foo', {
initComponent: function(){
// assumes store is loaded with data
var store = new Ext.data.Store(),
items = [];
store.each(function(rec){
items.push({
html: rec.get('aField')
});
});
this.items = items;
this.callParent();
}
});