Child items in kendo grid - javascript

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"
}

Related

Is it possible to print the label of the object instead the id in material ui DataGrid

So I have two tables in my database. I want a DataGrid UI to print all my columns except the categoryId I want to print a label instead (like in selection valueOptions) :
const columns: GridColDef = [
{
"field": "title",
"headerName": "Titel",
"width": 350,
"editable": true
},
{
"field": "categoryId",
"headerName": "Kategorie",
"width": 250,
"editable": true,
"type": "singleSelect",
"valueOptions": [
{
"value": "miv560972ynqzk9",
"label": "stuff 1"
},
{
"value": "1t7n08l9tfdwotn",
"label": "stuff 2"
},
]
}
]
const rows: GridRowsProp = [
{
"categoryId": "miv560972ynqzk9",
"title": "Lineare Algebra Hausaufga",
},
{
"categoryId": "1t7n08l9tfdwotn",
"title": "Test",
},
]
So I want something like this:
const rows: GridRowsProp = [
{
"categoryId": { value:"miv560972ynqzk9", label: "stuff1"},
"title": "Lineare Algebra Hausaufga",
},
{
"categoryId": { value: "1t7n08l9tfdwotn", label: "stuff2" },
"title": "Test",
},
]

How to access first element in array of nested objects?

I have the following JSON data like so:
[{
"target": {
"source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0",
"selector": {
"conformsTo": "http://www.w3.org/TR/media-frags/",
"value": "xywh=pixel:582.6087036132812,114.49275207519531,98.55072021484375,189.85508728027344",
"type": "FragmentSelector"
}
},
"id": "#423647a0-bd23-11ea-8727-73bc60edcd34",
"body": [{
"created": "2020-07-03T11:49:32.058Z",
"purpose": "commenting",
"type": "TextualBody",
"creator": {
"name": "testme",
"id": "0qbvzjI3llhyIrKVO6PZxcZUSiI2"
},
"value": "don't move me"
}, {
"creator": {
"name": "testme",
"id": "0qbvzjI3llhyIrKVO6PZxcZUSiI2"
},
"value": "move",
"type": "TextualBody",
"purpose": "tagging",
"created": "2020-07-03T11:49:30.850Z"
}],
"#context": "http://www.w3.org/ns/anno.jsonld",
"type": "Annotation",
"photoDocId": "92wNwz2aaqy7CWf3mGo1"
}, {
"#context": "http://www.w3.org/ns/anno.jsonld",
"body": [{
"type": "TextualBody",
"purpose": "commenting",
"created": "2020-07-03T10:57:40.590Z",
"value": "anyone ever climb this mountain top?",
"creator": {
"id": "K2Lb1R7owqR9BYmpJAJzrg6w1s92",
"name": "doss"
}
}, {
"created": "2020-07-03T10:57:39.351Z",
"value": "ridge",
"type": "TextualBody",
"creator": {
"name": "doss",
"id": "K2Lb1R7owqR9BYmpJAJzrg6w1s92"
},
"purpose": "tagging"
}, {
"value": "i did in 2005",
"purpose": "commenting",
"type": "TextualBody",
"creator": {
"id": "0qbvzjI3llhyIrKVO6PZxcZUSiI2",
"name": "testme"
},
"created": "2020-07-03T10:59:45.318Z"
}, {
"type": "TextualBody",
"purpose": "tagging",
"creator": {
"name": "testme",
"id": "0qbvzjI3llhyIrKVO6PZxcZUSiI2"
},
"value": "testme",
"created": "2020-07-03T10:59:43.966Z"
}, {
"value": "test",
"type": "TextualBody",
"purpose": "replying",
"creator": {
"name": "doss",
"id": "K2Lb1R7owqR9BYmpJAJzrg6w1s92"
},
"created": "2020-07-03T11:39:18.860Z"
}],
"type": "Annotation",
"photoDocId": "92wNwz2aaqy7CWf3mGo1",
"id": "#03a1f0e0-bd1c-11ea-a688-e1387cc6bed2",
"target": {
"selector": {
"value": "xywh=pixel:247.82608032226562,73.91304016113281,233.33334350585938,240.57972717285156",
"type": "FragmentSelector",
"conformsTo": "http://www.w3.org/TR/media-frags/"
},
"source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0"
}
}, {
"body": [{
"value": "test",
"created": "2020-07-05T11:29:14.742Z",
"purpose": "commenting",
"creator": {
"name": "doss",
"id": "K2Lb1R7owqR9BYmpJAJzrg6w1s92"
},
"type": "TextualBody"
}, {
"creator": {
"name": "doss",
"id": "K2Lb1R7owqR9BYmpJAJzrg6w1s92"
},
"created": "2020-07-05T11:29:13.584Z",
"value": "test",
"purpose": "tagging",
"type": "TextualBody"
}],
"type": "Annotation",
"target": {
"selector": {
"conformsTo": "http://www.w3.org/TR/media-frags/",
"value": "xywh=pixel:395.65216064453125,413.0434875488281,142.02899169921875,131.88406372070312",
"type": "FragmentSelector"
},
"source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0"
},
"photoDocId": "92wNwz2aaqy7CWf3mGo1",
"id": "#c1761960-beb2-11ea-888f-c3ab54e1f3a9",
"#context": "http://www.w3.org/ns/anno.jsonld"
}]
This data is annotation data for an image.
What I am trying to do is loop through each object's body and only check the first element's (ie, body[0].creator.id) creator field. I want to check the id value in that creator field. If the id is the original author's id (lets use the id 0qbvzjI3llhyIrKVO6PZxcZUSiI2 for this example), then return console.log('original author').
I need help with accessing the above element. Any tips?
Side note: The reason for the above workflow is because I need to prevent another user from editing the author's original annotation. The original author will always be the first element in each body.

