Develop Reference

How to display extJS grid columns after each record, not only on the top

How to display extJS columns after each record not on the top.
I am grouping extJS grid with three columns and grouping is working fine.
Here is the code and we can test in fiddler as well.
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['name', 'seniority', 'department', 'sort', 'groupsort'],
grouper: {
groupFn: function(item) {
return 'department: ' + item.get('department');
}
},
// Have members of each group sorted on this field
sorters: [{
property: 'name'
}],
data: {'employees':[
{ "name": "Michael Scotts", "seniority": 7, "department": "Management", "groupsort" : "2" },
{ "name": "Dwight Schrute", "seniority": 2, "department": "Sales", "groupsort" : "1" },
{ "name": "Jim Halpert", "seniority": 3, "department": "Sales", "groupsort" : "1" },
{ "name": "Kevin Malone", "seniority": 4, "department": "Accounting", "groupsort" : "3" },
{ "name": "Angela Martin", "seniority": 5, "department": "Accounting", "groupsort" : "3" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'employees'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Employees',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Seniority', dataIndex: 'seniority' },
{ text: 'Department', dataIndex: 'department', sortable: true }
],
features: [{
ftype: 'grouping'
}],
renderTo: Ext.getBody()
});
}
});
My requierment is I want show columns not on the top but after the grouping for each record. Is there any workaround for that.

How to build the proper mapping/indexing in ElasticSearch with NodeJS

I have been beating my head against this all day, and cannot seem figure out how to get this to work.
I have a source document like this:
{
"created_at": 1454700182,
"message_id": 160,
"user_id": 1,
"establishment_id": 1,
"geo": {
"coordinates": [-4.8767633,
89.7833547
],
"type": "Point"
},
"message": "Venus is in the west",
"active": true,
"score": 0,
"name": {
"first": "First",
"last": "Last"
},
"neighborhood": "Townside"
},
I create a document like this in ElasticSearch:
{
"message_id": 160,
"message": "Venus is in the west",
"first_name": "First",
"last_name": "Last",
"location": {
"lon": -4.8767633,
"lat": 89.7833547
},
"created_at": 1454700182,
"neighborhood": "Townside"
}
I've been trying different ways to create the index.
First:
client.indices.create({
index: 'messages',
type: 'document',
body: {
messages: {
properties: {
message: {
type: 'string',
index: 'not_analyzed'
},
neighborhood: {
type: 'string',
index: 'not_analyzed'
},
first_name: {
type: 'string',
index: 'not_analyzed'
},
last_name: {
type: 'string',
index: 'not_analyzed'
},
created_at: {
type: 'integer',
index: 'not_analyzed'
},
location: {
type: 'geo_point',
lat_lon: true
}
}
}
},
}
);
This allows me to do fuzzy text searches and greater than queries, but doesn't recognize the geo_point. So I tried this:
client.indices.create({
index: 'messages',
type: 'document',
"mappings": {
"messages": {
"properties": {
"message": {
"type": "string",
"index": "not_analyzed"
},
"neighborhood": {
"type": "string",
"index": "not_analyzed"
},
"first_name": {
"type": "string",
"index": "not_analyzed"
},
"last_name": {
"type": "string",
"index": "not_analyzed"
},
"created_at": {
"type": "integer",
"index": "not_analyzed"
},
"location": {
"type": "geo_point",
"lat_lon": true,
"index": "not_analyzed"
}
}
}
}
});
This does recognize the geo_point, but none of the other things work.
Here is the query I've been using for the non geo fields:
query = {
query: {
filtered: {
query: {
multi_match: {
query: message,
fields: ['message', 'neighborhood', 'first_name', 'last_name'],
"fuzziness": "AUTO",
"prefix_length": 2
}
},
filter: {
bool: {
must: {
range: {
"created_at": {
"gte": min_ts
}
}
}
}
}
}
}
};
I've been so turned around on this, just trying to allow text and geo search on the same collection of documents, that I need at least another set of eyes.
Appreciate any help!

ComboBox does not display selected value

