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;
Related
I have some client-side JSON and want to use to "quickly" experiment with various controls without writing all the REST API calls. All I want to do is point any given Kendo DataSource to the local array of data I already have instead of writing all the extra's...but nothing I do works.
I have tried various online examples...can someone direct me to something that actually works?
EXAMPLE:
This particular example is for their Donut Chart using Angular, but I cant use their data calls because of CORS & I am getting tired of writing a new set of REST calls every time I merely want to experiment with a particular control.
var data = [{ ... }, { ... }]
$scope.screenResolution = new kendo.data.DataSource({
// I dont want this at the moment
//transport: {
// read: {
// url: "http://demos.telerik.com/kendo-ui/content/dataviz/js/screen_resolution.json",
// dataType: "json"
// }
//},
sort: {
field: "order",
dir: "asc"
},
group: {
field: "year"
}
});
Datasource has a data property that you can set to a local array.
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-data
I'm using Select2 version 4.0.0 and trying to load a remote JSON from a PHP script that returns the already formated data that I need. The problem is that the forces of the darkness are making something, because I just can't send the request, there is no error, but there is no request sent, it just stays so quiet as a devil that I'm almost crying!
I'm using LiveScript and Jade as alternatives to JavaScript and HTML, but I'll translate'em here.
First, my markup defines the selectable field:
<select id="satan-hates-me"></select>
Then, I'm able to make it look like a selectable element:
$("#satan-hates-me").select2({
placeholder: "Hail",
minimumInputLength: 1,
ajax: { // Here that bad things happen, I mean, don't happen
url: "http://localhost/os/backend/TestServiceOrder.php?req=getEquipments",
dataType: "json",
type: "GET",
quietMillis: 50,
data: function(term) { return { term: term } },
results: function(data) { return data; }
}
});
I'm performing this wrapped in a load function, after page loading, it looks like a selectable, but sends no requests, and the script returns me exactly the required format, as example:
[{id: 1, text: "Sadness"}, {id: 2, text: "Depression"}]
And here goes. I can design compilers but I can't in the world make a plugin work with Ajax! Can somebody help me, please?
Finally resolved the issue.
<input> is not supported in select2 v4
.You have to use <select> element instead
In my case, it was a general select2-call of .select2-Elements in the footer of all my templates:
$('.select2').select2();
Event though my select for the Ajax-Request didn't have that class at all (I called it via an id), I had to change the above to
$('select.select2').select2({theme: 'classic'});
I guess select2() creates several elements with the class .select2, so that might interfere
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
For now I have
require([
"dojo/on", "dgrid/OnDemandGrid","dgrid/Tree","dgrid/Editor", "dgrid/Keyboard", "dojo/_base/declare",
"dgrid/data/createHierarchicalStore", "data/projects_data",
"dojo/domReady!"
], function(
on, Grid, Tree, Editor, Keyboard, declare, createHierarchicalStore, hierarchicalCountryData
){
var count = 0; // for incrementing edits from button under 1st grid
function nbspFormatter(value){
// returns " " for blank content, to prevent cell collapsing
return value === undefined || value === "" ? " " : value;
}
var StandardGrid = declare([Grid, Keyboard, Editor, Tree]);
window.grid = new StandardGrid({
collection: createHierarchicalStore({ data: hierarchicalCountryData }, true),
columns: [
{renderExpando: true, label: "Name", field:"variant_name", sortable: false, editor: "text", editOn: "dblclick"},
{label: "Visited", field: "bool", sortable: false, editor: "checkbox"},
{label:"Project", field:"project", sortable: false, editor: "text", editOn: "dblclick"},
{label:"locked", field:"locked", editor: "text", editOn: "dblclick"},
{label:"modified", field:"modified", editor: "text", editOn: "dblclick"},
{label:"summary", field:"summary", editor: "text", editOn: "dblclick"}
]
}, "treeGrid2");
grid.on("dgrid-datachange", function(evt){
console.log("data changed: ", evt.oldValue, " -> ", evt.value);
console.log("cell: ", evt.cell.row.id, evt.cell.column.field);
});
grid.on("dgrid-editor-show", function(evt){
console.log("show editOn editor: ", evt);
});
grid.on("dgrid-editor-hide", function(evt){
console.log("hide editOn editor: ", evt);
});
});
data/projects is a js file containing the data. but how to connect this dGrid now to a MySQL database? Can't find any good information in the docs. I think might be something with JSON rest but not sure about this.
Addition:
I can show the db in an HTML Table. is there a suitable possibilty to populate dGrid from a HTML Table?
I am still missing something. Have connections from
Database -> PHP
but can't get result in a proper JS to load into dStore.
The simplest path forward is to write a service in your server-side language of choice (sounds like PHP in this case) that produces JSON output based on the data in your MySQL database. Depending on the potential size of your data, you can potentially design your data to work with one of two out-of-the-box stores in dstore: Request (and Rest if write operations are also involved), or RequestMemory.
The simpler of the two is RequestMemory, which simply combines the features of the Memory store with an up-front server request (via Request). This store will expect the service to respond with one complete data payload: an array of objects where each object is a record in your database. Something like this:
[
{
"id": 1,
"foo": "bar"
},
{
"id": 2,
"foo": "baz"
}
]
The Rest store expects data in the same format, but also expects the service to handle filtering, sorting, and ranges. Filtering and sorting are represented via query string parameters (e.g. foo=bar&baz=bim in the simplest case for filter, and sort(+foo) or sort(-foo) for sort), while ranges are typically represented via the HTTP Range header (e.g. Range: Items 0-9 for the first 10 items).
Implementing a service for the Rest store is obviously more work, but would be preferable if you're expecting your data source to potentially have thousands of items, since RequestMemory would have no choice but to request all of the items up-front.
With either of these stores, once you have a service that outputs JSON as appropriate, you can create an instance of the store with its target pointing to the service endpoint, then pass it to a grid via the collection property.
If your data is intended to represent a hierarchical structure, it should still be possible to mix dstore/Tree into dstore/RequestMemory or dstore/Request, provided that your hierarchy is represented via parent ID references. By default, Tree filters children via a parent property on each item, and reports mayHaveChildren results by inspecting a hasChildren property on each item.
I have a form with a combo box in it. The combo box loads it's data via a Json store and I use form.getForm().load( url: 'URL') to load the forms data also from a Json store.
When the data is loaded into the form I can see via Firebug that it receives the right value, the combo then displays the correct corresponding display value. When I look at the HTML in FireBug for the hiddenField it says the value="DISPLAYVALUE" not value="VALUE". When I then pick any value from the combo it changes to the correct value="VALUE".
Of course if the user never changes the combo the wrong value is submitted. Is this by design/limitation or am I missing something.
Do I really need to load and verify the data for each combo before I do the getForm().load()? wouldn't it make sense for load() to just load the complete data even if that means loading the data from a store?
I've included simplified sample code that has the issue.
Ext.onReady(function(){
var frmClientRecord = {
xtype: 'form',
items: [
{
fieldLabel: 'Advisor',
xtype: 'combo',
id: 'advisorName',
displayField: 'Advisor',
valueField: 'advisorId',
hiddenName: 'advisorsId',
mode: 'remote',
store: new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: '/referrals/index.php/advisors/read',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'results',
fields: [
{name: 'advisorId'},
{name: 'Advisor'}
]
})
})
}
]
}
frmClientRecordCmp = new Ext.FormPanel(Ext.apply(frmClientRecord));
frmClientRecordCmp.getForm().load({
url: '/referrals/index.php/clients/getbyid/100',
})
frmClientRecordCmp.render(document.body);
});
JSON FOR THE COMBO
({"results":[{"Advisor":"Chris","advisorId":33},{"Advisor":"Fawzia","advisorId":2},{"Advisor":"Kent","advisorId":3},{"Advisor":"Rob","advisorId":4},{"Advisor":"Stephanie","advisorId":5}]})
JSON FOR THE FORM
{success: true, data: {"advisorsId":33}}
This could happen if your form is loading before the combo store loads. (Given that rest of your code looks Ok)
I suspect this will resolve if you render your form before loading it.
(move frmClientRecordCmp.render(document.body); one statement up in your sample code)
EDIT
Two points to consider-
Are you sure the combo store has finished loading before the form loads?
Looking at ComboBox's valueField documentation, it looks like a call to combo.setValue may be necessary after the form loads. Something along the lines of -
frmClientRecordCmp.getForm().load({
url: '/referrals/index.php/clients/getbyid/100',
success:function(form,action){
form.findField('advisorName').setValue(action.result.data.advisorId);
}
});
It was a problem I had caused by using the id: 'advisorName'. I was returning a field also named 'advisorName' so it was filling it even though I was specifying a hiddenName value. The moral is make sure your id is unique and not a field name.