You could try this
const data = [
{
target: {
source:
'https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0',
selector: {
conformsTo: 'http://www.w3.org/TR/media-frags/',
value:
'xywh=pixel:582.6087036132812,114.49275207519531,98.55072021484375,189.85508728027344',
type: 'FragmentSelector'
}
},
id: '#423647a0-bd23-11ea-8727-73bc60edcd34',
body: [
{
created: '2020-07-03T11:49:32.058Z',
purpose: 'commenting',
type: 'TextualBody',
creator: { name: 'testme', id: '0qbvzjI3llhyIrKVO6PZxcZUSiI2' },
value: "don't move me"
},
{
creator: { name: 'testme', id: '0qbvzjI3llhyIrKVO6PZxcZUSiI2' },
value: 'move',
type: 'TextualBody',
purpose: 'tagging',
created: '2020-07-03T11:49:30.850Z'
}
],
'#context': 'http://www.w3.org/ns/anno.jsonld',
type: 'Annotation',
photoDocId: '92wNwz2aaqy7CWf3mGo1'
},
{
'#context': 'http://www.w3.org/ns/anno.jsonld',
body: [
{
type: 'TextualBody',
purpose: 'commenting',
created: '2020-07-03T10:57:40.590Z',
value: 'anyone ever climb this mountain top?',
creator: { id: 'K2Lb1R7owqR9BYmpJAJzrg6w1s92', name: 'doss' }
},
{
created: '2020-07-03T10:57:39.351Z',
value: 'ridge',
type: 'TextualBody',
creator: { name: 'doss', id: 'K2Lb1R7owqR9BYmpJAJzrg6w1s92' },
purpose: 'tagging'
},
{
value: 'i did in 2005',
purpose: 'commenting',
type: 'TextualBody',
creator: { id: '0qbvzjI3llhyIrKVO6PZxcZUSiI2', name: 'testme' },
created: '2020-07-03T10:59:45.318Z'
},
{
type: 'TextualBody',
purpose: 'tagging',
creator: { name: 'testme', id: '0qbvzjI3llhyIrKVO6PZxcZUSiI2' },
value: 'testme',
created: '2020-07-03T10:59:43.966Z'
},
{
value: 'test',
type: 'TextualBody',
purpose: 'replying',
creator: { name: 'doss', id: 'K2Lb1R7owqR9BYmpJAJzrg6w1s92' },
created: '2020-07-03T11:39:18.860Z'
}
],
type: 'Annotation',
photoDocId: '92wNwz2aaqy7CWf3mGo1',
id: '#03a1f0e0-bd1c-11ea-a688-e1387cc6bed2',
target: {
selector: {
value:
'xywh=pixel:247.82608032226562,73.91304016113281,233.33334350585938,240.57972717285156',
type: 'FragmentSelector',
conformsTo: 'http://www.w3.org/TR/media-frags/'
},
source:
'https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0'
}
},
{
body: [
{
value: 'test',
created: '2020-07-05T11:29:14.742Z',
purpose: 'commenting',
creator: { name: 'doss', id: 'K2Lb1R7owqR9BYmpJAJzrg6w1s92' },
type: 'TextualBody'
},
{
creator: { name: 'doss', id: 'K2Lb1R7owqR9BYmpJAJzrg6w1s92' },
created: '2020-07-05T11:29:13.584Z',
value: 'test',
purpose: 'tagging',
type: 'TextualBody'
}
],
type: 'Annotation',
target: {
selector: {
conformsTo: 'http://www.w3.org/TR/media-frags/',
value:
'xywh=pixel:395.65216064453125,413.0434875488281,142.02899169921875,131.88406372070312',
type: 'FragmentSelector'
},
source:
'https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0'
},
photoDocId: '92wNwz2aaqy7CWf3mGo1',
id: '#c1761960-beb2-11ea-888f-c3ab54e1f3a9',
'#context': 'http://www.w3.org/ns/anno.jsonld'
}
]
data.forEach(d => {
if (d.body[0].creator.id === '0qbvzjI3llhyIrKVO6PZxcZUSiI2') {
console.log('original author')
}
})

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
}