I am having a ComboBox with a quite simple config as you can see in this fiddle.
The problem is that when I select a value in the drop-down list, it is not displayed in the combo's text field and I can't figure out why.
Also, I have set the property hideTrigger to true but the combo's trigger is still displayed.
Here is the fiddle code if you can't access it :
Ext.define('MyApp.LanguageCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.myapp.LanguageCombo',
initComponent: function() {
Ext.apply(this, this.factory());
this.callParent();
},
factory: function() {
return {
store: Ext.create('Ext.data.JsonStore', {
proxy: {
type: 'memory',
},
fields: ['id', 'name'],
data: [{"name":"afar","id":"aar"},{"name":"austro-asiatiques, langues","id":"aav"},{"name":"abkhaze","id":"abk"},{"name":"aceh","id":"ace"},{"name":"acolo (syn : acoli, gang)","id":"ach"},{"name":"adangbme (syn : adan, adagbe, adame)","id":"ada"},{"name":"adygh\u00e9","id":"ady"},{"name":"afro-asiatiques, langues","id":"afa"},{"name":"afrihili","id":"afh"},{"name":"afrikaans","id":"afr"},{"name":"a\u00efnou","id":"ain"},{"name":"aljamia (syn : aljamiada)","id":"ajm"},{"name":"akan (syn : twi)","id":"aka"},{"name":"akkadien","id":"akk"},{"name":"albanais","id":"alb"},{"name":"al\u00e9oute (syn : al\u00e9out, aleut)","id":"ale"},{"name":"algonquines, langues","id":"alg"},{"name":"altai du Sud","id":"alt"},{"name":"atlantique-congo, langues","id":"alv"},{"name":"amharique","id":"amh"},{"name":"anglo-saxon (ca.450-1100)","id":"ang"},{"name":"angika","id":"anp"},{"name":"apaches, langues","id":"apa"},{"name":"alacalufanes, langues","id":"aqa"},{"name":"algiques, langues","id":"aql"},{"name":"arabe","id":"ara"},{"name":"aram\u00e9en d'empire (700-300 BCE)","id":"arc"},{"name":"aragonais","id":"arg"},{"name":"arm\u00e9nien","id":"arm"},{"name":"mapudungun (syn : mapuche, mapuce)","id":"arn"},{"name":"arapaho","id":"arp"},{"name":"artificielles, langues","id":"art"},{"name":"arawak","id":"arw"},{"name":"assamais","id":"asm"},{"name":"asturien (syn : bable, l\u00e9onais, asturol\u00e9onais)","id":"ast"},{"name":"athapascanes, langues","id":"ath"},{"name":"arauanes, langues","id":"auf"},{"name":"australiennes, langues","id":"aus"},{"name":"avar","id":"ava"},{"name":"avestique (syn : ancien, zend)","id":"ave"},{"name":"awadhi","id":"awa"},{"name":"arawak, langues","id":"awd"},{"name":"aymara","id":"aym"},{"name":"uto-azt\u00e8ques, langues","id":"azc"},{"name":"az\u00e9ri (syn : azerbaidjanais)","id":"aze"},{"name":"banda, langues","id":"bad"},{"name":"bamil\u00e9k\u00e9, langues","id":"bai"},{"name":"bachkir (syn : baskir)","id":"bak"},{"name":"baloutchi","id":"bal"},{"name":"bambara","id":"bam"},{"name":"balinais","id":"ban"},{"name":"basque","id":"baq"},{"name":"basa (syn : bassa)","id":"bas"},{"name":"baltes, langues","id":"bat"},{"name":"bedja (syn : beja, bichari)","id":"bej"},{"name":"bi\u00e9lorusse","id":"bel"},{"name":"bemba","id":"bem"},{"name":"bengali","id":"ben"},{"name":"berb\u00e8res, langues","id":"ber"},{"name":"bhojpuri","id":"bho"},{"name":"langues biharis","id":"bih"},{"name":"bikol","id":"bik"}],
}),
displayField: 'name',
valueField: 'id',
hideTrigger: true,
validate: function() {
var languagesWithSameCodeAndName = ['ewe', 'fon', 'ido', 'kom', 'lao', 'ocf', 'tiv', 'twi', 'vai', 'yao'];
return Ext.isEmpty(this.getRawValue())
|| this.getValue() != this.getRawValue()
|| languagesWithSameCodeAndName.indexOf(this.getValue()) != -1;
},
tpl: Ext.create('Ext.XTemplate',
'<tpl for="."><li role="option" class="x-boundlist-item" data-qtip="{[this.valueRenderer(values)]}">{[this.valueRenderer(values)]}</li></tpl>',
{
valueRenderer: function(values) {
return Ext.String.format('[{0}] {1}', values.id, values.name);
},
}
)
}
}
});
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'myapp.LanguageCombo',
fieldLabel: 'Language',
width: 320,
margin: 15,
}],
})
}
});

