Telerik Forums
Kendo UI for jQuery Forum
1 answer
235 views

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
                }
        });    
// Children
        $("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.

Tsvetina
Telerik team
 answered on 30 May 2017
8 answers
333 views

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.

 

Dimitar
Telerik team
 answered on 30 May 2017
0 answers
426 views

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.

 

Jean-Baptiste
Top achievements
Rank 1
 asked on 29 May 2017
1 answer
181 views

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?

Preslav
Telerik team
 answered on 29 May 2017
5 answers
386 views

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?

Ivan Danchev
Telerik team
 answered on 29 May 2017
3 answers
227 views

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,

Georgi
Telerik team
 answered on 29 May 2017
3 answers
1.8K+ views

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.

Angel Petrov
Telerik team
 answered on 29 May 2017
10 answers
1.6K+ views
Excel export did not filter out some exportable characters, specifically, hex values 0x0f and 0x10?
Alex Hajigeorgieva
Telerik team
 answered on 29 May 2017
2 answers
532 views
Why is the controller's reference to the grid not yet set in the databound event? Is this a design choice or a bug?
You can get a complete reference by accessing the sender in the databound event, so why would the scope not be updated yet?

Here's a plunker pointing out what I mean: http://plnkr.co/edit/ErDILanappRCgMxxo3Jh

I'm relatively new to AngularJS, so if this is a matter of design and guidelines please enlighten me with the details.


Thanks
صابر
Top achievements
Rank 1
 answered on 28 May 2017
2 answers
256 views

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.

 

صابر
Top achievements
Rank 1
 answered on 28 May 2017
Narrow your results
Selected tags
Tags
Grid
General Discussions
Charts
Data Source
Scheduler
DropDownList
TreeView
MVVM
Editor
Window
DatePicker
Spreadsheet
Upload
ListView (Mobile)
ComboBox
TabStrip
MultiSelect
AutoComplete
ListView
Menu
Templates
Gantt
Validation
TreeList
Diagram
NumericTextBox
Splitter
PanelBar
Application
Map
Drag and Drop
ToolTip
Calendar
PivotGrid
ScrollView (Mobile)
Toolbar
TabStrip (Mobile)
Slider
Button (Mobile)
Filter
SPA
Drawing API
Drawer (Mobile)
Globalization
LinearGauge
Sortable
ModalView
Hierarchical Data Source
Button
FileManager
MaskedTextBox
View
Form
NavBar
Notification
Switch (Mobile)
SplitView
ListBox
DropDownTree
PDFViewer
Sparkline
ActionSheet
TileLayout
PopOver (Mobile)
TreeMap
ButtonGroup
ColorPicker
Pager
Styling
Chat
MultiColumnComboBox
Dialog
DateRangePicker
Checkbox
Timeline
Drawer
DateInput
ProgressBar
MediaPlayer
ImageEditor
TextBox
OrgChart
Accessibility
Effects
PivotGridV2
ScrollView
Switch
TextArea
BulletChart
Licensing
QRCode
ResponsivePanel
Wizard
CheckBoxGroup
Localization
Barcode
Breadcrumb
Collapsible
MultiViewCalendar
Touch
RadioButton
Stepper
Card
ExpansionPanel
Rating
RadioGroup
Badge
Captcha
Heatmap
AppBar
Loader
Security
TaskBoard
Popover
DockManager
FloatingActionButton
CircularGauge
ColorGradient
ColorPalette
DropDownButton
TimeDurationPicker
ToggleButton
TimePicker
BottomNavigation
Ripple
SkeletonContainer
Avatar
Circular ProgressBar
FlatColorPicker
SplitButton
Signature
Chip
ChipList
VS Code Extension
AIPrompt
PropertyGrid
Sankey
Chart Wizard
OTP Input
SpeechToTextButton
InlineAIPrompt
StockChart
ContextMenu
DateTimePicker
RadialGauge
ArcGauge
AICodingAssistant
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?