Extjs : Show data on Grid

Although I am getting output in the response
Response
{
"result": [{
"date": "",
"emailID": "",
"name": ""
}, {
"date": "2007-04-04T00:00:00",
"emailID": "fgffg",
"name": "cvbgfv"
}, {
"date": "2009-07-15T00:00:00",
"emailID": "hfgh",
"name": "gjhgh"
}, {
"date": "2009-10-07T00:00:00",
"emailID": "gdfd",
"name": "dfgdf"
}, {
"date": "2010-02-10T00:00:00",
"emailID": "vcvc",
"name": "bvcb"
}, {
"date": "2011-04-08T00:00:00",
"emailID": "dfgfdgd",
"name": "fvdf"
}, {
"date": "2012-07-18T00:00:00",
"emailID": "dgffdgfd",
"name": "rgffdg"
}, {
"date": "2012-08-07T00:00:00",
"emailID": "dsfsdfsd",
"name": "sdfdsfdsf"
}, { ... // skipped some lines
"date": "2019-04-08T00:00:00",
"emailID": "vcvbc",
"name": "dg"
}, {
"date": "2019-11-05T00:00:00",
"emailID": "dgfd",
"name": "dfgfdg"
}, {
"date": "2019-11-21T00:00:00",
"emailID": "dgfd",
"name": "dfgfdg"
}, {
"date": "2020-01-01T00:00:00",
"emailID": "fgf",
"name": "vfdvf"
}, {
"date": "2020-01-14T00:00:00",
"emailID": "nbvb",
"name": "fgf"
}, {
"date": "2020-04-14T00:00:00",
"emailID": "fdgdf",
"name": "dgdf"
}, {
"date": "2020-06-09T00:00:00",
"emailID": "sfdds",
"name": "dsfsd"
}, {
"date": "2020-09-23T00:00:00",
"emailID": "fdfgf",
"name": "vcxv"
}],
"success": true,
"totalcount": 84
}
Here is my store & grid
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: [{
name: 'date',
type: 'string'
}, {
name: 'emailID',
type: 'string'
}, {
name: 'name',
type: 'string'
}],
pageSize: 10, // items per page
id: 'date',
proxy: {
method: 'GET',
url: 'rest/helloworld/submit',
noCache: false,
type: 'ajax',
root: 'result',
totalProperty: 'totalcount'
}
});
// specify segment of data you want to load using params
store.load({
params: {
start: 0,
limit: 10
}
});
var grid = Ext.create('Ext.grid.Panel', {
title: 'Result',
store: store,
columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Email',
dataIndex: 'emailID',
flex: 1
}, {
header: 'Date',
dataIndex: 'date'
}],
width: 400,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
But it is not visible on the grid.
Please help

