This is a migrated thread and some comments may be shown as answers.

Grid with kendo editor as column closes cell onclick

0 Answers 204 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jean-Baptiste
Top achievements
Rank 1
Jean-Baptiste asked on 29 May 2017, 03:49 PM

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.

 

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Jean-Baptiste
Top achievements
Rank 1
Share this question
or