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.