I'm trying to attach a local dataSource to Kendo Scrollview widget, but I'm having difficulty getting it to work.
The scrollView initializes properly, but unable to read from the dataSource.
<div id="scrollView" data-role="scrollview"></div>
var localArray = [{
name: "John"
}, {
name: "Doe"
}, ];
$("#scrollView").kendoMobileScrollView({
dataSource: localArray,
template: $("#kendo-template").html(),
contentHeight: 115
});
However, if I use the setDataSource method, it works just fine:
<div id="scrollView" data-role="scrollview" data-template="kendo-template"></div>
$("#accountCardScroller").data("kendoMobileScrollView").setDataSource(localArray);
What am I doing wrong? How do I force the scrollView widget to fetch from the dataSource?
That sort of sounds like a bug to me. Maybe try this instead, which will turn the array into a DataSource first:
var localArray = new kendo.data.DataSource({
data: [{
name: "John"
}, {
name: "Doe"
}]
});
Related
I need a default value for a field that I get from a datasource, and bind to that field using an observable. (That value can then be updated if needed by the user using a treeview). I can read the initial remote datasource, build the observable and bind the value to the field. I can then pop up a dialog, show a tree and return the values. What I cant seem to do is set the value of the observable because it is based on a datasource, and therefore seems to be a much bigger and more complicated json object which I am viewing in the console. I have also had to bind differently in order to get that working as well as shown below.
Below if just a snippet, but should give an idea. The remote data source returns just: {"name":"a name string"}
<p>Your default location is currently set to: <span id="repName" data-bind="text: dataSource.data()[0].name"></span></p>
<script>
$(document).ready(function () {
var personSource2 = new kendo.data.DataSource({
schema: {
model: {
fields: {name: { type: "string" }}
}
},
transport: {
read: {
url: "https://my-domain/path/paultest.reportSettings",
dataType: "json"
}
}
});
personSource2.fetch(function(){
var data = personSource2.data();
console.log(data.length); // displays "1"
console.log(data[0].name); // displays "a name string"
var personViewModel2 = kendo.observable({
dataSource: personSource2
});
var json = personViewModel2.toJSON();
console.log(JSON.stringify(json));
observName1 = personViewModel2.get("dataSource.data.name");
console.log("read observable: "+observName1);
kendo.bind($(''#repName''), personViewModel2);
});
After a lot of playing around, I managed to get the value to bind using:
data-bind="text: dataSource.data()[0].name"
but I can't find this documented anywhere.
Where I output the observable to the console, I get a great big object, not the simple observable data structure I was expecting. I suspect I am missing something fundamental here!
I am currently just trying to read the observable above, but can't get it to return the string from the json source.
personSource2.fetch(function(){
var data = personSource2.data();
console.log(data.length); // displays "1"
console.log(data[0].name); // displays "Jane Doe"
var personViewModel2 = kendo.observable({
dataSource: personSource2
});
var json = personViewModel2.toJSON();
console.log(JSON.stringify(json));
observName1 = personViewModel2.get("dataSource.data()[0].name");
console.log("read observable: "+observName1);
personViewModel2.set("dataSource.data()[0].name","Another Value");
observName1 = personViewModel2.get("dataSource.data()[0].name");
console.log("read observable: "+observName1);
kendo.bind($(''#repName''), personViewModel2);
});
I have JSON data flowing via Pusher to a simple MVC5 website housing a Kendo Grid. The data, upon arrival, renders successfully in the grid however I'm creating and setting the data source every time. As this seems sinful, I'm trying to determine why my approach to simply updating the data source doesn't render the data.
The grid:
<div id="dashboard"></div>
<script>
$(document).ready(function () {
$("#dashboard").kendoGrid({
columns: [
{ field: "SystemName", width: "50px", title: "System" },
{ field: "Description", width: "100px", title: "Description" },
{ field: "SystemStatus", width: "30px", title: "Status" }
],
height: 600,
scrollable: true,
sortable: true,
});
var dataSource = new kendo.data.DataSource();
var grid = jQuery("#dashboard").data("kendoGrid");
grid.setDataSource(dataSource);
})
</script>
My failed attempt to read in the data without creating and binding a new data source (body of a function call which does happen):
var array = JSON.parse(data.updateGrid);
var grid = jQuery("#dashboard").data("kendoGrid");
grid.dataSource.data = array;
grid.dataSource.read(array);
grid.refresh();
I have confirmed that the data arrives from Pusher correctly yet the above approach does not update the grid.
Thanks in advance for any consideration.
jbt
Use the data() method on the dataSource to set it's data.
var array = JSON.parse(data.updateGrid);
var grid = jQuery("#dashboard").data("kendoGrid");
grid.dataSource.data(array);
You can only set the string value of data on the dataSource if the source is of XML type. Since you are using JSON, you need to call the data function and pass in the new data.
See documentation... http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-data
I'm a newb in KendoUI and I'm trying to bind object like this:
var dataSource = new kendo.data.DataSource({
data: {
a:"A",
b:{
c:"C",
d:"D"
}
},
schema:{
model:{
fields:{
a: "string"
b: ???
}
}
}
})
to the kendo Grid. It's alright with "a" property, but I have no idea how to bind (and is it even possible) the content of "b".
Should I declare "b" as a separate DataSource?
I have googled a lot, but it seems, like I can't to formulate my problem correct...so, can anybody help with that?
This kind of binding is possible in kendo grid. you will be using something like the one given below
var dataSource = new kendo.data.DataSource({
data: {
a:"A",
b:{
c:"C",
d:"D"
}
},
schema:{
model:{
fields:{
a: "string"
'b.c': "string",
'b.d':"string"
}
}
}
})
This kind of binding works fine for me. Do check this out. If you are working with ASP.Net MVC, the posted JSON data is model bound perfectly too.
I'm beginning development of an app in extjs. I'm using the MVC approach, as provided in the extjs documentation.
I have some dynamic data which needs to present the user with a set of accordion controls. I've got the data in a store, but I do not know how to dynamically create the accordion items (unlike grid panels, there doesn't appear to be a store data method).
Here is my current accordion view code - with static items:
Ext.define('BP.view.induction.LeftPage', {
extend: 'Ext.Panel',
alias : 'widget.leftpage',
title: "Left Page",
layout: {
type: 'accordion',
align: 'stretch'
},
layoutConfig: {
// layout-specific configs go here
titleCollapse: true,
animate: true,
activeOnTop: true
},
items: [{
xtype: 'panel', // fake hidden panel, so all appear collapsed
hidden: true,
collapsed: false
},{
xtype: 'panel',
title: 'Panel 1',
html: 'Panel content!'
},{
xtype: 'panel',
title: 'Panel 2',
html: 'Panel content!'
},{
xtype: 'panel',
title: 'Panel 3',
html: 'Panel content!'
}]
});
Any guidance on how to achieve the above would be appreciated, thank you.
[Edit] In response to sra's request, here is my controller:
Ext.define('BP.controller.Induction', {
extend: 'Ext.app.Controller',
views: [
'induction.Binder'
],
stores: [
'Sections',
'Categories',
'Tasks'
],
init: function() {
console.log('Initialized Induction!');
}
});
I should note here that this controller loads a parent view, which in turn loads the LeftPage view - I'm not sure if this creates any scoping issues. Furthermore, as you can see, more than one store is loaded.
You can do like this (untested example with some tweaks)
Ext.define('BP.view.induction.LeftPage', {
extend: 'Ext.Panel',
alias : 'widget.leftpage',
title: "Left Page",
layout: null,
layoutConfig: null,
store: null,
attentive: true,
initComponent: function() {
var me = this;
// begin edit
// only set the store if is is not already defined
me.store = me.store ? me.store : Ext.StoreMgr.lookup('Sections'); // you may change this to any storename you want
// end edit
me.layout = { // don't set objects directly in class definitions
type: 'accordion',
align: 'stretch'
};
me.layoutConfig = { // dont set objects directly in class definitions
titleCollapse: true,
animate: true,
activeOnTop: true
};
me.callParent(arguments);
if (me.attentive) {
me.store('load', me.onRebuildContent, me);
if (me.store.count() == 0)
me.store.load();
} else {
me.buildContent();
}
},
buildContent: function() {
var me = this;
function addItem(rec) {
me.add({
xtype: 'panel',
title: rec.get('titleProperty'),
html: rec.get('bodyProprty')
});
};
me.store.each(addItem);
},
onRebuildContent: function() {
var me = this;
me.removeAll();
me.buildContent();
}
});
Your store will need at least two properties; one for the title and one for the content. And the store need to be loaded before you should instantiate this. But that can easily be done within your controller.
Edit based on comment and new OP info:
Well your view is a bit out of control of the controller. So I recommend you to simply use the StoreManager to receive a valid instance (I've edited the code, I just didn'T know the correct store to use). The StoreManager will know about the store as long as you list him within a controller (StoreManager is capable of much more, but that is all you need to know at the moment). For a further release you could also use the mixin bindable which would manage a storebinding more clean and enables you to update your accordion after the store receives new data (get updated)
Edit for readability
I've just cleaned it up a bit and included a switch param attentive which would allow you to use this component as directly bound to a store, reacting on all load events or as a sort of static one where the store should already be loaded. All in all this should give you a start without making it to complex.
I'm having a problem loading my nestedlist data when this list is shown inside of a panel.
Here is my code:
var titleBar = Ext.create("Ext.TitleBar", {
id: 'mainNavigationBar',
xtype : 'titlebar',
layout: 'hbox',
docked: 'top',
title : 'cSenchaTitleBar',
items:[
{
xtype:"button",
text:"Menu",
align:"left",
listeners:{
tap: function(){
nestedListxx.showBy(this);
}
}
},
]
});
var nestedList =
Ext.create('Ext.NestedList', {
displayField: 'text',
title:"cSenchaMenu",
store: "oNavStore",
id: 'mainNestedList',
xtype : 'nestedlist',
width:250,
useTitleAsBackText: false,
});
var nestedListxx = Ext.create("Ext.Panel", {
width:260,
items:nestedList
});
The problem is the following:
Say that if I change
nestedListxx.showBy(this); to nestedList.showBy(this);
It works like a charm, only there are no sleek black borders around the nested list.
But if I change it back it does show the nestedlist with the nice borders but without any data.
I know for sure that I forgot to set some key configuration, only the question is: which ones
You probably need to set a layout to your Ext.Panel.
Try :
var nestedListxx = Ext.create("Ext.Panel", {
width:260,
layout:'fit',
items:nestedList
});
Hope this helps