I'm using a column template to display my StatusTypes array. It works fine, but when I use the "create" toolbar to add a row, the column template isn't displayed. Once I hit "save", then it shows, but I would like it to appear right when the user clicks "create".
$("#gridEmailAddress").kendoGrid({ dataSource: mydatasource, scrollable: true, sortable: true, pageable: true, editable: true, resizeable: true, toolbar: ["create", "save", "cancel"], columns: [ { field: "Address", width: 190, title: "Email Address" }, { field: "Name", width: 190, title: "Name" }, { field: "StatusTypes", template: columnTemplate, title: "Status Types:" }, { command: "destroy", title: " ", width: 120 } ]});
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>