Hi I am using jquery appendGrid plugin to show drop down in one of the column. In following code the column name "Origin" has drop down option which works fine.
$(function () {
// Initialize appendGrid
$('#tblAppendGrid').appendGrid({
caption: 'My CD Collections',
initRows: 1,
columns: [
{ name: 'Album', display: 'Album', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '160px'} },
{ name: 'Artist', display: 'Artist', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '100px'} },
{ name: 'Origin', display: 'Origin', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Hong Kong', 2: 'Taiwan', 3: 'Japan', 4: 'Korea', 5: 'US', 6: 'Others'} }
]
});
However the I have a different list that I need to populate that is drop down the partial list is
"country": [
{
"value": "10",
"label": "United States"
},
{
"value": "10",
"label": "UK"
},
{
"value": "20",
"label": "Aland Islands"
},
{
"value": "30",
"label": "Albania"
}]
{ name: 'Origin', display: 'Origin', type: 'select', ctrlOptions: { objects: country } } }
when i run this i get output
<option value="objects">[object Object],[object Object],[object Object],[object Object]</option>
Please let me know how can I fix the origin column to show actual values rather than object object. Thanks
I am also having the same problem.
So I put my all values in an array.
Then I did like this:
var a = [];
var name;
for (var i = 0; i < data2.adjustmentEntrylist.objTracker_headAdjustmentEntryGridlist.length; i++)
{
name = data2.adjustmentEntrylist.objTracker_headAdjustmentEntryGridlist[i].Name; a.push(name);
}
$(function () { $('#tblAppendGrid').appendGrid({
initRows: 1,
columns: [ { name: 'Tracker Head', display: 'Tracker Head', type: 'select', ctrlOptions: a } ] });
});
Hope it will help.
Related
I have a kendo ui function dropdownlist, and it will call at Grid column editor. My question, by default how to display "Yes" when Add New Record in edit function. Currently it display null when Add New Record.
Demo in Dojo
Here I provide a working demo. Thank You
If I understand correctly you only have to add a default value to the Price in the Model?
"Price": {type: "string", defaultValue: "y" },
I include the whole function, just in case:
$(function() {
$("#grid").kendoGrid({
dataSource: {
data: [
{ Name: "Young John", Price: "y" },
{ Name: "John Doe", Price: "n" },
{ Name: "Old John", Price: "y" }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" },
"Price": {type: "string", defaultValue: "y" },
}
}
}
},
editable: "inline",
toolbar: ["create"],
columns: [{ field: "Name"},
{ field: "Price",
template: "#=(data.Price == 'y' ? 'Yes' : 'No')#",
editor: radioPrice
} ],
edit: function(e) {
if (e.model.isNew()) {
e.model.Price = 'y';
}
}
});
});
I am trying to pull an array from a different collection using collection2. I have been able to do this with objects using the following example for users:
users: {
type: String,
label: "Inspector",
optional: true,
autoform: {
firstOption: 'Choose an Inspector',
options: function() {
return Meteor.users.find({}, {
sort: {
profile: 1,
firstName: 1
}
}).map(function(c) {
return {
label: c.profile.firstName + " " + c.profile.lastName,
value: c._id
};
});
}
}
},
I would like to do the same but for an array of objects. Here is what the source data looks like:
{
"_id": "xDkso4FXHt63K7evG",
"AboveGroundSections": [{
"sectionName": "one"
}, {
"sectionName": "two"
}],
"AboveGroundItems": [{
"itemSection": "one",
"itemDescription": "dfgsdfg",
"itemCode": "dsfgsdg"
}, {
"itemSection": "two",
"itemDescription": "sdfgsdfg",
"itemCode": "sdfgsdgfsd"
}]
}
Here is what my function looks like:
agSection: {
type: String,
optional: true,
autoform: {
firstOption: 'Select A Section Type',
options: function() {
return TemplateData.find({}, {
sort: {
AboveGroundSections: 1,
sectionName: [0]
}
}).map(function(c) {
return {
label: c.AboveGroundSections.sectionName,
value: c.AboveGroundSections.sectionName
}
});
}
}
},
I know this, it's just not pulling the data for me. I am sure, I am just missing something small. I am trying to pull all objects within the AboveGroundSection array.
Your .map() is iterating over the set of documents but not over the arrays inside each document. Also I don't think your sorting is going to work the way you hope because of the inner nesting.
Try:
agSection: {
type: String,
optional: true,
autoform: {
firstOption: 'Select A Section Type',
options() {
let opt = [];
TemplateData.find().forEach(c => {
c.AboveGroundSections.forEach(s => { opt.push(s.sectionName) });
});
return opt.sort().map(o => { return { label: o, value: o } });
}
}
},
Also if your AboveGroundSections array only has a single key per element then you can simplify:
"AboveGroundSections": [
{ "sectionName": "one" },
{ "sectionName": "two" }
]
To:
"AboveGroundSections": [
"one",
"two"
]
I'm trying to use the Kendo Scheduler to show 3 different calendars. The scheduler itself is displaying properly, but the data is not being populated/displayed. I'm very new to JavaScript and I cannot seemed to figure out where the issue is. There are no errors on the page and it looks like it can see the JSON file, but is just not displaying the data.
Any help would be greatly appreciated!!
Here's the code:
<div id="example">
<div id="team-schedule">
<div id="people">
<input checked type="checkbox" id="fcpi" value="2">
<input type="checkbox" id="rpr" value="3">
<input checked type="checkbox" id="aaspg" value="1">
</div>
</div>
<div id="scheduler"></div>
</div>
<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2016/1/13"),
startTime: new Date("2016/1/13 07:00AM"),
height: 600,
views: [
"day",
"workWeek",
"week",
{ type:"month", selected: true},
"agenda"
],
timezone: "Etc/GMT",
dataSource: {
batch: true,
transport: {
read: {
url: "./calendars/Fiscal.json",
dataType: "jsonp"
}
},
schema: {
model: {
id: "taskId",
fields: {
taskId: { from: "TaskID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
ownerId: { from: "OwnerID", defaultValue: "1", type: "number" },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
},
filter: {
filters: [
{ field: "ownerId", operator: "eq", value: '1' }
]
}
},
resources: [
{
field: "ownerId",
title: "Owner",
dataSource: [
{ text: "AA & SPG Pay Run", value: '1', color: "#f8a398" },
{ text: "Foster Care Phone In", value: '2', color: "#51a0ed" },
{ text: "Residential Pay Run", value: '3', color: "#56ca85" }
]
}
]
});
$("#people :checkbox").change(function(e) {
var checked = $.map($("#people :checked"), function(checkbox) {
return parseInt($(checkbox).val());
});
var scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.filter({
operator: function(task) {
return $.inArray(task.ownerId, checked) >= 0;
}
});
});
});
</script>
And then some of the JSON data too:
[{"TaskID":1,"OwnerID":1,"Title":"AA & SPG Paid","Description":"AA: 1/1/2016 - 1/31/2016 SPG: 12/1/2015 - 12/31/2015","StartTimezone":null,"Start":"\/Date(1453334400)\/","End":"\/Date(1453420800)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":2,"OwnerID":1,"Title":"AA & SPG Supplemental","Description":"AA: 1/1/2016 - 1/31/2016 SPG: 12/1/2015 - 12/31/2015","StartTimezone":null,"Start":"\/Date(1453334400)\/","End":"\/Date(1453420800)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":3,"OwnerID":1,"Title":"Approve Payments","Description":"AA: 1/1/2016 - 1/31/2016 SPG: 12/1/2015 - 12/31/2015","StartTimezone":null,"Start":"\/Date(1452038400)\/","End":"\/Date(1452124800)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":4,"OwnerID":1,"Title":"Approve Payments","Description":"AA: 1/1/2016 - 1/31/2016 SPG: 12/1/2015 - 12/31/2015","StartTimezone":null,"Start":"\/Date(1452124800)\/","End":"\/Date(1452211200)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":5,"OwnerID":1,"Title":"Sent to Edison AA & SPG Supplemental","Description":"AA: 1/1/2016 - 1/31/2016 SPG: 12/1/2015 - 12/31/2015","StartTimezone":null,"Start":"\/Date(1452211200)\/","End":"\/Date(1452297600)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":6,"OwnerID":2,"Title":"Approve Payments","Description":"Pay Period: 1/1/16 - 1/15/16","StartTimezone":null,"Start":"\/Date(1453161600)\/","End":"\/Date(1453248000)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":7,"OwnerID":2,"Title":"Approve Payments","Description":"Pay Period: 1/1/16 - 1/15/16","StartTimezone":null,"Start":"\/Date(1453248000)\/","End":"\/Date(1453334400)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":8,"OwnerID":2,"Title":"Foster Phone In","Description":"Pay Period: 1/1/16 - 1/15/16","StartTimezone":null,"Start":"\/Date(1453334400)\/","End":"\/Date(1453420800)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":9,"OwnerID":3,"Title":"Residential Refresh","Description":"Refresh: 9/1/15 - 11/30/15|Final Refresh for Sept.","StartTimezone":null,"Start":"\/Date(1453248000)\/","End":"\/Date(1453334400)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":10,"OwnerID":3,"Title":"Residential Pay Run ","Description":"Pay Period: 12/1/15 - 12/31/15|December 2015","StartTimezone":null,"Start":"\/Date(1452038400)\/","End":"\/Date(1452124800)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":11,"OwnerID":3,"Title":"Residential Pay Run ","Description":"Pay Period: 12/1/15 - 12/31/15|December 2015","StartTimezone":null,"Start":"\/Date(1452124800)\/","End":"\/Date(1452211200)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"},
{"TaskID":12,"OwnerID":3,"Title":"Residential Refresh","Description":"Refresh: 9/1/15 - 11/30/15|Sept. thru Dec. 2015","StartTimezone":null,"Start":"\/Date(1452211200)\/","End":"\/Date(1452297600)\/","EndTimezone":null,"RecurrenceID":null,"RecurrenceRule":null,"RecurrenceException":null,"IsAllDay":"false"}]
Data do not seem to be correct , I made an example.
I think the problem is with the start and end dates, they are not consistent.
var YourData =[{"TaskID":1,"OwnerID":2,"Title":"Bowling tournament","Description":"","StartTimezone":null,"Start":"\/Date(1370811600000)\/","End":"\/Date(1453420800)\/","EndTimezone":null,"RecurrenceRule":null,"RecurrenceID":null,"RecurrenceException":null,"IsAllDay":false}];
var NewData =[{"TaskID":1,"OwnerID":2,"Title":"Bowling tournament","Description":"","StartTimezone":null,"Start":"\/Date(1453334400)\/","End":"\/Date(1370822400000)\/","EndTimezone":null,"RecurrenceRule":null,"RecurrenceID":null,"RecurrenceException":null,"IsAllDay":false}];
YourData dont work, but the NewData is working, I just test with first item.
Here the example.
http://dojo.telerik.com/uTOQe
Hope this help
I'm trying to implement a web-based Desktop application for administration purpose of my website. When I tried to rewrite the BogusMenuModule and BogusModule which are examples of ExtJS, I was unable to get deeper nodes of JSON by using myDataStore.load({callback:function(){...}}) inside of Ext.define('MyDesktop.BasicWindowModule', {...}) . I'm only able to get the first layer's ID.
If myDataStore(...) is outside of Ext.define(...) it works, but the problem is that it's unable to set parameters to 'win' which is an inside variable of Ext.define(...) .
Why I'd like to modify them is that I wanna implement a base-class module in order to pass taskbar ID to it and create a new taskbar instead of creating a new js file for my taskbar every time.
What I mean by deeper nodes is that if there's only one layer in JSON, it worked fine. But it doesn't work if the JSON looks like:
{
"BasicWindows": [
{
"id": 0,
"window": {
"id": 0,
"name": "ControlPanel",
"hasButton": false,
"configs": [
{
"id": 0,
"title": "ControlPanel",
"width": 640,
"height": 480
}
]
}
},
{
"id": 1,
"window": {
"id": 1,
"name": "Customers",
"hasButton": true,
"configs": [
{
"id": 1,
"title": "Customers",
"width": 400,
"height": 300,
"button": [
{
"text": "Submit"
},
{
"text": "Cancel"
}
]
}
]
}
},
{
"id": 2,
"window": {
"id": 2,
"name": "Reports",
"hasButton": false,
"configs": [
{
"id": 2,
"title": "Reports",
"width": 600,
"height": 400
}
]
}
}
]
}
And my modified BogusModule looks like:
Ext.require([
'Ext.data.*',
'Ext.form.*',
'Ext.window.Window'
]);
Ext.define('BasicWindow',{
extend: 'Ext.data.Model',
fields: [
{name: 'id', type:'int'}
],
hasMany : {model : 'myWindow', name : 'window'}
});
Ext.define('myWindow',{
extend: 'Ext.data.Model',
fields: [
{name: 'id', type:'int'},
{name: 'name', type: 'string'},
{name: 'hasButton', type: 'boolean'}
],
hasMany : {model : 'myConfigs', name : 'configs'},
belongsTo: 'BasicWindow'
});
Ext.define('myConfigs', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type:'int'},
{name: 'title', type: 'string'},
{name: 'width', type: 'int'},
{name: 'height', type: 'int'}
],
hasMany : {model : 'myButton', name : 'button'},
belongsTo: 'myWindow'
});
Ext.define('myButton',{
extend: 'Ext.data.Model',
fields: [
{name: 'text', type:'string'}
],
belongsTo: 'myConfigs'
});
var myDataStore = Ext.create('Ext.data.Store', {
model: 'BasicWindow',
proxy: {
type: 'ajax',
url : 'js/extjs/src/desktop/json/BasicWinConfig.json',
reader:{
type:'json',
root: 'BasicWindows'
}
}
});
var windowIndex = 0;
//function GetWindowName
Ext.define('MyDesktop.BasicWindowModule', {
extend: 'Ext.ux.desktop.Module',
init : function(){
this.launcher = {
//text: 'Auto Search',
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId:windowIndex
};
},
createWindow : function(src){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('BasicWindow');
var form = new Ext.form.Panel({
border: false,
fieldDefaults: {
labelWidth: 60
}
});
if(!win){
win = desktop.createWindow({
autoShow: true,
id: 'BasicWindow',
//title: 'Auto Search',
//width: 240,
//height:200,
//minWidth: 240,
//minHeight: 200,
layout: 'fit',
plain: true,
items: form
});
myDataStore.load({callback:function(){
alert('This is inside load callback');
myDataStore.each(function(rec) {
var window = rec.get('window');
alert(window.getId());
rec.each(function(conf){
alert(conf.getId());
win.add({
title: config.get('title'),
width: config.get('width'),
height: config.get('height')
});
});
});
}});
}
win.show();
return win;
}
});
Any comment or answer would be appreciated.
I figured it out! Add the line outside of Ext.define
var me = this;
and then
me.myDataStore.load(...);
Another question comes out. How can I load myDataStore if I move Models and DataStore definition to another .js file?
Any suggestion?
Ext.data.StoreManager.lookup('myDataStore');
This function didn't work for ExtJS4 in my case.
I have a problem with loading data from store. Please tell me what I do wrong. I am using ExtJS 4.1.
Request sends properly, i haven't troubles like file not found or something like that. It also works if I had few stores, and any of this stores loading one 'data type' to his model, for example urls1. But if I have one store and one big model, data don't display.
I have a JSON like this:
{
"root": {
"tName": "name",
"urls1": [{
"url": "http:// ..... :09'"
}, {
"url": "http:// ..... :10'"
}],
"perS": "",
"perD": "",
"urls2": [{
"url": "http:// ..... :0009'"
}, {
"url": "http:// ..... :0010'"
}],
"val2": "",
"list2": [{
"level": "lvl1"
}, {
"level": "lvl2"
}],
"types": [{
"type": "type2"
}, {
"type": "type4"
}],
"accs": [{
"login": "login",
"pass": "p1",
"port": "8858",
"conType": "type3",
}, {
"login": "login3",
"pass": "p13",
"port": "88583",
"conType": "type2",
}]
}
}
My Model:
Ext.define('ACT.model.myModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'tname'},
{name: 'urls1'},
{name: 'psec'},
{name: 'pday'},
{name: 'urls2'},
{name: 'list2'},
{name: 'types'},
{name: 'accs'},
]
});
My Store:
Ext.define('ACT.store.dataStore', {
extend: 'Ext.data.Store',
storeId:'mStore',
model: 'ACT.model.myModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'resources/data/configuration/MyConfig.json',
reader: {
type: 'json',
root: 'root',
successProperty: 'success'
}
}
});
and my initComponent function in view:
initComponent: function() {
var me = this;
this.columns = [
{
xtype: 'checkcolumn',
text: ' ',
width: 100,
sortable: false,
hideable: false,
allowBlank: false
},
{
text: 'URL',
width: '85%',
dataIndex: 'urls1',
sortable: true,
hideable: false
}]
this.callParent(arguments);
}
});
The above should load urls1 into the store correctly, however, the data type is array. So the data is in the store but it is only not displayed in the grid as dataIndex points to that array.
You can create another model for urls and associate it with the master model.