I am using angular schema form directive to render the form. I am able to render all the elements except checkbox. When I use checkbox I get following error:
TypeError: Cannot read property 'default' of undefined
JS:
var ngSchemaForm = {};
ngSchemaForm.schema={
type: "object",
properties: {
cbProp: {
cb: { title: "I am checkbox", type: "boolean", default: false }
},
}
}
ngSchemaForm.cbSection={
type: "conditional",
condition: "model.currentSection=='cbSection'",
items: [
{
type: "section",
htmlClass: "row",
items: [
{
type: "section",
htmlClass: "col-lg-12",
items: [{ key: "cbProp.cb", type: "checkbox" }]
}
]
}
]
}
ngSchemaForm.form={
"type": "section",
"htmlClass": "container",
"items": [ ngSchemaForm.cbSection ]
}
var formApp = angular.module('formApp', ['schemaForm']);
formApp.controller('FormController', function ($scope) {
$scope.schema = ngSchemaForm.schema;
$scope.form = ngSchemaForm.form;
$scope.model = { currentSection: "cbSection" };
});
HTML:
<div id="formApp" ng-app="formApp" ng-controller="FormController">
<p></p>
<ng-form name="formApp" >
<div sf-schema="schema"
sf-form="form"
sf-model="model">
</div>
</ng-form>
</div>
changed:
items: [{ key: "cbProp.cb", type: "checkbox" }]
To:
items: [{ key: "cbProp.cb" }]
and worked
Related
I am using KendoUI - Grid component
How can I convert this into Kendo Grid:
For Eg:
I have created kendo grid (table) by using local data. As soon as I click on "Generate chart" button, above table's filter data should create the Kendo pie chart like below...
As I am new to Kendo, can somebody please suggest me the answer?
Code:
var localData = [
{
Id: 1,
userName: "John",
game: "A",
difficultyLevel: "Easy",
startTime: "25-05-2017",
endTime: "26-05-2017",
score: "210"
},
{
Id: 2,
userName: "Sam",
game: "B",
difficultyLevel: "Hard",
startTime: "04-11-2016",
endTime: "01-12-2016",
score: "4800"
},
];
var dataSource = new kendo.data.DataSource({
data: localData,
schema: {
model: {
fields: {
Id: {
type: "number"
},
userName: {
type: "string"
},
userName: {
type: "string"
},
difficultyLevel: {
type: "string"
},
startTime: {
type: "string"
},
endTime: {
type: "string"
},
score: {
type: "number"
},
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
scrollable: true,
height: 300,
sortable: true,
filterable: false,
groupable: true,
pageable: true,
columns: [{
field: "Id",
title: "Id",
filterable: true
}, {
field: "userName",
title: "userName"
}, {
field: "game",
title: "game"
}, {
field: "difficultyLevel",
title: "difficultyLevel"
}, {
field: "startTime",
title: "startTime"
}, {
field: "endTime",
title: "endTime"
}, {
field: "score",
title: "score"
}]
});
JsFiddle
You need to prepare your data to the chart's format. Something like:
$chartContainer.kendoChart({
dataSource: {
data: localData,
schema: {
parse: function(data) {
return data.map(x => {
return {
value: Number(x.score),
category: x.userName
}
});
}
}
},
series: [{
type: "pie",
field: "value",
categoryField: "category"
}],
tooltip: {
visible: true,
template: "#= category #: #= value #"
}
});
Updated Fiddle
I have a store with associated model and I need to include values of this associated model into selectfield component in Sencha Touch.
Here my parent model:
Ext.define('x.customer.model.CustomerModel', {
extend: 'Ext.data.Model',
requires:[
'x.customer.model.CustomerTemplateModel'
],
config: {
useCache: false,
idProperty: 'id',
fields: [
{
name: 'id',
type: 'string'
},
{
name: 'address',
type: 'string'
},
{
name: 'name',
type: 'string'
},
{
name: 'type',
type: 'int'
}
],
associations: [
{
type: 'hasMany',
associatedModel: 'Survey.customer.model.CustomerTemplateModel',
ownerModel: 'Survey.customer.model.CustomerModel',
associationKey: 'templates',
autoLoad: true,
name: 'templates'
}
]
}
});
and the children model:
Ext.define('x.customer.model.CustomerTemplateModel', {
extend: 'Ext.data.Model',
requires:[],
config: {
useCache: false,
rootProperty: 'templates',
fields: [
{
name: 'text',
type: 'string'
},
{
name: 'value',
type: 'string'
}
]
}
});
store:
requires: ['Survey.customer.model.CustomerModel'],
config: {
model: 'Survey.customer.model.CustomerModel',
proxy: {
type: 'ajax',
reader: {
type: 'json',
rootProperty: 'customers'
}
}
}
Currently the json has this structure:
{
"id": "00000001",
"address": "Antsy Road",
"name": "asfas",
"phone": "55555",
"openSurveys": 7,
"templates": [
{
"text": "123",
"value": "Template 1"
}
],
"type": 1,
"withSurveys": true
},
how to implement data included in the "templates" nested json in a selectfield?
thank you in advance
Once your store loaded and if you have one custommer:
var templatesData = []; // What will be inserted to the ComboBox
for (var i=0; i < custommers[0].get('templates').length; i++) { // Running threw the values and populating templatesData
var templateModel = custommers[0].get('templates')[i];
var templateCombo = {
text: templateModel.data.text,
value: templateModel.data.value
};
templatesData.push(templateCombo);
}
// Setting the values to the combobox
Ext.getCmp('myCombo').setStore(Ext.create("Ext.data.Store", {
model: 'x.customer.model.CustomerTemplateModel',
data :templatesData
}));
This is not a unique solution, you could create a new instance of store as well. Here is more information about how setting the "store" property for a combobox : http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.form.field.ComboBox-cfg-store
I have simple treeview with hierarchical data in 3 level in deep.
I load all data on load page.
I have simple schema
model: {
hasChildren: function (item) {
return item.items && item.items.length > 0;
},
id: "id",
children: "items"
}
Default filter work only on first level, How can I change this logic?
Not sure what you mean but default filter does not work only on first level. Check the following example where I show anything that starts with "F". You will see that it shows the root and node in the first level. What it does not show are nodes bellow a node that does not meet the condition of starting with "F" but that's what I would have expected.
var inlineDefault = new kendo.data.HierarchicalDataSource({
data: [
{
text: "Full",
items: [
{
text: "Furniture",
items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
]
},
{
text: "Decor",
items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
]
}
]
}
],
filter: { field: "text", operator: "startswith", value: "F" }
});
$("#treeview-left").kendoTreeView({
dataSource: inlineDefault
});
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<div id="treeview-left"></div>
I have been struggling with this issue and hit a roadblock. I have a kendo grid that has a dropdownlist.
Problem
When i edit a record by selecting a value in the DropdownList, the
field is not updated.
When i select the Add Command from the toolbar, a different
template tries to render and raises the error "Uncaught ReferenceError:
ParentMenu is not defined" in Chrome debugs. So nothing happens consequently.
When i comment out "values: parentRef" from the kendogrid columns definition all commands[Add,Edit] display properly
I have demonstrated the error i am experiencing here http://jsfiddle.net/BlowMan/5tNQy/
JS Code
$(function () {
var mbModel = kendo.data.Model.define({
id: "MenuId",
fields: {
"MenuId": {
type: "number"
},
"DisplayText": {
type: "string"
},
"MenuOrder": {
type: "number"
},
"MenuStatus": {
type: "boolean"
},
"HasKids": {
type: "boolean"
},
"ParentMenu": {
type: "number",
defaultValue: 1
}
}
});
var mbDataSource = new kendo.data.DataSource({
data: [{
"MenuId": 1,
"DisplayText": "Home",
"MenuOrder": 0,
"MenuStatus": true,
"HasKids": false,
"ParentMenu": null
}, {
"MenuId": 2,
"DisplayText": "Finance",
"MenuOrder": 1,
"MenuStatus": true,
"HasKids": false,
"ParentMenu": null
}]
});
var parentRef = [{
"value": 1,
"text": "Finance"
}, {
"value": 2,
"text": "Corp. Services"
}];
$("#menuBuilder1").kendoGrid({
columns: [{
field: "MenuId",
title: "Menu",
editable: true
}, {
field: "DisplayText",
title: "Name",
editable: true
}, {
field: "MenuOrder",
title: "Order",
editable: true
}, {
field: "MenuStatus",
title: "MenuStatus",
editable: true
}, {
field: "HasKids",
title: "Depends",
editable: true
}, {
field: "ParentMenu",
title: "ParentMenu",
values: parentRef
}, {
title: "Action",
command: ["edit"]
}],
toolbar: ["create"],
editable: "popup",
schema: {
model: mbModel
}
});
var mbObject = new kendo.data.ObservableObject({
data: mbDataSource,
//parentRef:[]
});
kendo.bind($("#menuBuilder1"), mbObject);
mbDataSource.bind("change", function (e) {
});
var grid = $("#menuBuilder1").data("kendoGrid");
grid.bind("save", function (e) {
var that = this;
that.refresh();
});
grid.bind("edit", function (e) {
});
$.ajax({
url: "/MenuBuilder/GetMenuWithKids",
dataType: "json",
type: "GET",
success: function (ret) {
mbObject.set("parentRef", ret);
}
});
});
HTML Code
<div id="menuBuilder1" data-bind="source:data"></div>
Am in a tight corner and any help will be much appreciated.
MustafaP solved Problem 1.
For problem 2,
I realised that i had placed the schema definition at the wrong place within the kendoGrid. I placed it at the bottom after the toolbar.
It should rather be placed just after the kendoGrid brackets
$("#menuBuilder1").kendoGrid({
schema: {
model: mbModel
},
columns: [{
field: "MenuId",
title: "Menu",
editable: true
I wanted to replace dojox.grid.DataGrid with new Dgrid but I have trouble with it. I'm using Dojo 1.9.1 and here is excerpts of my code:
HTML:
<script type="text/javascript"><!--
require({
baseUrl: "/res/js/",
packages: [
{ name: "dojo", location: "dojo/dojo" },
{ name: "dijit", location: "dojo/dijit" },
{ name: "dojox", location: "dojo/dojox" },
{ name: "put-selector", location: "put-selector" },
{ name: "xstyle", location: "xstyle" },
{ name: "dgrid", location: "dgrid" },
{ name: "allwins", location: "allwins" }
]
},[
"allwins/Admin",
"dojo/parser",
"dojo/domReady!"
],function(admin, Parser){
admin.initUi(/*...*/);
});
</script>
<!-- ... -->
<div data-dojo-id="invoicesTab2"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="region: 'center',
title: 'Faktury 2'">
<div id=invoicesGridTab2"></div>
</div>
JavaScript:
request(invoicesDataUrl, {
handleAs: "json"
}).then(function (response) {
var store = new Memory({ data: response });
var grid = new OnDemandGrid({
region: "center",
store: store,
columns: {
invoice_id: { label: "FID" },
user_id: { label: "UID" },
invoice_no: { label: "Číslo" },
user_fullname: { label: "Plátce" },
created_formatted: { label: "Vystavena" },
payment_date_formatted: { label: "Splatnost" },
payment_total: { label: "Částka" }
}
}, "invoicesGridTab2");
grid.startup();
});
I can add few more things:
List item
I have no errors at the JavaScript console
data source is already tested with using older dojox.grid.DataGrid
it seems that main problem is with the rendering
Thanks for any help or advice!
You need to specify the field attribute in your columns that match with the response data object, for example:
request(invoicesDataUrl, {
handleAs: "json"
}).then(function (response) {
var store = new Memory({ data: response });
var grid = new OnDemandGrid({
region: "center",
store: store,
columns: {
invoice_id: { label: "FID", field: "invoice_id" },
user_id: { label: "UID", field: "user_id" },
invoice_no: { label: "Číslo", field: "invoice_no" },
user_fullname: { label: "Plátce", field: "user_fullname" },
created_formatted: { label: "Vystavena", field: "created_formatted" },
payment_date_formatted: { label: "Splatnost", field: "payment_date_formatted" },
payment_total: { label: "Částka", field: "payment_total" }
}
}, "invoicesGridTab2");
grid.startup();
});
I do not know if those field names are correct, but I assume you would. :)