It is due to part of your factory object contains part of config:
Ext.define('MyApp.LanguageCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.myapp.LanguageCombo',
initConfig: function() {
Ext.apply(this.config, this.factoryConfig());
Ext.apply(this, this.factory());
this.callParent(arguments);
},
factoryConfig: function() {
return {
displayField: 'name',
valueField: 'id',
hideTrigger: true
}
},
factory: function() {
return {
store: Ext.create('Ext.data.JsonStore', {
proxy: {
type: 'memory',
},
fields: ['id', 'name'],
data: [{
"name": "afar",
"id": "aar"
}, {
"name": "austro-asiatiques, langues",
"id": "aav"
}, {
"name": "abkhaze",
"id": "abk"
}, {
"name": "aceh",
"id": "ace"
}, {
"name": "acolo (syn : acoli, gang)",
"id": "ach"
}, {
"name": "adangbme (syn : adan, adagbe, adame)",
"id": "ada"
}, {
"name": "adygh\u00e9",
"id": "ady"
}, {
"name": "afro-asiatiques, langues",
"id": "afa"
}, {
"name": "afrihili",
"id": "afh"
}, {
"name": "afrikaans",
"id": "afr"
}, {
"name": "a\u00efnou",
"id": "ain"
}, {
"name": "aljamia (syn : aljamiada)",
"id": "ajm"
}, {
"name": "akan (syn : twi)",
"id": "aka"
}, {
"name": "akkadien",
"id": "akk"
}, {
"name": "albanais",
"id": "alb"
}, {
"name": "al\u00e9oute (syn : al\u00e9out, aleut)",
"id": "ale"
}, {
"name": "algonquines, langues",
"id": "alg"
}, {
"name": "altai du Sud",
"id": "alt"
}, {
"name": "atlantique-congo, langues",
"id": "alv"
}, {
"name": "amharique",
"id": "amh"
}, {
"name": "anglo-saxon (ca.450-1100)",
"id": "ang"
}, {
"name": "angika",
"id": "anp"
}, {
"name": "apaches, langues",
"id": "apa"
}, {
"name": "alacalufanes, langues",
"id": "aqa"
}, {
"name": "algiques, langues",
"id": "aql"
}, {
"name": "arabe",
"id": "ara"
}, {
"name": "aram\u00e9en d'empire (700-300 BCE)",
"id": "arc"
}, {
"name": "aragonais",
"id": "arg"
}, {
"name": "arm\u00e9nien",
"id": "arm"
}, {
"name": "mapudungun (syn : mapuche, mapuce)",
"id": "arn"
}, {
"name": "arapaho",
"id": "arp"
}, {
"name": "artificielles, langues",
"id": "art"
}, {
"name": "arawak",
"id": "arw"
}, {
"name": "assamais",
"id": "asm"
}, {
"name": "asturien (syn : bable, l\u00e9onais, asturol\u00e9onais)",
"id": "ast"
}, {
"name": "athapascanes, langues",
"id": "ath"
}, {
"name": "arauanes, langues",
"id": "auf"
}, {
"name": "australiennes, langues",
"id": "aus"
}, {
"name": "avar",
"id": "ava"
}, {
"name": "avestique (syn : ancien, zend)",
"id": "ave"
}, {
"name": "awadhi",
"id": "awa"
}, {
"name": "arawak, langues",
"id": "awd"
}, {
"name": "aymara",
"id": "aym"
}, {
"name": "uto-azt\u00e8ques, langues",
"id": "azc"
}, {
"name": "az\u00e9ri (syn : azerbaidjanais)",
"id": "aze"
}, {
"name": "banda, langues",
"id": "bad"
}, {
"name": "bamil\u00e9k\u00e9, langues",
"id": "bai"
}, {
"name": "bachkir (syn : baskir)",
"id": "bak"
}, {
"name": "baloutchi",
"id": "bal"
}, {
"name": "bambara",
"id": "bam"
}, {
"name": "balinais",
"id": "ban"
}, {
"name": "basque",
"id": "baq"
}, {
"name": "basa (syn : bassa)",
"id": "bas"
}, {
"name": "baltes, langues",
"id": "bat"
}, {
"name": "bedja (syn : beja, bichari)",
"id": "bej"
}, {
"name": "bi\u00e9lorusse",
"id": "bel"
}, {
"name": "bemba",
"id": "bem"
}, {
"name": "bengali",
"id": "ben"
}, {
"name": "berb\u00e8res, langues",
"id": "ber"
}, {
"name": "bhojpuri",
"id": "bho"
}, {
"name": "langues biharis",
"id": "bih"
}, {
"name": "bikol",
"id": "bik"
}],
}),
validate: function() {
var languagesWithSameCodeAndName = ['ewe', 'fon', 'ido', 'kom', 'lao', 'ocf', 'tiv', 'twi', 'vai', 'yao'];
return Ext.isEmpty(this.getRawValue()) || this.getValue() != this.getRawValue() || languagesWithSameCodeAndName.indexOf(this.getValue()) != -1;
},
tpl: Ext.create('Ext.XTemplate', '<tpl for="."><li role="option" class="x-boundlist-item" data-qtip="{[this.valueRenderer(values)]}">{[this.valueRenderer(values)]}</li></tpl>', {
valueRenderer: function(values) {
return Ext.String.format('[{0}] {1}', values.id, values.name);
},
})
}
}
});
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.container.Container', {
renderTo: Ext.getBody(),
items: [{
xtype: 'myapp.LanguageCombo',
fieldLabel: 'Language',
width: 320,
margin: 15,
}],
})
}
});

