Telerik Forums
Kendo UI for jQuery Forum
8 answers
290 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
394 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
151 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
354 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
187 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.7K+ 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.5K+ 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
499 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
223 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
26 answers
2.1K+ views

http://dojo.telerik.com/IkoTO/2

This is just a modified example from the original API Docs demo.  All I did was add a spacer div so the page has scroll.

To reproduce: Simply click inside a multiselect, then scroll down to bottom of dropdown results.  

You'll see the dropdown closes and then the page starts scrolling.

 

This would be VERY annoying for any end-user.

Telerik needs to fix this by stopPropagation of the scroll event maybe?

Lucia
Top achievements
Rank 1
 answered on 26 May 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?