Grid with kendo editor as column closes cell onclick

1 posts, 0 answers
  1. Jean-Baptiste
    Jean-Baptiste avatar
    1 posts
    Member since:
    Sep 2016

    Posted 29 May 2017 Link to this post

    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.

     

Back to Top