Inside the declaration of your combo, add here your displayField :
{
xtype: 'myapp.LanguageCombo',
fieldLabel: 'Language',
width: 320,
displayField: 'name', // add here
margin: 15
}

Extn JS 4.2.0 Pagination for grid not working

Here is my app.js code
Ext.require([
'Ext.data.*',
'Ext.grid.*'
]);
var TOTAL = 94; //random
var fetchedData = function(){
this.data = null;
this.total = 0;
}
// code to create grid
Ext.onReady(function(){
Ext.define('Person',{
extend: 'Ext.data.Model',
fields: [
{ name: 'fname', type: 'string' },
{ name: 'lname', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'uid', type: 'string' },
{ name: 'isSup', type: 'boolean' },
{ name: 'upDate', type: 'string' },
{ name: 'upBy', type: 'string' }
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
model: 'Person',
pageSize : 2,
proxy: {
type: 'ajax',
url : 'supUserStore.json',
reader: {type: 'json', root : 'data', totalProperty : 'total'}
},
sorters: [{
property : 'Id',
direction:'ASC'
}],
});
store.loadPage(1);
// create the grid
Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ header: 'First Name',dataIndex: 'fname' },
{ header: 'Last Name', dataIndex: 'lname' },
{ header: 'Email', dataIndex: 'email'},
{ header: 'User ID', dataIndex: 'uid' },
{ header: 'Super Admin', dataIndex: 'isSup'},
{ header: 'Updated Date',dataIndex: 'upDate'},
{ header: 'Updated By',dataIndex: 'upBy'}
],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '{0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
renderTo:'grid-example',
width: 350,
height: 280,
});
// trigger the data store load
store.loadPage(1);
});
And my json data is a json file:
{
"success": true,
"total": 11,
"data": [
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com"}
]
}
I'm able to load the grid with the data but I am unable to have pagination, all the records are loading in one single page. Please help me and advice me what I am doing wrong.

