We Keep Coding

How can I show custom events on Kendo UI Scheduler?

I have a Kendo UI Scheduler with a timeline view in which as one of the resources, a list of Persons names are being dynamically populated in the Scheduler. To get that data, I created a remote webservice responsible to get a proper communication between the database and the front-end. When I created the web service, I also created a method called GetPersons in VB that retrieves me the data in JSON format for me to use.
resources: [{
field: "UserID",
name: "Persons",
dataTextField: "Name",
dataValueField: "Name",
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: 'Service/JSON/GetPersons'
},
schema: {
type: "json",
data: "GetPersonsResult.RootResults"
}
}
),
multiple: true,
title: "name"
Now, to explain my issue:
I have a table on the database with the following fields: ID, PersonID, TypeOfEventID, startDate and endDate. In this table, I created three events just to try testing and to be related with the Persons.
I am trying to see in the Scheduler all those events I created but so far, nothing shows up. My logic was the same as with the GetPersons method. I created a new VB file called GetEvents to get me the events in the web service from the database to be retrieved and used in JSON format later. With this JSON data, I was planning to see the events I created. Just like it happend with the GetPersons method.
The view used it's a custom one based on the timelineMonth type. Every row has a different Person name and for each Person, specific events of different types might be seen.
Here's a fiddle with my script
So far, I can not see any events neither the Scheduler pop-window that shows up when I do double click inside the Scheduler.
Any tip of how to associate all these sort of things? I have no idea if I need to create another dataSource, neither I know what to put exactly on the resources and/or schema/model section.

One month after, nobody answered to my question and because of this I believe that I should post the solution:
The main thing that I had to do, was to create my second type of resources in a proper way. So, very simply... I did this:
{
field: "EventType",
dataValueField: "EventTypeID",
dataTextField: "descr",
dataColorField: "Color",
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: './../Services/BlahBlahBlahDomainService.svc/JSON/GetEventType'
}
},
schema: {
type: "json",
data: "GetEventsTypeResult.RootResults",
total: "GetEventsTypeResult.TotalCount"
}
}
)
}
Besides that, I discovered some other little issues. For example:
the editable option was disabled;
both resources dataSource had no "schema.total" field defined and that options is needeed once the "schema.data" field is called;
a "dataTextField" property from one of the resources was missed;

Extjs 4, How to send multiple metaData for multiple dynamic grids, using a single Json file

I need to create 8-10 grids on a single panel, using accordion Layout. All grids would be created dynamically using the metaData object in JSON and metachange listener event on my store and reconfigure my grid accordingly (Pretty standard process) . But is there a way to use a single JSON file containing metaData and Data of more than one grid. So that I can use multiple stores to read a single JSON.
Something Like this would be good:
"grid1" :
{
"metaData" : {---"root":"data1"-----------}
},
"grid2" :
{
"metaData" : {----"root":"data2"----------}
},
"data1" : {------------------},
"data2" : {-----------------}
I already tried using metaProperty tag in my store, but that approach doesn't seem to work for me(ExtJs 4.1.3) .
Store Proxy:
proxy: {
type: 'ajax',
url: 'MultiData.json',
reader: {
type: 'json'
// metaProperty : 'grid1', //Doesn't work, hence commented
}
Store Listener:
'metachange' :function (store, meta) {
Grid.reconfigure(store, meta.columns);
}
NOTE: The above code works perfectly when I have only one metaData and data tag in JSON

How about this :
Get all the data you need using a single Ext.Ajax Call
Split the data into parts as you need.
use store.loadData() to load directly to store. This should also trigger the metachange listener and configure the grid accordingly. If it doesn't you can use the configure() property of the grid : grid.reconfigure(store,columns)
http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.Store-method-loadData
http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.grid.Panel-method-reconfigure

Display JSON Data using Alloy UI

I'm simply tring to parse json data and have it display in a datatable using Alloy UI's framework
YUI().use(
'aui-datatable', 'json-parse',
function(Y) {
var columns = [
{ key: 'ID', sortable: true },
{ key: 'Name', sortable: true }
];
var jsonstring = '{"info":['+
'{"ID":"100", "Name":"Roy"},'+
'{"ID":"200", "Name":"Moss"},'+
'{"ID":"300", "Name":"Jen"}'+
']}';
try {
data = Y.JSON.parse(jsonstring);
}
catch (e) {
alert("Invalid data");
}
new Y.DataTable(
{
columns: columns,
data: data
}
).render("#mySearchResultsContainer");
}
1) How would I map ID and Name to the columns in my datatable?
2) How might this be accomplished using data from an external json file?

