Good morning,
I have a grid with a remote datasource to data similar to this:
{
"id": 143,
"code": 1,
"name": "FILOSOFÍA",
"education_corps": [
{
"id": 1,
"code": 511,
"name": "CUERPO DE CATEDRÁTICOS DE ENSEÑANZA SECUNDARIA"
},
{
"id": 2,
"code": 590,
"name": "CUERPO DE PROFESORES DE ENSEÑANZA SECUNDARIA"
}
]
},
{
"id": 72,
"code": 1,
"name": "ALEMÁN",
"education_corps": [
{
"id": 4,
"code": 512,
"name": "CUERPO DE CATEDRÁTICOS DE ESCUELAS OFICIALES DE IDIOMAS"
},
{
"id": 5,
"code": 592,
"name": "CUERPO DE PROFESORES DE ESCUELAS OFICIALES DE IDIOMAS"
}
]
},
I have another datasource to feed the elements on multiselect dropdown with this look:
{
"id": 1,
"code": 511,
"name": "CUERPO DE CATEDRÁTICOS DE ENSEÑANZA SECUNDARIA"
},
{
"id": 4,
"code": 512,
"name": "CUERPO DE CATEDRÁTICOS DE ESCUELAS OFICIALES DE IDIOMAS"
},
{
"id": 8,
"code": 513,
"name": "CUERPO DE CATEDRÁTICOS DE ARTES PLÁSTICAS Y DISEÑO"
},
{
"id": 2,
"code": 590,
"name": "CUERPO DE PROFESORES DE ENSEÑANZA SECUNDARIA"
},
{
"id": 3,
"code": 591,
"name": "CUERPO DE PROFESORES TÉCNICOS DE FORMACIÓN PROFESIONAL"
},
And a Grid:
var grid = new ej.grids.Grid({
allowPaging: true,
dataSource: dataEduSpec,
allowFiltering: true,
allowSorting: true,
allowPdfExport: true,
allowExcelExport: true,
reorderColumns: ['name'],
groupSettings: { allowReordering: true},
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel','Search','PdfExport', 'ExcelExport'],
rowSelected: rowSelected,
columns:[
{ field: 'id', visible: false, isPrimaryKey: true },
{ field: 'code', headerText: 'Código', width: 20},
{ field: 'name', headerText: 'Especialidad Educativa', width: 60 },
{ field: 'education_corps', visible: false},
{ field: 'education_corps_name', headerText: 'Cuerpos Educativos', allowSorting: false, allowFiltering: false, width: 100, valueAccessor: valueAccess, edit: {
create : function(){
eduCorpElem = document.createElement('input');
eduCorpElem.value = valueAccess;
return eduCorpElem;
},
read: function(args){
return eduCorpObj.value;
},
destroy: function(){
eduCorpObj.destroy();
},
write: function(args){;
elementsEduCorpSelected = elementsSelected(args);
eduCorpObj = new ej.dropdowns.MultiSelect({
dataSource: dataEduCorp,
fields: { value: 'id', text: 'name' },
placeholder: 'Seleccione un cuerpo educativo',
mode: 'CheckBox',
showSelectAll: true,
popupHeight: '300px',
popupWidth: '480px',
width: '100%',
allowFiltering: true,
change: syncData(args),
value: Array.isArray(elementsEduCorpSelected)? elementsEduCorpSelected : [elementsEduCorpSelected],
});
console.log(elementsEduCorpSelected);
eduCorpObj.appendTo(eduCorpElem);
}
},
},
],
});
grid.appendTo('#Grid');
function valueAccess(field, data, column){
//first put names selected on multiselect that are in record
let eduCorpNameArray = [];
for (const [key,value] of Object.entries(data['education_corps'])) {
eduCorpNameArray.push(value['name']);
}
//Put on record the items selected in multiselect
let eduCorpObjArray = [];
if((typeof eduCorpObj != 'undefined') && ('education_corps_name' in data)) {
eduCorpObj.listData.forEach((element) => {
if(data['education_corps_name'].includes(element['id'])){
eduCorpObjArray.push(element);
}
});
grid.setCellValue(data['id'],'education_corps',eduCorpObjArray);
}
return eduCorpNameArray;
}
I can sync initial display vale on grid, but i don't know how to update cell value when the edit finished.
Any clue?
Thank you