This code is working fine for me, I removed the top call to loadPage and also got rid of the fetchedData function as it wasn't being used.
I haven't changed anything else. Just wrapped the code in the launch function instead of in Ext.ready for the fiddle.
fiddle
// data1.json
{
"success": true,
"total": 11,
"data": [
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jane","lname":"Smith","email": "j.smith#netapp.com", "uid": "jsmith","isSup":false,"upDate":"11-19-2012","upBy":"aaron#netapp.com" },
{ "fname": "Jim","lname":"Smith","email": "jm.smith#netapp.com", "uid": "jmsmith","isSup":true,"upDate":"11-23-2012","upBy":"aaron#netapp.com"}
]
}
// app.js
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [{
name: 'fname',
type: 'string'
}, {
name: 'lname',
type: 'string'
}, {
name: 'email',
type: 'string'
}, {
name: 'uid',
type: 'string'
}, {
name: 'isSup',
type: 'boolean'
}, {
name: 'upDate',
type: 'string'
}, {
name: 'upBy',
type: 'string'
}]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
model: 'Person',
pageSize: 2,
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
}
},
sorters: [{
property: 'Id',
direction: 'ASC'
}],
});
// create the grid
Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
header: 'First Name',
dataIndex: 'fname'
}, {
header: 'Last Name',
dataIndex: 'lname'
}, {
header: 'Email',
dataIndex: 'email'
}, {
header: 'User ID',
dataIndex: 'uid'
}, {
header: 'Super Admin',
dataIndex: 'isSup'
}, {
header: 'Updated Date',
dataIndex: 'upDate'
}, {
header: 'Updated By',
dataIndex: 'upBy'
}],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '{0} - {1} of {2}',
emptyMsg: "No topics to display"
}),
renderTo: Ext.getBody(),
width: 350,
height: 280,
});
// trigger the data store load
store.loadPage(1);
}
});

Child items in kendo grid

How can i bind my child data in one column?
I want to write "Technology,Economy,Life" in same column and same row. But i think i need to loop in "Category". How can i do this, any idea?
My Data:
{
"ParentId": "00000000-0000-0000-0000-000000000000",
"Title": null,
"UserGroupModel": null,
"EntityAccessData": [
{
"EntityTitle": "User",
"Access": {
"Id": "59d0c6f7-8f93-497a-854d-bdd4a42ade94",
"Title": "Can Delete"
},
"Category": [
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Technology"
},
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Economy"
},
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Life"
}
],
"HasAccess": true
},
{
"EntityTitle": "UserGroup",
"Access": {
"Id": "7c65be44-11b0-4cf4-9104-0ad999e7e280",
"Title": "Can Edit"
},
"Category": [
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Technology"
},
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Economy"
},
{
"Id": "00000000-0000-0000-0000-000000000000",
"Title": "Life"
}
],
"HasAccess": true
}
]
}
My Script:
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: "/getData" },
schema: {
data: "EntityAccessData"
},
group: [{
field: "EntityTitle"
}],
},
columns: [
{
field: "Access.Id",
title: "ID"
},
{
field: "Access.Title",
title: "Access title"
},
{
field: "HasAccess",
title: "has access"
},
{
field: "Category.Title", // ***wrong***
title: "Category"
},
]
});

Define the schema as follow:
schema: {
data : "EntityAccessData",
model: {
CategoryTitle: function () {
var category = [];
$.each(this.Category, function(idx, elem) {
category.push(elem.Title);
});
return category.join(",");
}
}
},
Where I add an additional field CategoryTitle that is the result of joining the Title of the Category array and then define the column as:
{
field: "CategoryTitle()",
title: "Category"
}