You need to define a reader:
reader: {
type: 'json',
rootProperty: 'result',
totalProperty: 'totalcount'
}
Your example working: https://fiddle.sencha.com/#fiddle/l3u

metadata configuration of fields in ExtJS DirectStore

I am trying to load grid data from a ExtDirect router. The results contain a metaData object that should reconfigure the store's fields. I am getting the following error however when I try to load my data:
Uncaught TypeError: Cannot read property 'sortType' of undefined (ext-all-debug.js:23943)
The JSON result is:
{
"action": "Dashboard",
"method": "dashboarddata",
"type": "rpc",
"result": {
"success": true,
"metaData": {
"sortInfo": {
"direction": "ASC",
"field": "id"
},
"fields": [{
"mapping": "id",
"id": "id"
},
{
"mapping": "owner",
"id": "owner"
},
{
"mapping": "name",
"id": "name"
},
{
"mapping": "type",
"id": "type"
},
{
"mapping": "strategy",
"id": "strategy"
},
{
"mapping": "primebroker",
"id": "primebroker"
},
{
"mapping": "startdate",
"id": "startdate"
},
{
"mapping": "date_afc_prelim_approval",
"id": "date_afc_prelim_approval"
},
{
"mapping": "date_afc_approval",
"id": "date_afc_approval"
},
{
"mapping": "date_submit_regulator",
"id": "date_submit_regulator"
},
{
"mapping": "date_approval_regulator",
"id": "date_approval_regulator"
},
{
"mapping": "enddate",
"id": "enddate"
},
{
"mapping": "main_iso_currency",
"id": "main_iso_currency"
},
{
"mapping": "nav_frequency",
"id": "nav_frequency"
},
{
"mapping": "date_first_nav",
"id": "date_first_nav"
},
{
"mapping": "launch_size",
"id": "launch_size"
},
{
"mapping": "target_size",
"id": "target_size"
},
{
"mapping": "memo",
"id": "memo"
},
{
"mapping": "isin_codes",
"id": "isin_codes"
},
{
"mapping": "status",
"id": "status"
}],
"totalProperty": "total",
"successProperty": "success",
"idProperty": "id",
"root": "data"
},
"data": [{
"status": "Project closed",
"strategy": "Strategy X",
"date_afc_approval": "2010-01-01",
"startdate": "2010-01-01",
"nav_frequency": "Bi-monthly",
"date_first_nav": "2010-01-01",
"enddate": "2010-01-01",
"date_approval_regulator": "2010-01-01",
"id": "1",
"date_afc_prelim_approval": "2010-01-01",
"isin_codes": "123",
"target_size": "2000",
"owner": "Some name",
"name": "First project",
"memo": "TEXTEXTEXT",
"main_iso_currency": "TND",
"primebroker": "Yes",
"date_submit_regulator": "2010-01-01",
"launch_size": "1000",
"type": "TypeX"
}],
"total": 1
},
"tid": 6
}
The store itself is configured like:
var store = new Ext.data.DirectStore({
idProperty: 'id'
,paramsAsHash: true
,directFn: MyApp.Direct.Dashboard.dashboarddata
,root:'data'
,autoLoad: false
,totalProperty:'total'
,fields: [
{name: 'id', mapping: 'id'},
{name: 'type', mapping: 'type'}
]
,baseParams: {
type: this.type,
filters: this.filters
}
});
Can anyone please help me? This is driving me nuts, I cannot see what I am doing wrong.
Thanks!
Rob
PS. I am using ExtJS 3.3.0

Why not debug that place using Chrome or Firefox debug facility? The helpful options is setting the break on exception in the Chrome.

I fixed it. Debugging did the trick.
Apparently when updating the fields through the metaData object in the JSON response you need to name the fields. ExtJS uses the name field as a lookup field internally. Strange thing is that with static configuration of a store's fields you don't need that field...
...
"fields": [{
"mapping": "id",
"name": "id",
"id": "id"
},
{
"mapping": "owner",
"name": "owner",
"id": "owner"
},
...

Categories

Resources