Hello,
We're currently facing a problem with a KendoGrid having a KendoEditor as column editor.
Facts:
Column Template:
' <div name= ' + tableRefCol.Name + '> #=data.' + tableRefCol.Name +'==null?"":data.'+tableRefCol.Name+'#</div>'
Column Editor Definition:
function CreateEditor(container, options) { var grid = $('#Grid').data('kendoGrid'); var idx = container[0].cellIndex - $('#Grid').data('kendoGrid').dataSource._group.length; var name = grid.columns[idx].field; $('<div id="inGridEditor" style="height:200px;width:200px;" name="' + name + '" data-bind="value: ' + options.field + '" div></div>') .kendoEditor( { tools: [ "bold", "italic", "underline", "insertUnorderedList", "insertOrderedList", "foreColor", "fontSize" ] }) .appendTo(container); $("#inGridEditor").focus(); $(".k-editortoolbar-dragHandle").remove();};
Grid options:
{ "prefix": "", "name": "Grid", "columns": [{ "field": "LibControle", "title": "Libellé du contrôle", "width": "150px", "filterable": true, "headerAttributes": { "id": "9fb0634a-05e7-4f0a-985c-47b1283fd62b" } }, { "field": "IdEquipe", "title": "Equipe", "width": "85px", "filterable": true, "values": [{ "value": 1, "text": "ADL" }, { "value": 2, "text": "FMA" }, { "value": 3, "text": "UDSI" }, { "value": 4, "text": "OSIRIS" }, { "value": 5, "text": "ORPHEE" }, { "value": 6, "text": "LECI" } ], "headerAttributes": { "id": "dfd6a4c2-eeed-4c63-be9c-70c8f21be033" } }, { "field": "IdInstallation", "title": "Installation", "width": "120px", "filterable": true, "values": [{ "value": 49, "text": "0Recette00" }, { "value": 1, "text": "CEA_SAC" }, { "value": 2, "text": "CNRS-LSCE Bt 12" }, { "value": 3, "text": "I1 Bt 602-LNHB" }, { "value": 4, "text": "I105 ADEC" }, { "value": 5, "text": "I109" }, { "value": 6, "text": "I128 Bat 450 - DPC" }, { "value": 7, "text": "I141_142 Bt 399-INSTN" }, { "value": 8, "text": "I151 SEDI" }, { "value": 9, "text": "I16 Bt 152-SIMOPRO" }, { "value": 10, "text": "I17 Bt 524-388-SPR" }, { "value": 11, "text": "I209 Bt 144" }, { "value": 12, "text": "I21 Bt 516" }, { "value": 13, "text": "I213 Bt 607-SAPHIR-DEMIP" }, { "value": 14, "text": "I218 SACM" }, { "value": 15, "text": "I222" }, { "value": 16, "text": "I223" }, { "value": 17, "text": "I232 Bt 565-DIGITEO" }, { "value": 18, "text": "I234 Bt 135-DOSEO" }, { "value": 19, "text": "I25 POLYTECHNIQUE" }, { "value": 20, "text": "I26 Bat 546 - Radiolyse" }, { "value": 21, "text": "I27 Bat 391 - DPC" }, { "value": 22, "text": "I34 Bt 520-SRMP" }, { "value": 23, "text": "I379" }, { "value": 24, "text": "I39 Bt 522-IRAMIS" }, { "value": 26, "text": "I47 Bt 604-FLS" }, { "value": 27, "text": "I57 Bt 389-156-SPR" }, { "value": 28, "text": "I60 Bt 455-SRMA" }, { "value": 29, "text": "I62 Bat 528 SB2SM" }, { "value": 30, "text": "I64 BAT 126 - JANNUS" }, { "value": 31, "text": "I68 Bt 830-832-SHFJ" }, { "value": 32, "text": "I74 Bt 601-LBM" }, { "value": 33, "text": "I75 Bt 547-SCBM" }, { "value": 34, "text": "I84 LPS" }, { "value": 35, "text": "I9" }, { "value": 25, "text": "I90 Bt142" }, { "value": 36, "text": "I91 Bt 534-LNHB" }, { "value": 37, "text": "I93 Bt 603 TAMARIS" }, { "value": 38, "text": "I97 Bt 136-SPI" }, { "value": 39, "text": "INB 101 ORPHEE" }, { "value": 40, "text": "INB 18 ULYSSE" }, { "value": 41, "text": "INB 35" }, { "value": 42, "text": "INB 40 OSIRIS" }, { "value": 43, "text": "INB 49 LHA" }, { "value": 44, "text": "INB 50 LECI" }, { "value": 45, "text": "INB 72" }, { "value": 46, "text": "IRSN-LMRE Bt 501" }, { "value": 47, "text": "IRSN-SCA Bt 389" }, { "value": 48, "text": "testformation aaaaa aaaaaa" } ], "headerAttributes": { "id": "a9e3e828-0224-4e49-abb1-f30d4ba064e2" } }, { "field": "LibTypeEvenement", "title": "Type d'évènement", "width": "140px", "filterable": true, "values": [{ "value": "Bilan", "text": "Bilan" }, { "value": "Contrôle externe", "text": "Contrôle externe" }, { "value": "Contrôle interne", "text": "Contrôle interne" }, { "value": "Contrôle matériel", "text": "Contrôle matériel" }, { "value": "Divers", "text": "Divers" } ], "headerAttributes": { "id": "e24370a5-b01f-45f8-a701-839709618aa8" } }, { "field": "CodeTS", "title": "Type de Terme Source", "width": "170px", "filterable": true, "values": [{ "value": "aaa", "text": "aaa" }, { "value": "ACCELERATEUR", "text": "ACCELERATEURada" }, { "value": "CA", "text": "CA" }, { "value": "GX", "text": "GX" }, { "value": "SOURCE non scellée", "text": "SOURCE non scellée" }, { "value": "Source scellée HA", "text": "Source scellée HA" }, { "value": "Source scellée non HA", "text": "Source scellée non HA" } ], "headerAttributes": { "id": "485d785d-79b8-4617-bdd2-53038b962da4" } }, { "field": "DateDebut", "title": "Date prévisionnelle", "width": "120px", "filterable": true, "format": "{0:dd/MM/yyyy}", "headerAttributes": { "id": "94ee9d4e-837a-4ad1-a76f-e6d6faf44de5" } }, { "field": "DateRealisation", "title": "Date de réalisation", "width": "120px", "filterable": true, "format": "{0:dd/MM/yyyy}", "headerAttributes": { "id": "f74d6351-c191-4161-8c4a-7ad1f8d8c4c6" } }, { "field": "NumChrome", "title": "N° chrono de la note", "width": "100px", "filterable": true, "headerAttributes": { "id": "9cfc585b-aa5a-4d9e-b0c9-5d82c0a5d1d6" } }, { "field": "NonConformite", "title": "NC", "width": "80px", "filterable": true, "template": "<input type=\"checkbox\" #= NonConformite ? checked=\"checked\" : \"\" # \"\" />", "headerAttributes": { "id": "c74b7954-5329-42d4-bff9-86643e0983bd" } }, { "field": "LibTypeMateriel", "title": "Type de matériel", "width": "140px", "filterable": true, "headerAttributes": { "id": "f9eae8c1-d0b9-4162-a951-fca09ce21d7f" } }, { "field": "LibStatutMateriel", "title": "Statut matériel/TS", "width": "140px", "filterable": true, "headerAttributes": { "id": "9040092e-11b6-4b8f-86ba-911859da1374" } }, { "field": "CodeStatutEvent", "title": "Statut de l'évènement", "width": "140px", "filterable": true, "headerAttributes": { "id": "08a1bd02-6f7d-4f3f-86ef-b2ef93858ae6" } }, { "field": null, "title": "Pièce jointe", "width": "140px", "filterable": false, "template": "<Button class=\"k-button\" onclick=OpenPopUp(\"http://localhost:53764/PlanificationControles/Documents/#=data.id#\") >Pièce jointe</a>", "headerAttributes": { "id": "b16dd126-1814-4ebc-9f5b-6de115da4ed6" } }, { "field": "Commentaire", "title": "Commentaires", "width": "180px", "filterable": false, "template": " <div name= Commentaire> #=data.Commentaire==null?\"\":data.Commentaire#</div>", "headerAttributes": { "id": "6a6e7db1-e72f-403a-8b07-01ffc043d6fb" } }, { "field": null, "title": "Non-conformité Propreté radiologique", "width": "210px", "filterable": false, "template": "<a class=\"k-button k-button-icontext \" style=\"visibility: #=data.Visible?\"visible\":\"hidden\"#\" href=\"http://localhost:53764/Proprete/Element/#=data.id#\"><span></span><span class=\"btnText\">Non-conformité Propreté radiologique</span></a>", "headerAttributes": { "id": "4f32a5f5-c744-4723-95e3-6410f3afb8f6" } } ], "toolbar": [{ "name": "excel" }, { "name": "pdf" }, { "name": "save", "text": "Sauvegarder" }, { "name": "cancel", "text": "Annuler" } ], "autoBind": true, "filterable": true, "scrollable": true, "sortable": true, "selectable": false, "allowCopy": true, "navigatable": true, "pageable": false, "editable": "incell", "groupable": false, "rowTemplate": "", "altRowTemplate": "", "noRecords": false, "dataSource": { "options": { "data": null, "schema": { "model": { "id": "IdEvenementControle", "fields": { "LibControle": { "editable": true, "validation": { "required": true }, "type": "string" }, "IdEquipe": { "editable": false, "validation": { "required": true }, "type": "string" }, "IdInstallation": { "editable": false, "validation": { "required": true }, "type": "string" }, "LibTypeEvenement": { "editable": false, "validation": { "required": true }, "type": "string" }, "CodeTS": { "editable": false, "validation": { "required": true }, "type": "string" }, "DateDebut": { "editable": false, "validation": { "required": true }, "type": "date" }, "DateRealisation": { "editable": true, "validation": { "required": true }, "type": "date" }, "NumChrome": { "editable": true, "validation": { "required": true }, "type": "string" }, "NonConformite": { "editable": true, "validation": { "required": false }, "type": "boolean" }, "LibTypeMateriel": { "editable": false, "validation": { "required": false }, "type": "string" }, "LibStatutMateriel": { "editable": false, "validation": { "required": false }, "type": "string" }, "CodeStatutEvent": { "editable": false, "validation": { "required": false }, "type": "string" }, "null": { "editable": false, "validation": { "required": false }, "type": "string" }, "Commentaire": { "editable": true, "validation": { "required": false }, "type": "string" }, "IdEvenementControle": { "editable": false, "validation": { "required": true }, "type": "number" }, "DateCreation": { "editable": false, "validation": { "required": true }, "type": "date" }, "DateFin": { "editable": false, "validation": { "required": true }, "type": "date" }, "DateDernMaj": { "editable": false, "validation": { "required": true }, "type": "date" }, "DateSuppression": { "editable": false, "validation": { "required": true }, "type": "date" } } } }, "offlineStorage": null, "serverSorting": false, "serverPaging": false, "serverFiltering": false, "serverGrouping": false, "serverAggregates": false, "batch": true, "transport": { "read": { "url": "/PlanificationControles/Read", "dataType": "json", "cache": false }, "update": { "url": "/PlanificationControles/Update", "dataType": "json", "type": "PUT" }, "create": { "url": "/PlanificationControles/Insert", "dataType": "json", "type": "POST" }, "destroy": { "url": "/PlanificationControles/Delete", "dataType": "json", "type": "DELETE" } } }, "_map": {}, "_prefetch": {}, "_data": [ ], "_pristineData": [], "_ranges": [{ "start": 0, "end": 541, "data": [], "timestamp": 1496068645469 } ], "_view": [], "_pristineTotal": 541, "_destroyed": [], "_group": [], "_total": 541, "_shouldDetachObservableParents": true, "_events": { "change": [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null], "requestEnd": [null, null], "error": [null, null], "progress": [null] }, "transport": { "options": { "read": { "url": "/PlanificationControles/Read", "dataType": "json", "cache": false }, "update": { "url": "/PlanificationControles/Update", "dataType": "json", "type": "PUT" }, "create": { "url": "/PlanificationControles/Insert", "dataType": "json", "type": "POST" }, "destroy": { "url": "/PlanificationControles/Delete", "dataType": "json", "type": "DELETE" } }, "cache": {} }, "reader": {}, "_online": true, "select": null, "table": null, "_requestInProgress": false, "_aggregateResult": {} }, "height": 550, "resizable": false, "reorderable": true, "columnMenu": false, "detailTemplate": null, "columnResizeHandleWidth": 3, "mobile": "", "messages": { "editable": { "cancelDelete": "Annuler", "confirmation": "Êtes-vous sûr de vouloir supprimer cet enregistrement?", "confirmDelete": "Effacer" }, "commands": { "create": "Insérer", "cancel": "Annuler les modifications", "save": "Enregistrer les modifications", "destroy": "Effacer", "edit": "Éditer", "update": "Mettre à jour", "canceledit": "Annuler", "excel": "Export vers Excel", "pdf": "Export vers PDF", "select": "Sélectionner" }, "noRecords": "Aucun enregistrement disponible." }, "excel": { "proxyURL": "", "allPages": true, "filterable": true, "fileName": "Administration.xlsx" }, "pdf": { "fileName": "Export.pdf", "proxyURL": "", "paperSize": "auto", "allPages": true, "landscape": false, "margin": { "top": "2cm", "left": "1cm", "right": "1cm", "bottom": "1cm" }, "title": null, "author": "CEA", "subject": null, "keywords": null, "creator": "CEA", "date": null, "avoidLinks": true, "repeatHeaders": true, "scale": 0.8 }}
(the column I have problem with is the one called "Commentaires")
Here is the problem:
When I click on an Editor cell i enter in edit mod (having the defined kendo editor as wished) but when i click INSIDE the editor anywhere the cell gets closed (like if cell.close() was called), I tried to disable every possible function on the cell from chrome events listener but nothing seemed to really change anything.
It smelled like when i added the navigable=true on my grid something changed so i turned it off, then i could click inside the editor without the cell closing, but a problem is still remaining when i click on some tools from the editor like font size the cell keeps closing without any noticeable event being called.
Regards.