Here you go: http://jsfiddle.net/9wd8jqtL/
The main problem was that the data you pass into DataTable needs to be an array: you were passing the object. Passing in data.info provides it with the array you want:
new Y.DataTable(
{
columns: columns,
data: data.info
}
).render("#mySearchResultsContainer");
Also, you need to include the Alloy UI data table script one way or another, I think. I certainly did on the jsfiddle to get it working (also I think there may be issues with newer versions of YUI on jsfiddle too), but that shouldn't be an issue elsewhere.
On getting external data, it depends where it's coming from. But most likely you'll need Y.io or similar to load the data, and have your table building function in the callback for when the data returns.

Nested data in ExtJS

I download several entities one ajax-request. Then i add them to stores. I need to commit a changes alike one ajax-request. How properly to do it?
Json structure:
{
entity1: [],
entity2: [],
entyty3: []
}
success: function(responce) {
var data = Ext.decode(response.responseText);
store1.add(data['entity1']);
store2.add(data['entity2']);
store3.add(data['entity3']);
}

Well, you can send it as JSON and that can easily be done as follows:
Ext.Ajax.request({
url: 'YourURL',
jsonData: YourObjectRef, // can be any object / array or JSON string
success: function(response, opts) {
// your code
}
});
And if you want to do it with a store use the type auto for the Modelfield. This type can contain any object.
Check the following references:
ExtJs 4.0.7 Stores
ExtJs 3.4.0 Stores
Kindly check autoSync property to automatically sync the Store with its Proxy after every edit to one of its Records. Defaults to false.

you may use like this. because in extjs4, it's necessary to use the model to create a record
success: function(responce) {
var data = Ext.decode(response.responseText),record;
Ext.each(data,function(entity,index,dataItself){
record = Ext.create('YOURMODEL',entity);
store.add(record);
});
}

How to retrieve Ext.data.JsonStore data in sencha

I have the following code -
var options = new Ext.data.JsonStore({
model: 'options_model',
data: [
{ id: 1, option1: 'Alope', status1: 'true',option2: 'Option2', status2: 'false',option3: 'Option3', status: 'false',option4: 'Option4', status4: 'false' }
]
});
Now how can I retrieve data of option ???

I suggest you put your data into maybe a filename.json file (this is to maintain the scalability and integrity of your code).
Anyway, wherever it is you store your data, this is the code you need:
Ext.Ajax.request({
url: 'path_to_ur_json_file_wrt_html_file/filename.json', //in my case it was data/xyz.json since my folder layout was : abc.html, app, data, lib, stylesheets; and my data.json was in the data folder :)
timeout:3000, //how long it shud try to retrieve data in ms
method:'GET',
success: function(xhr) {
jsonData = Ext.util.JSON.decode(xhr.responseText);
var data4u = jsonData.data[0].option1;
}
});

First, JsonStore is not really a class to use. It's internal to Sencha and may be removed at any time. You should use Ext.data.Store instead.
Second, many of the out-of-the-box components in Sencha receive a store as confguration options so you don't have to worry about the inner workings.
Finally, if you do need to access store's data, you can do so by using each, getAt or find methods, depending on your needs and the way you want to access your data (random access, sequential or search).
I suggest you to go over this documentation:Sencha 1.1 Documentation