I have a set of nested HTML buckets with sortable enabled at the parent and child level. This works perfectly.
However, some events or changes on the page require me to replace the HTML of the parent container -- essentially re-rendering all of the children and children's children on the page. After this happens, it looks live the first set of children are still sortable since I did not remove the parent container.
After this HTML replacement, however, the children's children are not longe sortable, even if I re-run the kendoSortable call on the child containers. There are no errors in my javascript console, and from the documentation I'm not finding any method of "destroying" the initial sortable instances.
// Parent$("#cb-ContentList").kendoSortable({ change: function(e) { var order = []; var i = 1; var cms_pages_ID = $("#editor_panel").data('cms_pages_id'); $("#cb-ContentList > div").each( function() { order[i] = $(this).attr("data-contentbuilder_id"); i++; }); // Do something } }); $("div.verticalBuckets .bucketColumn").kendoSortable({ move: function(e) { currentTarget = e.target.parent(); }, change: function(e) { var order = []; var i = 1; currentTarget.children("div").each( function() { order[i] = $(this).attr("data-contentbuilder_id"); i++; }); // Do something } });
As per above, I make an AJAX call then gives me new HTML for #cb-ContentList -- which I do $("#cb-ContentList").replaceWith(data) with. Now the children under #cb-ContentList are still sortable, but the children under the .verticalBuckets are no longer sortable, even if I re-run the code above.
Kendo grid is having zoom issue on ipad when it has horizontal scroll bar. Grid gets zoom when horizontal scroll bar is stable. Please find the the grid.
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.
Hi, I am trying to wrap my head around how "pdfExport event of the grid" works.
I can't seem to find any documentation about it, explaining it?
If I view this demo url: http://demos.telerik.com/kendo-ui/grid/pdf-export it tells me:
:Furthermore, you have the ability to customize the look and feel of the exported grid table by wiring the pdfExport event of the grid. More information on the Pdf export feature of the widget is available in the following help topic."
When I click on the following help topic I do not see anything about "pdfExport event of the grid"?
How does "pdfExport of the grid" work?
Can you bind the Resource from Database source or Web API in Scheduler UI in asp.net core? Because I see your examples are you are using hard code value for Room and Attendees?

Hi,
We try to use TreeView as custom editor for Grid but could not get expected result.
We refer the example that you provide under this url ( http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/use-treeview-as-grid-editor ) but failed to get the result that we expect.
Kindly need your help to assist on this issue.
Thank you,

