Kendo grid is having zoom issue on ipad when it has horizontal scroll bar. Grid gets zoom when horizontal scroll bar is stable. Please find the the grid.
Hello,
We're currently facing a problem with a KendoGrid having a KendoEditor as column editor.
Facts:
Column Template:
' <div name= '
+ tableRefCol.Name +
'> #=data.'
+ tableRefCol.Name +
'==null?"":data.'
+tableRefCol.Name+
'#</div>'
Column Editor Definition:
function
CreateEditor(container, options) {
var
grid = $(
'#Grid'
).data(
'kendoGrid'
);
var
idx = container[0].cellIndex - $(
'#Grid'
).data(
'kendoGrid'
).dataSource._group.length;
var
name = grid.columns[idx].field;
$(
'<div id="inGridEditor" style="height:200px;width:200px;" name="'
+ name +
'" data-bind="value: '
+ options.field +
'" div></div>'
)
.kendoEditor(
{
tools: [
"bold"
,
"italic"
,
"underline"
,
"insertUnorderedList"
,
"insertOrderedList"
,
"foreColor"
,
"fontSize"
]
})
.appendTo(container);
$(
"#inGridEditor"
).focus();
$(
".k-editortoolbar-dragHandle"
).remove();
};
Grid options:
{
"prefix"
:
""
,
"name"
:
"Grid"
,
"columns"
: [{
"field"
:
"LibControle"
,
"title"
:
"Libellé du contrôle"
,
"width"
:
"150px"
,
"filterable"
:
true
,
"headerAttributes"
: {
"id"
:
"9fb0634a-05e7-4f0a-985c-47b1283fd62b"
}
}, {
"field"
:
"IdEquipe"
,
"title"
:
"Equipe"
,
"width"
:
"85px"
,
"filterable"
:
true
,
"values"
: [{
"value"
: 1,
"text"
:
"ADL"
}, {
"value"
: 2,
"text"
:
"FMA"
}, {
"value"
: 3,
"text"
:
"UDSI"
}, {
"value"
: 4,
"text"
:
"OSIRIS"
}, {
"value"
: 5,
"text"
:
"ORPHEE"
}, {
"value"
: 6,
"text"
:
"LECI"
}
],
"headerAttributes"
: {
"id"
:
"dfd6a4c2-eeed-4c63-be9c-70c8f21be033"
}
}, {
"field"
:
"IdInstallation"
,
"title"
:
"Installation"
,
"width"
:
"120px"
,
"filterable"
:
true
,
"values"
: [{
"value"
: 49,
"text"
:
"0Recette00"
}, {
"value"
: 1,
"text"
:
"CEA_SAC"
}, {
"value"
: 2,
"text"
:
"CNRS-LSCE Bt 12"
}, {
"value"
: 3,
"text"
:
"I1 Bt 602-LNHB"
}, {
"value"
: 4,
"text"
:
"I105 ADEC"
}, {
"value"
: 5,
"text"
:
"I109"
}, {
"value"
: 6,
"text"
:
"I128 Bat 450 - DPC"
}, {
"value"
: 7,
"text"
:
"I141_142 Bt 399-INSTN"
}, {
"value"
: 8,
"text"
:
"I151 SEDI"
}, {
"value"
: 9,
"text"
:
"I16 Bt 152-SIMOPRO"
}, {
"value"
: 10,
"text"
:
"I17 Bt 524-388-SPR"
}, {
"value"
: 11,
"text"
:
"I209 Bt 144"
}, {
"value"
: 12,
"text"
:
"I21 Bt 516"
}, {
"value"
: 13,
"text"
:
"I213 Bt 607-SAPHIR-DEMIP"
}, {
"value"
: 14,
"text"
:
"I218 SACM"
}, {
"value"
: 15,
"text"
:
"I222"
}, {
"value"
: 16,
"text"
:
"I223"
}, {
"value"
: 17,
"text"
:
"I232 Bt 565-DIGITEO"
}, {
"value"
: 18,
"text"
:
"I234 Bt 135-DOSEO"
}, {
"value"
: 19,
"text"
:
"I25 POLYTECHNIQUE"
}, {
"value"
: 20,
"text"
:
"I26 Bat 546 - Radiolyse"
}, {
"value"
: 21,
"text"
:
"I27 Bat 391 - DPC"
}, {
"value"
: 22,
"text"
:
"I34 Bt 520-SRMP"
}, {
"value"
: 23,
"text"
:
"I379"
}, {
"value"
: 24,
"text"
:
"I39 Bt 522-IRAMIS"
}, {
"value"
: 26,
"text"
:
"I47 Bt 604-FLS"
}, {
"value"
: 27,
"text"
:
"I57 Bt 389-156-SPR"
}, {
"value"
: 28,
"text"
:
"I60 Bt 455-SRMA"
}, {
"value"
: 29,
"text"
:
"I62 Bat 528 SB2SM"
}, {
"value"
: 30,
"text"
:
"I64 BAT 126 - JANNUS"
}, {
"value"
: 31,
"text"
:
"I68 Bt 830-832-SHFJ"
}, {
"value"
: 32,
"text"
:
"I74 Bt 601-LBM"
}, {
"value"
: 33,
"text"
:
"I75 Bt 547-SCBM"
}, {
"value"
: 34,
"text"
:
"I84 LPS"
}, {
"value"
: 35,
"text"
:
"I9"
}, {
"value"
: 25,
"text"
:
"I90 Bt142"
}, {
"value"
: 36,
"text"
:
"I91 Bt 534-LNHB"
}, {
"value"
: 37,
"text"
:
"I93 Bt 603 TAMARIS"
}, {
"value"
: 38,
"text"
:
"I97 Bt 136-SPI"
}, {
"value"
: 39,
"text"
:
"INB 101 ORPHEE"
}, {
"value"
: 40,
"text"
:
"INB 18 ULYSSE"
}, {
"value"
: 41,
"text"
:
"INB 35"
}, {
"value"
: 42,
"text"
:
"INB 40 OSIRIS"
}, {
"value"
: 43,
"text"
:
"INB 49 LHA"
}, {
"value"
: 44,
"text"
:
"INB 50 LECI"
}, {
"value"
: 45,
"text"
:
"INB 72"
}, {
"value"
: 46,
"text"
:
"IRSN-LMRE Bt 501"
}, {
"value"
: 47,
"text"
:
"IRSN-SCA Bt 389"
}, {
"value"
: 48,
"text"
:
"testformation aaaaa aaaaaa"
}
],
"headerAttributes"
: {
"id"
:
"a9e3e828-0224-4e49-abb1-f30d4ba064e2"
}
}, {
"field"
:
"LibTypeEvenement"
,
"title"
:
"Type d'évènement"
,
"width"
:
"140px"
,
"filterable"
:
true
,
"values"
: [{
"value"
:
"Bilan"
,
"text"
:
"Bilan"
}, {
"value"
:
"ContrĂ´le externe"
,
"text"
:
"ContrĂ´le externe"
}, {
"value"
:
"ContrĂ´le interne"
,
"text"
:
"ContrĂ´le interne"
}, {
"value"
:
"Contrôle matériel"
,
"text"
:
"Contrôle matériel"
}, {
"value"
:
"Divers"
,
"text"
:
"Divers"
}
],
"headerAttributes"
: {
"id"
:
"e24370a5-b01f-45f8-a701-839709618aa8"
}
}, {
"field"
:
"CodeTS"
,
"title"
:
"Type de Terme Source"
,
"width"
:
"170px"
,
"filterable"
:
true
,
"values"
: [{
"value"
:
"aaa"
,
"text"
:
"aaa"
}, {
"value"
:
"ACCELERATEUR"
,
"text"
:
"ACCELERATEURada"
}, {
"value"
:
"CA"
,
"text"
:
"CA"
}, {
"value"
:
"GX"
,
"text"
:
"GX"
}, {
"value"
:
"SOURCE non scellée"
,
"text"
:
"SOURCE non scellée"
}, {
"value"
:
"Source scellée HA"
,
"text"
:
"Source scellée HA"
}, {
"value"
:
"Source scellée non HA"
,
"text"
:
"Source scellée non HA"
}
],
"headerAttributes"
: {
"id"
:
"485d785d-79b8-4617-bdd2-53038b962da4"
}
}, {
"field"
:
"DateDebut"
,
"title"
:
"Date prévisionnelle"
,
"width"
:
"120px"
,
"filterable"
:
true
,
"format"
:
"{0:dd/MM/yyyy}"
,
"headerAttributes"
: {
"id"
:
"94ee9d4e-837a-4ad1-a76f-e6d6faf44de5"
}
}, {
"field"
:
"DateRealisation"
,
"title"
:
"Date de réalisation"
,
"width"
:
"120px"
,
"filterable"
:
true
,
"format"
:
"{0:dd/MM/yyyy}"
,
"headerAttributes"
: {
"id"
:
"f74d6351-c191-4161-8c4a-7ad1f8d8c4c6"
}
}, {
"field"
:
"NumChrome"
,
"title"
:
"N° chrono de la note"
,
"width"
:
"100px"
,
"filterable"
:
true
,
"headerAttributes"
: {
"id"
:
"9cfc585b-aa5a-4d9e-b0c9-5d82c0a5d1d6"
}
}, {
"field"
:
"NonConformite"
,
"title"
:
"NC"
,
"width"
:
"80px"
,
"filterable"
:
true
,
"template"
:
"<input type=\"checkbox\" #= NonConformite ? checked=\"checked\" : \"\" # \"\" />"
,
"headerAttributes"
: {
"id"
:
"c74b7954-5329-42d4-bff9-86643e0983bd"
}
}, {
"field"
:
"LibTypeMateriel"
,
"title"
:
"Type de matériel"
,
"width"
:
"140px"
,
"filterable"
:
true
,
"headerAttributes"
: {
"id"
:
"f9eae8c1-d0b9-4162-a951-fca09ce21d7f"
}
}, {
"field"
:
"LibStatutMateriel"
,
"title"
:
"Statut matériel/TS"
,
"width"
:
"140px"
,
"filterable"
:
true
,
"headerAttributes"
: {
"id"
:
"9040092e-11b6-4b8f-86ba-911859da1374"
}
}, {
"field"
:
"CodeStatutEvent"
,
"title"
:
"Statut de l'évènement"
,
"width"
:
"140px"
,
"filterable"
:
true
,
"headerAttributes"
: {
"id"
:
"08a1bd02-6f7d-4f3f-86ef-b2ef93858ae6"
}
}, {
"field"
:
null
,
"title"
:
"Pièce jointe"
,
"width"
:
"140px"
,
"filterable"
:
false
,
"template"
:
"<Button class=\"k-button\" onclick=OpenPopUp(\"http://localhost:53764/PlanificationControles/Documents/#=data.id#\") >Pièce jointe</a>"
,
"headerAttributes"
: {
"id"
:
"b16dd126-1814-4ebc-9f5b-6de115da4ed6"
}
}, {
"field"
:
"Commentaire"
,
"title"
:
"Commentaires"
,
"width"
:
"180px"
,
"filterable"
:
false
,
"template"
:
" <div name= Commentaire> #=data.Commentaire==null?\"\":data.Commentaire#</div>"
,
"headerAttributes"
: {
"id"
:
"6a6e7db1-e72f-403a-8b07-01ffc043d6fb"
}
}, {
"field"
:
null
,
"title"
:
"Non-conformité Propreté radiologique"
,
"width"
:
"210px"
,
"filterable"
:
false
,
"template"
:
"<a class=\"k-button k-button-icontext \" style=\"visibility: #=data.Visible?\"visible\":\"hidden\"#\" href=\"http://localhost:53764/Proprete/Element/#=data.id#\"><span></span><span class=\"btnText\">Non-conformité Propreté radiologique</span></a>"
,
"headerAttributes"
: {
"id"
:
"4f32a5f5-c744-4723-95e3-6410f3afb8f6"
}
}
],
"toolbar"
: [{
"name"
:
"excel"
}, {
"name"
:
"pdf"
}, {
"name"
:
"save"
,
"text"
:
"Sauvegarder"
}, {
"name"
:
"cancel"
,
"text"
:
"Annuler"
}
],
"autoBind"
:
true
,
"filterable"
:
true
,
"scrollable"
:
true
,
"sortable"
:
true
,
"selectable"
:
false
,
"allowCopy"
:
true
,
"navigatable"
:
true
,
"pageable"
:
false
,
"editable"
:
"incell"
,
"groupable"
:
false
,
"rowTemplate"
:
""
,
"altRowTemplate"
:
""
,
"noRecords"
:
false
,
"dataSource"
: {
"options"
: {
"data"
:
null
,
"schema"
: {
"model"
: {
"id"
:
"IdEvenementControle"
,
"fields"
: {
"LibControle"
: {
"editable"
:
true
,
"validation"
: {
"required"
:
true
},
"type"
:
"string"
},
"IdEquipe"
: {
"editable"
:
false
,
"validation"
: {
"required"
:
true
},
"type"
:
"string"
},
"IdInstallation"
: {
"editable"
:
false
,
"validation"
: {
"required"
:
true
},
"type"
:
"string"
},
"LibTypeEvenement"
: {
"editable"
:
false
,
"validation"
: {
"required"
:
true
},
"type"
:
"string"
},
"CodeTS"
: {
"editable"
:
false
,
"validation"
: {
"required"
:
true
},
"type"
:
"string"
},
"DateDebut"
: {
"editable"
:
false
,
"validation"
: {
"required"
:
true
},
"type"
:
"date"
},
"DateRealisation"
: {
"editable"
:
true
,
"validation"
: {
"required"
:
true
},
"type"
:
"date"
},
"NumChrome"
: {
"editable"
:
true
,
"validation"
: {
"required"
:
true
},
"type"
:
"string"
},
"NonConformite"
: {
"editable"
:
true
,
"validation"
: {
"required"
:
false
},
"type"
:
"boolean"
},
"LibTypeMateriel"
: {
"editable"
:
false
,
"validation"
: {
"required"
:
false
},
"type"
:
"string"
},
"LibStatutMateriel"
: {
"editable"
:
false
,
"validation"
: {
"required"
:
false
},
"type"
:
"string"
},
"CodeStatutEvent"
: {
"editable"
:
false
,
"validation"
: {
"required"
:
false
},
"type"
:
"string"
},
"null"
: {
"editable"
:
false
,
"validation"
: {
"required"
:
false
},
"type"
:
"string"
},
"Commentaire"
: {
"editable"
:
true
,
"validation"
: {
"required"
:
false
},
"type"
:
"string"
},
"IdEvenementControle"
: {
"editable"
:
false
,
"validation"
: {
"required"
:
true
},
"type"
:
"number"
},
"DateCreation"
: {
"editable"
:
false
,
"validation"
: {
"required"
:
true
},
"type"
:
"date"
},
"DateFin"
: {
"editable"
:
false
,
"validation"
: {
"required"
:
true
},
"type"
:
"date"
},
"DateDernMaj"
: {
"editable"
:
false
,
"validation"
: {
"required"
:
true
},
"type"
:
"date"
},
"DateSuppression"
: {
"editable"
:
false
,
"validation"
: {
"required"
:
true
},
"type"
:
"date"
}
}
}
},
"offlineStorage"
:
null
,
"serverSorting"
:
false
,
"serverPaging"
:
false
,
"serverFiltering"
:
false
,
"serverGrouping"
:
false
,
"serverAggregates"
:
false
,
"batch"
:
true
,
"transport"
: {
"read"
: {
"url"
:
"/PlanificationControles/Read"
,
"dataType"
:
"json"
,
"cache"
:
false
},
"update"
: {
"url"
:
"/PlanificationControles/Update"
,
"dataType"
:
"json"
,
"type"
:
"PUT"
},
"create"
: {
"url"
:
"/PlanificationControles/Insert"
,
"dataType"
:
"json"
,
"type"
:
"POST"
},
"destroy"
: {
"url"
:
"/PlanificationControles/Delete"
,
"dataType"
:
"json"
,
"type"
:
"DELETE"
}
}
},
"_map"
: {},
"_prefetch"
: {},
"_data"
: [ ],
"_pristineData"
: [],
"_ranges"
: [{
"start"
: 0,
"end"
: 541,
"data"
: [],
"timestamp"
: 1496068645469
}
],
"_view"
: [],
"_pristineTotal"
: 541,
"_destroyed"
: [],
"_group"
: [],
"_total"
: 541,
"_shouldDetachObservableParents"
:
true
,
"_events"
: {
"change"
: [
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
,
null
],
"requestEnd"
: [
null
,
null
],
"error"
: [
null
,
null
],
"progress"
: [
null
]
},
"transport"
: {
"options"
: {
"read"
: {
"url"
:
"/PlanificationControles/Read"
,
"dataType"
:
"json"
,
"cache"
:
false
},
"update"
: {
"url"
:
"/PlanificationControles/Update"
,
"dataType"
:
"json"
,
"type"
:
"PUT"
},
"create"
: {
"url"
:
"/PlanificationControles/Insert"
,
"dataType"
:
"json"
,
"type"
:
"POST"
},
"destroy"
: {
"url"
:
"/PlanificationControles/Delete"
,
"dataType"
:
"json"
,
"type"
:
"DELETE"
}
},
"cache"
: {}
},
"reader"
: {},
"_online"
:
true
,
"select"
:
null
,
"table"
:
null
,
"_requestInProgress"
:
false
,
"_aggregateResult"
: {}
},
"height"
: 550,
"resizable"
:
false
,
"reorderable"
:
true
,
"columnMenu"
:
false
,
"detailTemplate"
:
null
,
"columnResizeHandleWidth"
: 3,
"mobile"
:
""
,
"messages"
: {
"editable"
: {
"cancelDelete"
:
"Annuler"
,
"confirmation"
:
"Êtes-vous sûr de vouloir supprimer cet enregistrement?"
,
"confirmDelete"
:
"Effacer"
},
"commands"
: {
"create"
:
"Insérer"
,
"cancel"
:
"Annuler les modifications"
,
"save"
:
"Enregistrer les modifications"
,
"destroy"
:
"Effacer"
,
"edit"
:
"Éditer"
,
"update"
:
"Mettre Ă jour"
,
"canceledit"
:
"Annuler"
,
"excel"
:
"Export vers Excel"
,
"pdf"
:
"Export vers PDF"
,
"select"
:
"Sélectionner"
},
"noRecords"
:
"Aucun enregistrement disponible."
},
"excel"
: {
"proxyURL"
:
""
,
"allPages"
:
true
,
"filterable"
:
true
,
"fileName"
:
"Administration.xlsx"
},
"pdf"
: {
"fileName"
:
"Export.pdf"
,
"proxyURL"
:
""
,
"paperSize"
:
"auto"
,
"allPages"
:
true
,
"landscape"
:
false
,
"margin"
: {
"top"
:
"2cm"
,
"left"
:
"1cm"
,
"right"
:
"1cm"
,
"bottom"
:
"1cm"
},
"title"
:
null
,
"author"
:
"CEA"
,
"subject"
:
null
,
"keywords"
:
null
,
"creator"
:
"CEA"
,
"date"
:
null
,
"avoidLinks"
:
true
,
"repeatHeaders"
:
true
,
"scale"
: 0.8
}
}
(the column I have problem with is the one called "Commentaires")
Here is the problem:
When I click on an Editor cell i enter in edit mod (having the defined kendo editor as wished) but when i click INSIDE the editor anywhere the cell gets closed (like if cell.close() was called), I tried to disable every possible function on the cell from chrome events listener but nothing seemed to really change anything.
It smelled like when i added the navigable=true on my grid something changed so i turned it off, then i could click inside the editor without the cell closing, but a problem is still remaining when i click on some tools from the editor like font size the cell keeps closing without any noticeable event being called.
Regards.
Hi, I am trying to wrap my head around how "pdfExport event of the grid" works.
I can't seem to find any documentation about it, explaining it?
If I view this demo url: http://demos.telerik.com/kendo-ui/grid/pdf-export it tells me:
:Furthermore, you have the ability to customize the look and feel of the exported grid table by wiring the pdfExport event of the grid. More information on the Pdf export feature of the widget is available in the following help topic."
When I click on the following help topic I do not see anything about "pdfExport event of the grid"?
How does "pdfExport of the grid" work?
Can you bind the Resource from Database source or Web API in Scheduler UI in asp.net core? Because I see your examples are you are using hard code value for Room and Attendees?
Hi,
We try to use TreeView as custom editor for Grid but could not get expected result.
We refer the example that you provide under this url ( http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/use-treeview-as-grid-editor ) but failed to get the result that we expect.
Kindly need your help to assist on this issue.
Thank you,
In my application, I have a Kendo grid, which is used to obtain the user's data (certification details). The user are provided with a Kendo grid, which have a "Add" button. Clicking on "Add" button, the user will be prompted with pop up to obtain their details.
On clicking "Submit" button, required validation are not firing with grid having no records. User are able to submit the application without entering the required data with grid. How can I force the kendo validation on button click on grid.
<
style
>body {
margin: 0;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td,
th {
padding: 0;
}
a {
background-color: transparent;
}
*,
::after,
::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.form-group {
margin-bottom: 25px;
}
.form-group {
width: auto !important;
}
.container {
max-width: 1300px !important;
}
label {
font-weight: normal;
}
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 20px;
}
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
float: left;
}
.col-xs-12 {
width: 100%;
}
.form-body {
padding-bottom: 15px;
}
/* @media all and (min-width:768px) */
.col-sm-4 {
width: 33.33%;
}
/* @media all and (min-width:768px) */
.col-sm-8 {
width: 66.66%;
}
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-xs-1,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9 {
margin-bottom: 0px !important;
}
/* @media all and (min-width:992px) */
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9 {
float: left;
}
/* @media all and (min-width:992px) */
.col-md-10 {
width: 83.33%;
}
.no-padding {
padding: 0;
}
.container,
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
/* @media all and (min-width:768px) */
.container {
width: 750px;
}
/* @media all and (min-width:992px) */
.container {
width: 970px;
}
/* @media all and (min-width:1200px) */
.container {
width: 1170px;
}
.padding-top10 {
padding-top: 10px;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 1.4285;
color: #333;
background-color: #fff;
}
body {
padding-top: 10px;
padding-bottom: 10px;
font-family: sans-serif !important;
font-size: 13px;
color: #666666;
}
html {
font-size: 10px;
-webkit-tap-highlight-color: transparent;
}
label {
max-width: 100%;
margin-bottom: 5px;
font-weight: regular;
}
/* @media all and (min-width:768px) */
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9 {
float: left;
}
label.required::after {
content: "*" !important;
padding-left: 3px;
color: red !important;
left: 10px;
position: relative;
margin-left: -10px;
}
/* @media all and (min-width:768px) */
.form-horizontal .control-label {
padding-top: 7px;
margin-bottom: 0px;
text-align: left;
margin-bottom: 5px;
}
.k-widget,
.k-block,
.k-inline-block,
.k-draghandle {
border-style: solid;
border-width: 1px;
-webkit-appearance: none;
}
.k-block,
.k-widget {
line-height: normal;
outline: 0;
}
th,
td {
text-align: left;
}
a {
color: #337ab7;
text-decoration: none;
}
.k-block,
.k-button,
.k-header,
.k-grid-header,
.k-toolbar,
.k-grouping-header,
.k-tooltip,
.k-pager-wrap,
.k-tabstrip-items .k-item,
.k-state-hover.k-link,
.k-textbox,
.k-textbox:hover,
.k-autocomplete,
.k-dropdown-wrap,
.k-picker-wrap,
.k-numeric-wrap,
.k-state-hover.k-autocomplete,
.k-state-hover.k-dropdown-wrap,
.k-state-hover.k-picker-wrap,
.k-state-hover.k-numeric-wrap,
.k-draghandle {
background-repeat: repeat;
background-position: 0 center;
}
.k-floatwrap::after,
.k-slider-items::after,
.k-grid-toolbar::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0px;
overflow: hidden;
}
.k-grid-header {
background-color: #e4e4e4;
border: 1px solid #e4e4e4;
}
.k-grid-content {
border-bottom: 1px solid #e4e4e4;
}
table {
background-color: transparent;
}
.k-grid-header-wrap {
border: none;
border: 1px solid #e4e4e4;
}
.k-header,
.k-grid-header,
.k-toolbar,
.k-dropdown-wrap,
.k-picker-wrap,
.k-numeric-wrap,
.k-grouping-header,
.k-pager-wrap,
.k-textbox,
.k-button,
.k-progressbar,
.k-draghandle,
.k-autocomplete,
.k-state-highlight,
.k-tabstrip-items .k-item,
.k-panelbar .k-tabstrip-items .k-item,
.km-pane-wrapper>.km-pane>.km-view>.km-content {
background-image: none;
background-position: 50% 50%;
background-color: #eeeeee;
}
.k-block,
.k-header,
.k-grid-header,
.k-toolbar,
.k-grouping-header,
.k-pager-wrap,
.k-button,
.k-draghandle,
.k-treemap-tile,
html .km-pane-wrapper .k-header {
background-color: #eeeeee;
}
.k-header,
.k-grid-header-wrap,
.k-grid .k-grouping-header,
.k-grid-header,
.k-pager-wrap,
.k-pager-wrap .k-textbox,
.k-pager-wrap .k-link,
.k-grouping-header .k-group-indicator,
.k-gantt-toolbar .k-state-default {
border-color: #c5c5c5;
}
.k-link {
cursor: pointer;
outline: 0;
text-decoration: none;
}
.k-button,
.k-textbox,
.k-autocomplete,
div.k-window-content,
.k-tabstrip>.k-content>.km-scroll-container,
.k-block,
.k-edit-cell .k-widget,
.k-grid-edit-row .k-widget,
.k-grid-edit-row .text-box,
.km-actionsheet>li,
.km-shim {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.k-icon,
.k-tool-icon,
.k-grouping-dropclue,
.k-drop-hint,
.k-column-menu .k-sprite,
.k-grid-mobile .k-resize-handle-inner::before,
.k-grid-mobile .k-resize-handle-inner::after,
.k-pager-numbers .k-current-page .k-link::after,
.k-scheduler-toolbar>ul.k-scheduler-views>li.k-current-view>.k-link::after {
background-image: url('Bootstrap/sprite.png');
border-color: transparent;
}
.k-animation-container,
.k-widget,
.k-widget *,
.k-animation-container *,
.k-widget *::before,
.k-animation-container *::after,
.k-block .k-header,
.k-list-container {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.k-widget,
.k-widget * {
-moz-background-clip: border-box;
-webkit-background-clip: border-box;
background-clip: border-box;
}
.k-button-icontext {
overflow: visible;
}
a.k-button {
-khtml-user-select: none;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
}
.k-i-plus,
.k-add {
background-position: -32px -64px;
}
.k-grid,
.k-listview {
position: relative;
zoom: 1;
}
.k-block,
.k-widget,
.k-grid,
.k-slider,
.k-splitter,
.k-treeview,
.k-panelbar,
.k-content,
.k-header-column-menu {
outline: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.k-block,
.k-widget {
background-color: #ffffff;
}
.k-grouping-header,
.k-grid-toolbar {
margin: 0;
padding: .22em .2em .28em;
cursor: default;
}
.k-grid-header-wrap,
.k-grid-footer-wrap {
position: relative;
width: 100%;
overflow: hidden;
border-style: solid;
border-width: 0 1px 0 0;
zoom: 1;
}
.k-block,
.k-widget,
.k-input,
.k-textbox,
.k-group,
.k-content,
.k-header,
.k-filter-row>th,
.k-editable-area,
.k-separator,
.k-colorpicker .k-i-arrow-s,
.k-textbox>input,
.k-autocomplete,
.k-dropdown-wrap,
.k-toolbar,
.k-group-footer td,
.k-grid-footer,
.k-footer-template td,
.k-state-default,
.k-state-default .k-select,
.k-state-disabled,
.k-grid-header,
.k-grid-header-wrap,
.k-grid-header-locked,
.k-grid-footer-locked,
.k-grid-content-locked,
.k-grid td,
.k-grid td.k-state-selected,
.k-grid-footer-wrap,
.k-pager-wrap,
.k-pager-wrap .k-link,
.k-pager-refresh,
.k-grouping-header,
.k-grouping-header .k-group-indicator,
.k-panelbar>.k-item>.k-link,
.k-panel>.k-item>.k-link,
.k-panelbar .k-panel,
.k-panelbar .k-content,
.k-treemap-tile,
.k-calendar th,
.k-slider-track,
.k-splitbar,
.k-dropzone-active,
.k-tiles,
.k-toolbar,
.k-tooltip,
.k-button-group .k-tool,
.k-upload-files {
border-color: #c5c5c5;
}
.k-block,
.k-widget,
.k-popup,
.k-content,
.k-toolbar,
.k-dropdown .k-input {
color: #333333;
}
.k-button {
color: #333333;
border-color: #c5c5c5;
background-color: #ffffff;
}
.k-widget,
.k-button {
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.05);
}
.k-grid,
.k-scheduler,
.k-menu,
.k-editor {
border-radius: 2px;
}
.k-grid {
border-radius: 0;
border: none;
box-shadow: none;
}
.k-floatwrap,
.k-slider-items,
.k-grid-toolbar {
display: inline-block;
}
.k-floatwrap,
.k-slider-items,
.k-grid-toolbar {
display: block;
}
.k-grid-toolbar {
border-style: solid;
border-width: 1px 0 0;
}
.k-link:link,
.k-link:visited,
.k-state-hover.k-nav-current .k-link {
color: #428bca;
}
.k-header,
.k-treemap-title,
.k-grid-header .k-header>.k-link {
color: #333333;
}
.k-button,
.k-textbox,
.k-timepicker,
.k-datepicker,
.k-datetimepicker {
display: inline-block;
vertical-align: middle;
}
.k-grid-toolbar {
background-color: transparent;
border: none;
}
:first-child.k-grid-toolbar,
.k-grouping-header+.k-grid-toolbar {
border-width: 0 0 1px;
}
.k-grid>.k-grouping-header,
:first-child.k-grid-header,
:first-child.k-grid-toolbar,
.k-scheduler> :first-child.k-scheduler-toolbar {
border-radius: 1px 1px 0 0;
}
div.k-grid-header,
div.k-grid-footer {
padding-right: 17px;
border-bottom-style: solid;
border-bottom-width: 1px;
zoom: 1;
}
.k-grid-content {
position: relative;
width: 100%;
overflow: auto;
overflow-x: auto;
overflow-y: scroll;
zoom: 1;
min-height: 0px;
}
.k-grid-content-locked,
.k-grid-content,
.k-pager-wrap {
white-space: normal;
}
.k-grid table {
width: 100%;
margin: 0;
max-width: none;
border-collapse: separate;
border-spacing: 0;
empty-cells: show;
border-width: 0;
outline: 0;
}
.k-grid-header-wrap>table,
.k-grid-header-locked>table {
margin-bottom: -1px;
}
.k-grid-header table,
.k-grid-content table,
.k-grid-footer table,
.k-grid-content-locked>table {
table-layout: fixed;
}
.k-grid-header th.k-header,
.k-filter-row th {
overflow: hidden;
border-style: solid;
border-width: 0 0 1px 1px;
padding: .5em .6em .4em .6em;
font-weight: normal;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
}
.k-grid-header th.k-header {
vertical-align: bottom;
}
.k-grid-header .k-header,
.k-grid-header th.k-header {
border: 1px solid #e4e4e4;
color: #333333;
background-color: #e4e4e4;
}
.k-grid .k-grid-header .k-header {
white-space: normal;
}
.k-grid-header th:first-child.k-header,
.k-grid tbody td:first-child,
.k-grid tfoot td:first-child,
.k-filter-row>th:first-child {
border-left-width: 0px;
}
.k-block,
.k-slider,
.k-splitbar,
.k-calendar,
.k-treeview,
.k-pager-wrap,
.k-grid-header .k-link,
.k-header-column-menu {
-webkit-touch-callout: none;
}
.k-grid-header .k-link:link,
.k-grid-header .k-link:visited,
.k-grid-header .k-state-hover.k-nav-current .k-link,
.k-grouping-header .k-link {
color: #333333;
}
.k-grid-header th.k-header>.k-link {
display: block;
min-height: 18px;
line-height: 18px;
margin: -0.5em -0.6em -0.4em -0.6em;
padding: .5em .6em .4em .6em;
overflow: hidden;
text-overflow: ellipsis;
}
.k-grid .k-grid-header .k-header .k-link {
height: auto;
}
.k-textbox>input,
[type='text'].k-input,
[type='number'].k-input,
.k-textbox,
.k-picker-wrap .k-input,
.k-button {
font-size: 100%;
font-family: inherit;
border-style: solid;
border-width: 1px;
-webkit-appearance: none;
}
.k-button {
display: inline-block;
margin: 0;
padding: 2px 7px 2px;
font-family: inherit;
line-height: 1.72em;
text-align: center;
cursor: pointer;
text-decoration: none;
}
.k-block,
.k-button,
.k-textbox,
.k-drag-clue,
.k-touch-scrollbar,
.k-window,
.k-window-titleless .k-window-content,
.k-window-action,
.k-inline-block,
.k-grid .k-filter-options,
.k-grouping-header .k-group-indicator,
.k-autocomplete,
.k-multiselect,
.k-combobox,
.k-dropdown,
.k-dropdown-wrap,
.k-datepicker,
.k-timepicker,
.k-colorpicker,
.k-datetimepicker,
.k-notification,
.k-numerictextbox,
.k-picker-wrap,
.k-numeric-wrap,
.k-colorpicker,
.k-list-container,
.k-calendar-container,
.k-calendar td,
.k-calendar .k-link,
.k-treeview .k-in,
.k-editor-inline,
.k-tooltip,
.k-tile,
.k-slider-track,
.k-slider-selection,
.k-upload {
border-radius: 2px;
}
.k-button {
-webkit-box-shadow: none;
box-shadow: none;
}
.k-grid-add {
color: #336699;
}
.k-grid-toolbar .k-button {
vertical-align: middle;
}
.k-grid .k-button {
margin: 0 .16em;
}
.k-grid .k-button {
border-color: transparent !important;
background-color: transparent !important;
}
.k-icon,
.k-sprite,
.k-button-group .k-tool-icon {
display: inline-block;
width: 16px;
height: 16px;
overflow: hidden;
background-repeat: no-repeat;
font-size: 0px;
line-height: 0;
text-align: center;
-ms-high-contrast-adjust: none;
}
.k-icon,
.k-sprite {
background-color: transparent;
}
.k-icon,
.k-state-disabled .k-icon,
.k-column-menu .k-sprite,
.k-pager-numbers .k-current-page .k-link::after,
.k-scheduler-toolbar>ul.k-scheduler-views>li.k-current-view>.k-link::after {
opacity: 1;
}
.k-button-icontext .k-icon,
.k-button-icontext .k-image {
margin-right: 3px;
margin-right: 0.3rem;
margin-left: -3px;
margin-left: -0.3rem;
}
:root *>.k-icon,
:root *>.k-sprite,
:root *>.k-button-group .k-tool-icon {
vertical-align: middle;
}
.k-button-icontext.k-button .k-icon,
.k-button-icontext.k-button .k-image {
vertical-align: text-top;
}
</
style
>
<
html
>
<
div
class
=
"row question form-group"
>
<
label
class
=
"col-sm-4 control-label required"
for
=
"ans"
>
TEST LABEL
</
label
>
<
div
class
=
"col-sm-8"
>
<
div
class
=
"k-grid k-widget k-valid"
data-role
=
"grid"
data-grid-source
=
"CertificationDetails"
data-grid-id
=
"ace1fa8c-d7ee-446a-96b0-d120a3a6415c"
data-validate
=
"true"
required
=
"required"
>
<
div
class
=
"k-header k-grid-toolbar"
>
<
a
class
=
"k-button k-button-icontext k-grid-add"
href
=
"#"
>
<
span
class
=
"k-icon k-add"
>
</
span
>Add
</
a
>
</
div
>
<
div
class
=
"k-grid-header"
style
=
"padding-right: 17px;"
>
<
div
class
=
"k-grid-header-wrap"
>
<
table
role
=
"grid"
>
<
colgroup
>
<
col
>
<
col
>
</
colgroup
>
<
thead
role
=
"rowgroup"
>
<
tr
role
=
"row"
>
<
th
class
=
"k-header"
id
=
"e2bf1a9c-a57b-4362-970b-9128426f5c37"
role
=
"columnheader"
rowspan
=
"1"
data-role
=
"columnsorter"
data-index
=
"0"
data-title
=
"Certification Details"
data-field
=
"CertificationDetails"
>
<
a
class
=
"k-link"
href
=
"#"
>Educational institution</
a
>
</
th
>
<
th
class
=
"k-header"
id
=
"e6b0db25-287c-4e7e-b7d7-bc024674465b"
rowspan
=
"1"
data-index
=
"1"
>
</
th
>
</
tr
>
</
thead
>
</
table
>
</
div
>
</
div
>
<
div
class
=
"k-grid-content"
>
<
table
class
=
"k-selectable"
role
=
"grid"
style
=
"-ms-touch-action: double-tap-zoom pinch-zoom;"
data-role
=
"selectable"
>
<
colgroup
>
<
col
>
<
col
>
</
colgroup
>
<
tbody
role
=
"rowgroup"
></
tbody
>
</
table
>
</
div
>
</
div
>
</
div
>
</
div
>
</
html
>
I want to force user to add data to grid before submit. Please help.
I've tried adding the dataBound event to a kendo diagram using k-options and also tried adding the event via the k-on-data-bound attribute but neither of these seem to work. Here is an example of where I would expect the dataBound event to fire but the console message is never printed.
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?