I am having a basic problem which prevents me from developing a custom plugin based on KendoGrid. When I do this:
var ds = kendo.data.DataSource.create({
data: [
{ FirstName: "Joe", LastName: "Smith" },
{ FirstName: "Jane", LastName: "Smith" }
]
});
then ds.view() returns an empty array. Same with an alternative constructor: new kendo.data.DataSource({})
What am I doing wrong?
Your data is not available because the view() method "...should be used within the change event handler or the fetch method.".
Your code should look something like this.
var ds = new kendo.data.DataSource({
data: [
{ FirstName: "Joe", LastName: "Smith" },
{ FirstName: "Jane", LastName: "Smith" }
]
});
ds.fetch(function() {
var view = ds.view();
console.log(view[0].FirstName); // displays "Joe"
});
View the documentation for the view method here.
Related
I have an Object and I need to add two arrays for that like shown below, for FoodServices object I need two arrays and when I run the query, FoodServices is returned as NULL... Can anyone help me with this? Thanks in advance
const ProjectSchema = new mongoose.Schema({
locationName: {
type: String,
},
foodServices: {
type: String,
availableServices: ['Chicken','Mutton','Cake','Drinks','Chocos'],
nonAvailableServices: ['Prawns','Crabs','Fish']
},
});
Here is my mutation
const mutation = new GraphQLObjectType({
name : 'Mutation',
fields : {
// Add a Project
addFood : {
type : FoodType,
args : {
locationName: { type: GraphQLNonNull(GraphQLString) },
address: { type: GraphQLNonNull(GraphQLString) },
phoneNumber: { type: GraphQLNonNull(GraphQLString) },
foodServices : {
type : new GraphQLEnumType({
name: 'FoodStatus',
values: {
availableServices: {value :'Chicken', value :'Mutton', value : 'Cake', value:'Drinks',value:'Chocos'},
nonAvailableServices: {value :'Prawns', value:'Crabs', value :'Fish'}
},
}),
},
},
resolve(parent,args){
const food = new Food ({
locationName : args.locationName,
address : args.address,
phoneNumber : args.phoneNumber,
status : args.status,
});
return food.save();
},
},
Here is the output I am getting, when I run the query:
"foods": [
{
"locationName": "Bangalore",
"id": "62c72fb560f9c6426aa68983",
"address": "Marathalli,bnagalore",
"phoneNumber": "8888888888",
"foodServices": null
},
With GraphQL, I like to query an entire array with all the fields that are found in only some of the array elements.
Assume I have the following data and local client:
// data1.json
[
{
"type": "title",
"description": "Title!"
},
{
"type": "person",
"description": "He has been working in this office for 10 years."
"name": "Thomas"
"age": "35"
},
{
"type": "office",
"description": "Engineering"
"size": "90"
"budget": "1500000"
},
]
import data1 from './data1.json'
import data2 from './data2.json' // same structure to data1
... // other imports
const client = new ApolloClient({
cache: new InMemoryCache()
});
client.cache.writeData({
data: {
departments: [
{
name: 'departmentOne',
data: data1.map(item => ({ ...item, __typename: 'element' })),
__typename: 'department'
},
{
name: 'departmentTwo',
data: data2.map(item => ({ ...item, __typename: 'element' })),
__typename: 'department'
}
],
__typename: 'departments'
}
});
Then, in one of my component, how do I get all the elements in the departments?
When I query this it just works:
{
departments #client {
name
data {
type
description
__typename
}
__typename
}
}
But the following query will return nothing:
{
departments #client {
name
data {
type
description
name
age
size
budget
__typename
}
__typename
}
}
I suppose I need to add a local resolver or typeDefs for this purpose, but how would it look like?
In the first place, I am not sure if the cache has all the array. As some of the fields (i.e., "name", "age", and others) are missing in some element, might it omit the data automatically?
I want to set the datasource for a kendoui treelist at the run time. Please check following example. If I set the datasource at the design time, I am able to see the data in the control. But if I try to set the datasource at run time, I do not see the data in the control.
<div id="treeList"></div>
<script>
var data = [ { name: "Jane Doe" }, { name: "John Doe" }];
var dataSource = new kendo.data.TreeListDataSource({
data: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{ command: [{ name: "edit" }] }
],
editable: true
//,dataSource: dataSource
});
var grid = $("#treelist").data("kendoTreeList");
grid.setDataSource( dataSource);
grid.dataSource = dataSource;
grid.dataSource.read();
grid.dataSource.data(data);
</script>
The problem seems to be with the selector itself. You logic was ok but for some reason, the object returned by data("kendoTreeList") was null. I updated your code to chain the data after the kendoTreeList initialization.
var dataSource = new kendo.data.TreeListDataSource({
data: [ { name: "Jane Doe" }, { name: "John Doe" }]
});
var grid = $("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{ command: [{ name: "edit" }] }
],
editable: true
}).data("kendoTreeList");
grid.setDataSource(dataSource);
It's a bit odd to say but I thought your code and my code would be equivalent. Obviously, it ain't but I can't figure out why.
Your main problem is that you have the id to the DOM element set to "treeList".
var grid = $("#treelist").data("kendoTreeList");
As you can see here, you use all lowercase when setting the grid variable. That was your only problem. It should look like this:
var grid = $("#treeList").data("kendoTreeList");
I have this json object
{
id: string,
name: string,
category: {
id: string
name: string,
}
}
I want to have column that bind to productCategory.name. However that field is nullable. When productCategory is null/undefined, kendo will throw error. How can i tell kendo that if field is undefined, just show empty string?
EDIT
Below is my sample data
[{
"id":1,
"name":"Spaghetti",
"category":{
"id":"1",
"name":"Food"
}},
{
"id":2,
"name":"Coca-cola",
"category":null
}}]
Below is my kendo datasource
var kendoDataSource = new kendo.data.DataSource({
schema: {
data: "data",
total: "total",
model: {
id: "id",
fields: {
id: { type: "string" },
name: { type: "string" },
"category.name": { type: "string" }
}
}
}
});
Data above will throw "undefined" error, because second product does not have category.
Try using empty object instead of null
created a fiddle,check this:
http://jsfiddle.net/Sowjanya51/h930jcru/
Just provide a default value in your model like this:
var kendoDataSource = new kendo.data.DataSource({
schema: {
data: "data",
total: "total",
model: {
id: "id",
fields: {
id: { type: "string" },
name: { type: "string" },
"category.name": { type: "string" },
category: { defaultValue: {
id: "",
name: "",
}
}
}
}
}
});
This will initialize productCategory if it is null or undefined.
My json call returns an object array:
[
{
Table: 1,
FirstName: "Bert",
LastName: "Smith",
Place: 1
},
{
Table: 1,
FirstName: "Suzanne",
LastName: "Smith",
Place: 2
},
{
Table: 1,
FirstName: "Matthew",
LastName: "Stewart",
Place: 3
},
{
Table: 1,
FirstName: "Brian",
LastName: "Robinson",
Place: 4
},
{
Table: 1,
FirstName: "Jennifer",
LastName: "Robinson",
Place: 5
},
{
Table: 1,
FirstName: "Andrew",
LastName: "Caygill",
Place: 6
},
{
Table: 1,
FirstName: "Susan",
LastName: "Caygill",
Place: 7
},
{
Table: 1,
FirstName: "John",
LastName: "Spreadbury",
Place: 8
},
{
Table: 1,
FirstName: "Anne-Marie",
LastName: "Nevin",
Place: 9
}]
I have a template in my HTML:
<script type="text/html" id="dataLine">
<div class="itemLine">
<div class="Name">
<span class="fixtureBoxLine" data-bind="text: fullName"></span>
</div>
<div class="TableNo">
<span class="fixtureBoxLine" data-bind="text: Table"></span>
</div>
</div>
</script>
and the binding is:
<div data-bind="template: { name: 'dataLine', foreach: pageCol1 }"></div>
My viewmodel is:
var viewModel = {
fields: ko.observableArray([]),
pageSize: ko.observable(1),
pageIndex: ko.observable(0)
};
viewModel.pageCol1 = ko.computed(function() {
var size = Number(this.pageSize());
var start = this.pageIndex() * size * 2; //2 cols per page
var end = start + size;
return this.fields.slice(start, end);
}, viewModel);
All works fine except I can't get a "fullname" property. If I try adding it to the viewmodel in the same way as I did with "pageCol1" above, then as my json success property just does:
viewModel.fields(xlData);
it doesn't work as there is no "fullName" property on the data returned.
I feel I've tried every possible combination today and have now given myself a headache! Please would someone point me in the right direction?
Thanks!
Try extending your pageCol1 by adding new field (concatenated from another two) to your response array like:
viewModel.pageCol1 = ko.computed(function() {
var size = Number(this.pageSize());
var start = this.pageIndex() * size * 2; //2 cols per page
var end = start + size;
for( var i = 0, len = this.fields.length; i < len; i++ ) {
this.fields[ i ].fullName = this.fields[ i ].FirstName + ' ' + this.fields[ i ].LastName;
}
return this.fields.slice(start, end);
}, viewModel);
so in final result before you're iterating over your array it will be like:
[
{
Table: 1,
FirstName: "Bert",
LastName: "Smith",
fullName: "Bert Smith",
Place: 1
},
{
Table: 1,
FirstName: "Suzanne",
LastName: "Smith",
fullName: "Suzanne Smith",
Place: 2
},
{
Table: 1,
FirstName: "Matthew",
LastName: "Stewart",
fullName: "Matthew Stewart",
Place: 3
},
...