In my application, I have a Kendo grid, which is used to obtain the user's data (certification details). The user are provided with a Kendo grid, which have a "Add" button. Clicking on "Add" button, the user will be prompted with pop up to obtain their details.
On clicking "Submit" button, required validation are not firing with grid having no records. User are able to submit the application without entering the required data with grid. How can I force the kendo validation on button click on grid.
<style>body { margin: 0;}html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}table { border-spacing: 0; border-collapse: collapse;}td,th { padding: 0;}a { background-color: transparent;}*, ::after, ::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.row { margin-right: -15px; margin-left: -15px;}.form-group { margin-bottom: 25px;}.form-group { width: auto !important;}.container { max-width: 1300px !important;}label { font-weight: normal;}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; margin-bottom: 20px;}.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 { float: left;}.col-xs-12 { width: 100%;}.form-body { padding-bottom: 15px;}/* @media all and (min-width:768px) */.col-sm-4 { width: 33.33%;}/* @media all and (min-width:768px) */.col-sm-8 { width: 66.66%;}.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 { margin-bottom: 0px !important;}/* @media all and (min-width:992px) */.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9 { float: left;}/* @media all and (min-width:992px) */.col-md-10 { width: 83.33%;}.no-padding { padding: 0;}.container,.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}/* @media all and (min-width:768px) */.container { width: 750px;}/* @media all and (min-width:992px) */.container { width: 970px;}/* @media all and (min-width:1200px) */.container { width: 1170px;}.padding-top10 { padding-top: 10px;}body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.4285; color: #333; background-color: #fff;}body { padding-top: 10px; padding-bottom: 10px; font-family: sans-serif !important; font-size: 13px; color: #666666;}html { font-size: 10px; -webkit-tap-highlight-color: transparent;}label { max-width: 100%; margin-bottom: 5px; font-weight: regular;}/* @media all and (min-width:768px) */.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9 { float: left;}label.required::after { content: "*" !important; padding-left: 3px; color: red !important; left: 10px; position: relative; margin-left: -10px;}/* @media all and (min-width:768px) */.form-horizontal .control-label { padding-top: 7px; margin-bottom: 0px; text-align: left; margin-bottom: 5px;}.k-widget,.k-block,.k-inline-block,.k-draghandle { border-style: solid; border-width: 1px; -webkit-appearance: none;}.k-block,.k-widget { line-height: normal; outline: 0;}th,td { text-align: left;}a { color: #337ab7; text-decoration: none;}.k-block,.k-button,.k-header,.k-grid-header,.k-toolbar,.k-grouping-header,.k-tooltip,.k-pager-wrap,.k-tabstrip-items .k-item,.k-state-hover.k-link,.k-textbox,.k-textbox:hover,.k-autocomplete,.k-dropdown-wrap,.k-picker-wrap,.k-numeric-wrap,.k-state-hover.k-autocomplete,.k-state-hover.k-dropdown-wrap,.k-state-hover.k-picker-wrap,.k-state-hover.k-numeric-wrap,.k-draghandle { background-repeat: repeat; background-position: 0 center;}.k-floatwrap::after,.k-slider-items::after,.k-grid-toolbar::after { content: ""; display: block; clear: both; visibility: hidden; height: 0px; overflow: hidden;}.k-grid-header { background-color: #e4e4e4; border: 1px solid #e4e4e4;}.k-grid-content { border-bottom: 1px solid #e4e4e4;}table { background-color: transparent;}.k-grid-header-wrap { border: none; border: 1px solid #e4e4e4;}.k-header,.k-grid-header,.k-toolbar,.k-dropdown-wrap,.k-picker-wrap,.k-numeric-wrap,.k-grouping-header,.k-pager-wrap,.k-textbox,.k-button,.k-progressbar,.k-draghandle,.k-autocomplete,.k-state-highlight,.k-tabstrip-items .k-item,.k-panelbar .k-tabstrip-items .k-item,.km-pane-wrapper>.km-pane>.km-view>.km-content { background-image: none; background-position: 50% 50%; background-color: #eeeeee;}.k-block,.k-header,.k-grid-header,.k-toolbar,.k-grouping-header,.k-pager-wrap,.k-button,.k-draghandle,.k-treemap-tile,html .km-pane-wrapper .k-header { background-color: #eeeeee;}.k-header,.k-grid-header-wrap,.k-grid .k-grouping-header,.k-grid-header,.k-pager-wrap,.k-pager-wrap .k-textbox,.k-pager-wrap .k-link,.k-grouping-header .k-group-indicator,.k-gantt-toolbar .k-state-default { border-color: #c5c5c5;}.k-link { cursor: pointer; outline: 0; text-decoration: none;}.k-button,.k-textbox,.k-autocomplete,div.k-window-content,.k-tabstrip>.k-content>.km-scroll-container,.k-block,.k-edit-cell .k-widget,.k-grid-edit-row .k-widget,.k-grid-edit-row .text-box,.km-actionsheet>li,.km-shim { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.k-icon,.k-tool-icon,.k-grouping-dropclue,.k-drop-hint,.k-column-menu .k-sprite,.k-grid-mobile .k-resize-handle-inner::before,.k-grid-mobile .k-resize-handle-inner::after,.k-pager-numbers .k-current-page .k-link::after,.k-scheduler-toolbar>ul.k-scheduler-views>li.k-current-view>.k-link::after { background-image: url('Bootstrap/sprite.png'); border-color: transparent;}.k-animation-container,.k-widget,.k-widget *,.k-animation-container *,.k-widget *::before,.k-animation-container *::after,.k-block .k-header,.k-list-container { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;}.k-widget,.k-widget * { -moz-background-clip: border-box; -webkit-background-clip: border-box; background-clip: border-box;}.k-button-icontext { overflow: visible;}a.k-button { -khtml-user-select: none; -webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; text-decoration: none;}.k-i-plus,.k-add { background-position: -32px -64px;}.k-grid,.k-listview { position: relative; zoom: 1;}.k-block,.k-widget,.k-grid,.k-slider,.k-splitter,.k-treeview,.k-panelbar,.k-content,.k-header-column-menu { outline: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.k-block,.k-widget { background-color: #ffffff;}.k-grouping-header,.k-grid-toolbar { margin: 0; padding: .22em .2em .28em; cursor: default;}.k-grid-header-wrap,.k-grid-footer-wrap { position: relative; width: 100%; overflow: hidden; border-style: solid; border-width: 0 1px 0 0; zoom: 1;}.k-block,.k-widget,.k-input,.k-textbox,.k-group,.k-content,.k-header,.k-filter-row>th,.k-editable-area,.k-separator,.k-colorpicker .k-i-arrow-s,.k-textbox>input,.k-autocomplete,.k-dropdown-wrap,.k-toolbar,.k-group-footer td,.k-grid-footer,.k-footer-template td,.k-state-default,.k-state-default .k-select,.k-state-disabled,.k-grid-header,.k-grid-header-wrap,.k-grid-header-locked,.k-grid-footer-locked,.k-grid-content-locked,.k-grid td,.k-grid td.k-state-selected,.k-grid-footer-wrap,.k-pager-wrap,.k-pager-wrap .k-link,.k-pager-refresh,.k-grouping-header,.k-grouping-header .k-group-indicator,.k-panelbar>.k-item>.k-link,.k-panel>.k-item>.k-link,.k-panelbar .k-panel,.k-panelbar .k-content,.k-treemap-tile,.k-calendar th,.k-slider-track,.k-splitbar,.k-dropzone-active,.k-tiles,.k-toolbar,.k-tooltip,.k-button-group .k-tool,.k-upload-files { border-color: #c5c5c5;}.k-block,.k-widget,.k-popup,.k-content,.k-toolbar,.k-dropdown .k-input { color: #333333;}.k-button { color: #333333; border-color: #c5c5c5; background-color: #ffffff;}.k-widget,.k-button { -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.05);}.k-grid,.k-scheduler,.k-menu,.k-editor { border-radius: 2px;}.k-grid { border-radius: 0; border: none; box-shadow: none;}.k-floatwrap,.k-slider-items,.k-grid-toolbar { display: inline-block;}.k-floatwrap,.k-slider-items,.k-grid-toolbar { display: block;}.k-grid-toolbar { border-style: solid; border-width: 1px 0 0;}.k-link:link,.k-link:visited,.k-state-hover.k-nav-current .k-link { color: #428bca;}.k-header,.k-treemap-title,.k-grid-header .k-header>.k-link { color: #333333;}.k-button,.k-textbox,.k-timepicker,.k-datepicker,.k-datetimepicker { display: inline-block; vertical-align: middle;}.k-grid-toolbar { background-color: transparent; border: none;} :first-child.k-grid-toolbar,.k-grouping-header+.k-grid-toolbar { border-width: 0 0 1px;}.k-grid>.k-grouping-header, :first-child.k-grid-header, :first-child.k-grid-toolbar,.k-scheduler> :first-child.k-scheduler-toolbar { border-radius: 1px 1px 0 0;}div.k-grid-header,div.k-grid-footer { padding-right: 17px; border-bottom-style: solid; border-bottom-width: 1px; zoom: 1;}.k-grid-content { position: relative; width: 100%; overflow: auto; overflow-x: auto; overflow-y: scroll; zoom: 1; min-height: 0px;}.k-grid-content-locked,.k-grid-content,.k-pager-wrap { white-space: normal;}.k-grid table { width: 100%; margin: 0; max-width: none; border-collapse: separate; border-spacing: 0; empty-cells: show; border-width: 0; outline: 0;}.k-grid-header-wrap>table,.k-grid-header-locked>table { margin-bottom: -1px;}.k-grid-header table,.k-grid-content table,.k-grid-footer table,.k-grid-content-locked>table { table-layout: fixed;}.k-grid-header th.k-header,.k-filter-row th { overflow: hidden; border-style: solid; border-width: 0 0 1px 1px; padding: .5em .6em .4em .6em; font-weight: normal; white-space: nowrap; text-overflow: ellipsis; text-align: left;}.k-grid-header th.k-header { vertical-align: bottom;}.k-grid-header .k-header,.k-grid-header th.k-header { border: 1px solid #e4e4e4; color: #333333; background-color: #e4e4e4;}.k-grid .k-grid-header .k-header { white-space: normal;}.k-grid-header th:first-child.k-header,.k-grid tbody td:first-child,.k-grid tfoot td:first-child,.k-filter-row>th:first-child { border-left-width: 0px;}.k-block,.k-slider,.k-splitbar,.k-calendar,.k-treeview,.k-pager-wrap,.k-grid-header .k-link,.k-header-column-menu { -webkit-touch-callout: none;}.k-grid-header .k-link:link,.k-grid-header .k-link:visited,.k-grid-header .k-state-hover.k-nav-current .k-link,.k-grouping-header .k-link { color: #333333;}.k-grid-header th.k-header>.k-link { display: block; min-height: 18px; line-height: 18px; margin: -0.5em -0.6em -0.4em -0.6em; padding: .5em .6em .4em .6em; overflow: hidden; text-overflow: ellipsis;}.k-grid .k-grid-header .k-header .k-link { height: auto;}.k-textbox>input,[type='text'].k-input,[type='number'].k-input,.k-textbox,.k-picker-wrap .k-input,.k-button { font-size: 100%; font-family: inherit; border-style: solid; border-width: 1px; -webkit-appearance: none;}.k-button { display: inline-block; margin: 0; padding: 2px 7px 2px; font-family: inherit; line-height: 1.72em; text-align: center; cursor: pointer; text-decoration: none;}.k-block,.k-button,.k-textbox,.k-drag-clue,.k-touch-scrollbar,.k-window,.k-window-titleless .k-window-content,.k-window-action,.k-inline-block,.k-grid .k-filter-options,.k-grouping-header .k-group-indicator,.k-autocomplete,.k-multiselect,.k-combobox,.k-dropdown,.k-dropdown-wrap,.k-datepicker,.k-timepicker,.k-colorpicker,.k-datetimepicker,.k-notification,.k-numerictextbox,.k-picker-wrap,.k-numeric-wrap,.k-colorpicker,.k-list-container,.k-calendar-container,.k-calendar td,.k-calendar .k-link,.k-treeview .k-in,.k-editor-inline,.k-tooltip,.k-tile,.k-slider-track,.k-slider-selection,.k-upload { border-radius: 2px;}.k-button { -webkit-box-shadow: none; box-shadow: none;}.k-grid-add { color: #336699;}.k-grid-toolbar .k-button { vertical-align: middle;}.k-grid .k-button { margin: 0 .16em;}.k-grid .k-button { border-color: transparent !important; background-color: transparent !important;}.k-icon,.k-sprite,.k-button-group .k-tool-icon { display: inline-block; width: 16px; height: 16px; overflow: hidden; background-repeat: no-repeat; font-size: 0px; line-height: 0; text-align: center; -ms-high-contrast-adjust: none;}.k-icon,.k-sprite { background-color: transparent;}.k-icon,.k-state-disabled .k-icon,.k-column-menu .k-sprite,.k-pager-numbers .k-current-page .k-link::after,.k-scheduler-toolbar>ul.k-scheduler-views>li.k-current-view>.k-link::after { opacity: 1;}.k-button-icontext .k-icon,.k-button-icontext .k-image { margin-right: 3px; margin-right: 0.3rem; margin-left: -3px; margin-left: -0.3rem;} :root *>.k-icon, :root *>.k-sprite, :root *>.k-button-group .k-tool-icon { vertical-align: middle;}.k-button-icontext.k-button .k-icon,.k-button-icontext.k-button .k-image { vertical-align: text-top;}</style><html><div class="row question form-group"> <label class="col-sm-4 control-label required" for="ans"> TEST LABEL </label> <div class="col-sm-8"> <div class="k-grid k-widget k-valid" data-role="grid" data-grid-source="CertificationDetails" data-grid-id="ace1fa8c-d7ee-446a-96b0-d120a3a6415c" data-validate="true" required="required"> <div class="k-header k-grid-toolbar"> <a class="k-button k-button-icontext k-grid-add" href="#"> <span class="k-icon k-add"> </span>Add </a> </div> <div class="k-grid-header" style="padding-right: 17px;"> <div class="k-grid-header-wrap"> <table role="grid"> <colgroup> <col> <col> </colgroup> <thead role="rowgroup"> <tr role="row"> <th class="k-header" id="e2bf1a9c-a57b-4362-970b-9128426f5c37" role="columnheader" rowspan="1" data-role="columnsorter" data-index="0" data-title="Certification Details" data-field="CertificationDetails"> <a class="k-link" href="#">Educational institution</a> </th> <th class="k-header" id="e6b0db25-287c-4e7e-b7d7-bc024674465b" rowspan="1" data-index="1"> </th> </tr> </thead> </table> </div> </div> <div class="k-grid-content"> <table class="k-selectable" role="grid" style="-ms-touch-action: double-tap-zoom pinch-zoom;" data-role="selectable"> <colgroup> <col> <col> </colgroup> <tbody role="rowgroup"></tbody> </table> </div> </div> </div></div></html>I want to force user to add data to grid before submit. Please help.
I've tried adding the dataBound event to a kendo diagram using k-options and also tried adding the event via the k-on-data-bound attribute but neither of these seem to work. Here is an example of where I would expect the dataBound event to fire but the console message is never printed.