Validations are not firing if first column in the grid is readonly field for the newly added row.
My code will look like below.
var testModel = { id: "Id",
fields:{
Id: {editable: false, type: "number", defaultValue: -1, validation: { required: true} },
FirstName: {editable: true, defaultValue: "", validation: { required: true} }
}
Case 1:
Grid Columns: First column(FirstName) is editable
$("#grd").kendoGrid({ editable: true, toolbar: [
{ name: "create", text: "Add New Record" }, { name: "save", text: "Save Changes" }, { name: "cancel", text: "Cancel Changes" }
],
columns:[{field: "FirstName",width: 300,title: "First Name"} ]);
Step 1: Click on the "Add New Record" button.
Step2: Click on the "Save Changes" button with out entering required fields.
Validations are firing for First Name which is working fine in this case.
Case 2:
Grid Columns: First column(Id) is non editable
$("#grd").kendoGrid({editable:true, toolbar: [
{ name: "create", text: "Add New Record" }, { name: "save", text: "Save Changes" }, { name: "cancel", text: "Cancel Changes" }
],
columns:[{field: "Id",width: 50,title: "Id"}, {field: "FirstName",width: 300,title: "First Name"} ]);
Step 1: Click on the "Add New Record" button.
Step2: Click on the "Save Changes" button with out entering required fields.
Validations are not firing for First Name.
If first column is editable and user clicks on 'Add New Record' focus is going is editable column and validations are firing if try to save.
If first column is non editable and user clicks on 'Add New Record' then focus is going on readonly column and validations are not firing if try to save. Here grid is saving the data even validations are failed.
Please suggest me how to handle the above scenario.
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
title
>Viewer</
title
>
<
script
src
=
"../../Scripts/kendoUI/jquery.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"/Scripts/kendoUI/kendo.all.min.js"
type
=
"text/javascript"
></
script
>
<
link
href
=
"../../Content/styles/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"../../Content/styles/kendo.default.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"../../Scripts/kendoUI/people.js"
type
=
"text/javascript"
></
script
>
</
head
>
<
body
>
<
div
class
=
"page"
>
<
section
id
=
"main"
>
<
div
id
=
"example"
class
=
"k-content"
style
=
"height: 650px;"
>
<
div
id
=
"horizontal"
style
=
"height: 100%; width: 100%;"
>
<
div
id
=
"vertical"
>
<
div
>
<
p
>
Inner splitter :: Top
</
p
>
</
div
>
<
div
>
<
ul
id
=
"treeview"
>
<
li
id
=
"3.6"
data-expanded
=
"true"
>Item 1
<
ul
>
<
li
id
=
"1.6"
>Item 1.1</
li
>
<
li
id
=
"2.6"
>Item 1.2</
li
>
<
li
id
=
"9.6"
>Item 1.3</
li
>
</
ul
>
</
li
>
<
li
id
=
"4.6"
>Item 2
<
ul
>
<
li
id
=
"7.6"
>Item 2.1</
li
>
<
li
id
=
"5.6"
>Item 2.2</
li
>
<
li
id
=
"6.6"
>Item 2.3</
li
>
</
ul
>
</
li
>
<
li
id
=
"8.6"
>Item 3</
li
>
</
ul
>
</
div
>
</
div
>
<
div
>
<
div
id
=
"grid"
style
=
"height: 100%; width: 100%;"
></
div
>
</
div
>
</
div
>
</
div
>
<
script
>
function droptargetOnDrop(e) {
var treeView = $("#treeview").data("kendoTreeView");
var selectedNode = treeView.select();
treeView.append({ text: "Add test node..." }, selectedNode);
}
$(document).ready(function () {
$("#vertical").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: true, size: "50%" },
{ collapsible: true, size: "50%" }
]
});
$("#horizontal").kendoSplitter({
panes: [
{ collapsible: true, size: "20%" },
{ collapsible: true, size: "80%" }
]
});
$("#treeview").kendoTreeView({
dragAndDrop: true
});
$("#grid").kendoGrid({
dataSource: {
data: createRandomData(50),
pageSize: 10
},
selectable: true,
groupable: true,
scrollable: true,
sortable: true,
pageable: true,
columns: [{
field: "FirstName",
width: 90,
title: "First Name"
}, {
field: "LastName",
width: 90,
title: "Last Name"
}, {
width: 100,
field: "City"
}, {
field: "Title"
}, {
field: "BirthDate",
title: "Birth Date",
template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
}, {
width: 50,
field: "Age"
}
]
});
});
$("#grid").kendoDraggable({
filter: "tr",
hint: function () {
var g = $("#grid").data("kendoGrid")
return g.select().clone()
}
});
$("#treeview").kendoDropTarget({
drop: droptargetOnDrop
});
</
script
>
</
section
>
<
footer
>
</
footer
>
</
div
>
</
body
>
</
html
>
<
div
class
=
"k-toolbar"
>
<
input
type
=
"text"
id
=
"inputColor"
></
input
>
<
button
id
=
"addColorButton"
>Add Color</
button
>
</
div
>
<
div
id
=
"grid"
></
div
>
var
colors = [{
"ID"
: 1,
"Name"
:
"Blue"
},
{
"ID"
: 2,
"Name"
:
"Red"
}];
var
dataModel =
new
kendo.data.Model.define({id:
"ID"
});
var
localDataSource =
new
kendo.data.DataSource({
transport:{
read:
function
(options){
options.success(colors);
},
create:
function
(){
alert(
'Creating...'
);
}
},
schema: {
model: dataModel
}
});
$(
'#grid'
).kendoGrid({
dataSource: localDataSource,
columns: [{title:
"Color"
, field:
"Name"
}]
});
$(
'#addColorButton'
).bind(
"click"
,
function
(){
localDataSource.add({
Name: $(
'#inputColor'
).val()
});
localDataSource.sync();
});
{ title:
"Job Location Notes"
, template:
"${ showLogLink(JobLocationNotes,JobID) }"
},
function
showLogLink(JobLocationNotes, JobID) {
if
(JobLocationNotes !=
null
&& JobLocationNotes !=
""
) {
return
JobLocationNotes +
" <a href='javaScript:;' data-url='../ModalWindows/JobLocationNotes.aspx' title='Location Notes' class='jobLocationLink' data-id='"
+ JobID +
"'>Log</a>"
;
}
else
{
return
""
;
}
}
<a href='javaScript:;' data-url='../ModalWindows/JobLocationNotes.aspx' title='Location Notes' class='jobLocationLink' data-id='7
'>Log</a>
"