Given the grid supplied in the code below, how do I set validation on the phone and email to take advantage of the validation and masked input features kendo provides on this page (http://demos.telerik.com/kendo-ui/maskedtextbox/index)?
For example, if the user types in 5628103322, it should format it as (562)810-3322 as the demo on their page shows. Also if a number that was not entered correctly it should provide an error message.
Same for email, how do we do this?
<div id="grid"></div>
<script>
var crudServiceBaseUrl = "/api",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/companies",
dataType: "json",
type: "POST"
},
update: {
url: crudServiceBaseUrl + "/companies/update",
dataType: "json",
type: "POST"
},
destroy: {
url: crudServiceBaseUrl + "/companies/destroy",
dataType: "json",
type: "POST"
},
create: {
url: crudServiceBaseUrl + "/companies/create",
dataType: "json",
type: "POST"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
error: function (e) {
/* the e event argument will represent the following object:
{
errorThrown: "Unauthorized",
sender: {... the Kendo UI DataSource instance ...}
status: "error"
xhr: {... the Ajax request object ...}
}
*/
//alert("Status: " + e.status + "; Error message: " + e.errorThrown);
console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
},
autoSync: false,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
pageSize: 20,
selectable: "multiple cell",
allowCopy: true,
columnResizeHandleWidth: 6,
schema: {
total: "itemCount",
data: "items",
model: {
id: "id",
fields: {
id: { editable: false, nullable: true },
name: { validation: { required: true } },
phone: { type: "string" },
email: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 550,
groupable: true,
sortable: {
mode: "multiple",
allowUnsort: true
},
toolbar: ["create"],
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
reorderable: true,
resizable: true,
columnMenu: true,
filterable: true,
columns: [
{ field: "name", title: "Company Name" },
{ field: "phone", title:"Phone" },
{ field: "email", title:"Email" },
{ command: ["edit", "destroy"], title: "Operations", width: "240px" }
],
editable: "popup"
});
</script>
UPDATE::
$("#grid").kendoGrid({
dataSource: dataSource,
groupable: true,
sortable: {
mode: "multiple",
allowUnsort: true
},
toolbar: ["create"],
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
reorderable: true,
resizable: true,
columnMenu: true,
filterable: true,
columns: [
{ field: "name", title: "Company Name" },
{
field: "phone",
title: "Phone",
editor: function(container, options){
var input = $('<input type="tel" data-tel-msg="Invalid Phone Number!" class="k-textbox"/>');
input.attr("name", options.field);
input.kendoMaskedTextBox({
mask: "(999) 000-0000"
});
input.appendTo(container);
}
},
{
field: "email",
title: "Email",
editor: function(container, options){
var input = $('<input type="email" data-email-msg="Invalid email!" class="k-textbox"/>');
input.attr("name", options.field);
input.appendTo(container);
}
},
{ command: ["edit", "destroy"], title: "Operations", width: "240px" }
],
editable: "popup"
});
the grid code above has changed, it almost works perfectly now thanks to the answer below, now I just need to figure out how to add validation to the phone number and email fields so input is required, and correct input.
UPDATE #2
The code below now works perfectly thanks to the answer, just wanted to share it to others that might need help. Something interesting to note is the model rule phonerule has to be named whatever the text in the middle between the dashes of this is data-phonerule-msg. I'm guessing Kendo-UI must look for that when looking for custom rules.
<div id="grid" style="height:100%;"></div>
<script>
$(window).on("resize", function() {
kendo.resize($("#grid"));
});
var crudServiceBaseUrl = "/api",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/companies",
dataType: "json",
type: "POST"
},
update: {
url: crudServiceBaseUrl + "/companies/update",
dataType: "json",
type: "POST"
},
destroy: {
url: crudServiceBaseUrl + "/companies/destroy",
dataType: "json",
type: "POST"
},
create: {
url: crudServiceBaseUrl + "/companies/create",
dataType: "json",
type: "POST"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
error: function (e) {
/* the e event argument will represent the following object:
{
errorThrown: "Unauthorized",
sender: {... the Kendo UI DataSource instance ...}
status: "error"
xhr: {... the Ajax request object ...}
}
*/
//alert("Status: " + e.status + "; Error message: " + e.errorThrown);
console.log("Status: " + e.status + "; Error message: " + e.errorThrown);
},
autoSync: false,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
pageSize: 20,
selectable: "multiple cell",
allowCopy: true,
columnResizeHandleWidth: 6,
schema: {
total: "itemCount",
data: "items",
model: {
id: "id",
fields: {
id: { editable: false, nullable: true },
name: { validation: { required: true } },
phone: {
type: "string",
validation: {
required: true,
phonerule: function(e){
if (e.is("[data-phonerule-msg]"))
{
var input = e.data('kendoMaskedTextBox');
//If we reached the end of input then it will return -1 which means true, validation passed
//Otherwise it won't === -1 and return false meaning all the characters were not entered.
return input.value().indexOf(input.options.promptChar) === -1;
}
return true; //return true for anything else that is not data-phonerule-msg
}
}
},
email: { type: "string", validation: { required: true, email:true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
groupable: true,
sortable: {
mode: "multiple",
allowUnsort: true
},
toolbar: ["create"],
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
reorderable: true,
resizable: true,
columnMenu: true,
filterable: true,
columns: [
{ field: "name", title: "Company Name" },
{
field: "phone",
title: "Phone",
editor: function(container, options){
//pattern="[(][0-9]{3}[)] [0-9]{3}-[0-9]{4}"
var input = $('<input type="tel" data-phonerule-msg="Invalid Phone Number!" class="k-textbox" required />');
input.attr("name", options.field);
input.kendoMaskedTextBox({
mask: "(999) 000-0000"
});
input.appendTo(container);
}
},
{
field: "email",
title: "Email",
editor: function(container, options){
var input = $('<input type="email" data-email-msg="Invalid email!" class="k-textbox" required/>');
input.attr("name", options.field);
input.appendTo(container);
}
},
{ command: ["edit", "destroy"], title: "Operations", width: "240px" }
],
editable: "popup"
});
</script>
You should add to column definition custom editor with validation attributes:
{
field: "email",
title:"Email",
editor: function(container, options) {
var input = $('<input type="email" data-email-msg="Invalid email!" class="k-textbox"/>');
input.attr("name", options.field);
input.appendTo(container);
}
}
Update: phone validation:
add this attribute to phone input ("phonerule" - is the name of custom validation rule):
data-phonerule-msg="Invalid phone!"
add custom validation rule to schema.model.fields.phone:
phone: {
type: "string",
validation: {
phonerule: function(e) {
if (e.is("[data-phonerule-msg]"))
{
var input = e.data('kendoMaskedTextBox');
return input.value().indexOf(input.options.promptChar) === -1;
}
return true;
}
}
}
You can use this code to add mobile and email validation -
schema: {
model: {
id: "id",
fields: {
mobile: {
editable: true, validation: {
required: true,
Mobilevalidation: function (input) {
if (input.is("[name='mobile']")) {
if ((input.val()) == "") {
input.attr("data-Mobilevalidation-msg", "Mobile number required");
return /^[A-Z]/.test(input.val());
}
else {
if (/^\d+$/.test(input.val())) {
if (input.val().length == 10) {
return true;
} else {
input.attr("data-Mobilevalidation-msg", "Mobile number is invalid");
return /^[A-Z]/.test(input.val());
}
}
else {
input.attr("data-Mobilevalidation-msg", "Mobile number is invalid");
//alert(/^[A-Z]/.test(input.val()));
return /^[A-Z]/.test(input.val());
}
return true;
}
}
return true;
}
}
},
email: { editable: true, type: "email", validation: { required: true } },
}
}
}
Related
When doing a create, update or delete, I need to save other form and get a id of that save function and pass that id as a additional parameter with these events create, update, delete
How can
I have my grid script as below
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field:"ProductName", title: "Product Name" },
{ field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "popup"
});
});
I found something here but this doesn't look right
I need to post it to
[HttpPost]
public JsonResult Add(Product product, int categoryId)
{
}
Just simply inside parameterMap change return statement to this so that it would return categoryId
return kendo.stringify({
models: options.models,
categoryId: categoryIdFromSomewhere
)};
Small note, I use JSON.stringify, but quite surte if that will make any difference.
I need help here.I have kendogrid, which need to have a popup.Popup is loading from template(view1.cshtml) and everything is working perfectly.But when i add search in my page, and than add following code
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ListFinances", "Jobs"))",
type: "POST",
dataType: "json",
data: additionalData
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},
in rest of the code in grid(search results are bind here to grid),search is working, popup is not working nothing and is showing when i click on the button to show up popup.What is here wrong?Thanks
<script>
$(function() {
$("#jobs-grid").kendoGrid({
dataSource: {
data: #Html.Raw(JsonConvert.SerializeObject(Model.FinishedJobs)),
schema: {
model: {
fields: {
JobNumber: { type: "string" },
CustomerId: { type: "number" },
JobCount: { type: "number" },
JobYear: { type: "number" },
Status: { type: "number" },
Position: { type: "number" },
Finished: { type: "boolean" },
HasInvoice: { type: "boolean" },
}
}
},
#*type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ListFinances", "Jobs"))",
type: "POST",
dataType: "json",
data: additionalData
},
},
schema: {
data: "Data",
total: "Total",
errors: "Errors"
},*#
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
},
//dataBound: onDataBound,
columns: [
#*{
field: "Status",
title: "#T("gp.Jobs.Fields.Status")",
template: '#= Status #'
},*#
{
field: "JobNumber",
title: "#T("gp.Job.Fields.JobNumber")",
template: '#= JobNumber #'
},
{
field: "CustomerId",
title: "#T("gp.Job.Fields.Customer")",
template: '#= Customer.Name #'
},
{
field: "Id",
title: "#T("gp.Job.Fields.Name")"
},
#*{
field: "ShortDesc",
title: "#T("gp.Jobs.Fields.ShortDesc")"
},*#
{
field: "DateCompletition",
title: "#T("gp.Job.Fields.DateCompletition")"
},
{
field: "Id",
title: "#T("Common.Edit")",
width: 130,
template: '#T("Common.Edit")'
}
],
pageable: {
refresh: true,
pageSizes: [5, 10, 20, 50]
},
editable: {
confirmation: false,
mode: "inline"
},
scrollable: false,
// sortable: true,
// navigatable: true,
// filterable: true,
// scrollable: true,
selectable: true,
rowTemplate: kendo.template($("#jobRowTemplate").html()),
});
</script>
I have an issue displaying combobox data on the dropdown when I am in popup
edit mode in my kendo grid. When the editable parameter in the grid is changed to 'inline', the combobox behaves like it should. I think that the problem is in the custom popup template, but many changes have still produced no result.
Here's the script in the .cshtml file:
<script id="popup_editor" type="text/x-kendo-template">
<label for="name">Page Name</label>
<input name="name"
data-bind="name"
data-value-field="id"
data-text-field="name"
data-role="combobox" />
</script>
Here's the javascript:
var griddata = new kendo.data.DataSource({
transport: {
read: {
url: serviceRoot + "Approval/Get",
type: "POST",
contentType: jsonType,
cache: false
},
destroy: {
url: serviceRoot + "Approval/Delete",
type: "PUT",
complete: function(e) {
refreshData();
}
},
create: {
url: serviceRoot + "Approval/Create",
type: "PUT",
complete: function(e) {
refreshData();
}
},
update: {
url: serviceRoot + "Approval/Inline",
type: "PUT",
complete: function(e) {
refreshData();
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
scrollable: true,
height: 700,
schema: {
data: "list",
total: "total",
model: {
id: "id",
fields: {
id: { editable: false, nullable: false },
name: { editable: true, nullable: false, validation: { required: true }, type: "string" },
keyName: { editable: true, nullable: false, validation: { required: true }, type: "string" },
countryName: { editable: true, nullable: false, validation: { required: true }, type: "string" },
}
}
}
});
$("#grid").kendoGrid({
dataSource: griddata,
selectable: "row",
allowCopy: true,
scrollable: true,
resizable: true,
reorderable: true,
sortable: {
mode: "single",
allowUnsort: true
},
toolbar: [{ name: "create", text: "Create New Content" }}],
edit: function(e) {
if (e.model.isNew() === false) {
$('[name="PageName"]').attr("readonly", true);
}
},
columns: [
{ field: "id", hidden: true },
{ field: "name", title: "Page Name", editor: PageNameComboBoxEditor, width: "200px" },
{
command: [
{ name: "edit" },
{ name: "destroy" }
],
title: " ",
width: "250px"
}
],
editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
},
pageable: {
refresh: true,
pageSizes: [5, 10, 15, 20, 25, 1000],
buttonCount: 5
},
cancel: function(e) {
$("#grid").data("kendoGrid").dataSource.read();
}
});
function PageNameComboBoxEditor(container, options) {
ComboBoxEditor(container, options, "name", "id", "ApprovalPage/Get", options.model.id, options.model.name);
}
function ComboBoxEditor(container, options, textfield, valuefield, url, defaultid, defaultname) {
$("<input required data-text-field=\"" + textfield + "\" data-value-field=\"" + valuefield + "\" data-bind=\"value:" + options.field + "\"/>")
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataTextField: textfield,
dataValueField: valuefield,
text: defaultname,
value: defaultid,
select: function(e) {
var dataItem = this.dataItem(e.item);
var test = dataItem;
},
dataSource: {
transport: {
read: {
url: serviceRoot + url,
type: "GET"
}
}
}
});
}
Any direction would be appreciated!
First i noticed that you have typo and some double initialization and it's value specified different which cause problem (not sure if this is your problem so please try remove it),
<input name="name"
data-bind="name" -> typo maybe? no data-binding declaration like these
data-value-field="id" -> double init, you have it on your ComboBoxEditor function dataValueField: valuefield,
data-text-field="name" -> double init, you have it on your ComboBoxEditor function dataTextField: textfield,
data-role="combobox" />
But sure way to make it works i'm usually customize the edit function to declare the kendo widget for mode: popup like this :
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/editing-popup">
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script id="popup_editor" type="text/x-kendo-template">
<div>
<label for="name">Page Name</label>
<input id="combo_box" name="name" data-role="combobox" />
</div>
</script>
<script>
$(document).ready(function() {
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: {
editable: false,
nullable: true
},
ProductName: {
validation: {
required: true
}
},
UnitPrice: {
type: "number",
validation: {
required: true,
min: 1
}
},
Discontinued: {
type: "boolean"
},
UnitsInStock: {
type: "number",
validation: {
min: 0,
required: true
}
}
}
}
}
});
dataSource.fetch();
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
},
edit: function(e) {
$("#combo_box").kendoComboBox({
autoBind: false,
dataTextField: 'ProductName',
dataValueField: 'ProductID',
filter: "contains",
text: e.model.ProductName,
value: e.model.ProductID,
dataSource: ({
type: "jsonp",
serverFiltering: true,
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
}
})
});
},
columns: [{
field: "ProductName",
title: "Product Name"
}, {
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: "120px"
}, {
field: "UnitsInStock",
title: "Units In Stock",
width: "120px"
}, {
field: "Discontinued",
width: "120px"
}, {
command: ["edit", "destroy"],
title: " ",
width: "250px"
}],
});
});
</script>
</div>
</body>
</html>
I have a kendo grid with dynamic buttons, so after update I need to reload the grid to show/hide buttons, but it's not working :(
Here's my grid:
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "/CentroCusto/Lista",
dataType: "json",
cache: false
},
update: {
url: "/CentroCusto/Salvar",
contentType: "application/json",
dataType: "json",
cache: false,
complete: function (data) {
if (data.status == 500) {
alert('Ocorreu um erro ao salvar o registro.');
}
else {
$("#grid").data("kendoGrid").dataSource.read();
}
}
},
parameterMap: function (options, operation) {
if (operation == "update") {
return { models: kendo.stringify(options) };
}
}
},
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number" },
Codigo: { type: "string", editable: false },
Descricao: { type: "string", editable: false },
Empresa: { type: "string", editable: false },
AprovadorId: { type: "number", editable: false },
NomeAprovador01: { type: "string", editable: true, validation: { required: true } },
PercentualLimite: { type: "number", editable: true, validation: { required: true, max: 100 } },
Status: { type: "string", editable: false },
AprovadorN01: { defaultValue: 1, field: "AprovadorN01" },
AprovadorN02: { defaultValue: 1, field: "AprovadorN02" },
AprovadorN03: { defaultValue: 1, field: "AprovadorN03" },
AprovadorN04: { defaultValue: 1, field: "AprovadorN04" },
NomeAprovador02: { type: "string", editable: false },
Aprovador03: { type: "number", editable: true, validation: { required: false } },
NomeAprovador03: { type: "string", editable: true, validation: { required: true } },
Aprovador04: { type: "number", editable: true, validation: { required: false } },
NomeAprovador04: { type: "string", editable: true, validation: { required: true } }
}
}
},
pageSize: 20,
serverPaging: false,
serverFiltering: false,
serverSorting: false
},
height: 450,
selectable: true,
filterable: true,
sortable: true,
pageable: true,
dataBound: gridDataBound,
columns: [{ field: "Codigo", title: "Código" },
{ field: "Descricao", title: "Descrição" },
{ field: "Empresa", title: "Empresa" },
{ field: "AprovadorN01", title: "Aprovador N01", editor: aprovadorDropDown, template: "#=AprovadorN01.Nome#" },
{ field: "AprovadorN02", title: "Aprovador N02", editor: aprovador02DropDown, template: "#=AprovadorN02.Nome#" },
{ field: "AprovadorN03", title: "Aprovador N03", editor: aprovador03DropDown, template: "#=AprovadorN03.Nome#" },
{ field: "AprovadorN04", title: "Aprovador N04", editor: aprovador04DropDown, template: "#=AprovadorN04.Nome#" },
{ field: "PercentualLimite", title: "% Limite", width: "10%", format: "{0:n}" },
{ field: "Status", title: "Status", width: "10%" },
{
command: [
{
name: "edit",
text: { edit: "Ativar", update: "Salvar", cancel: "Cancelar" },
className: "btn-successo",
imageClass: 'glyphicon glyphicon-remove-circle'
},
{
name: "inativar",
text: "Inativar",
className: "btn-excluir",
click: Inativar,
imageClass: 'glyphicon glyphicon-remove-circle'
},
{
name: "edit",
text: { edit: "Alterar", update: "Salvar", cancel: "Cancelar" },
className: "btn-alterar"
}
]
, width: "180px"
}
],
editable: {
update: true,
mode: "popup"
},
cancel: function (e) {
$("#grid").data("kendoGrid").dataSource.read();
},
edit: function (e) {
e.container.kendoWindow("title", "Alterar Centro de Custo");
}
});
function gridDataBound() {
$("#grid tbody tr .btn-successo").each(function () {
var currentDataItem = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
//Check in the current dataItem if the row is editable
if (currentDataItem.Status == "Ativo") {
$(this).remove();
}
})
$("#grid tbody tr .btn-excluir").each(function () {
var currentDataItem = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
//Check in the current dataItem if the row is editable
if (currentDataItem.Status == "Inativo") {
$(this).remove();
}
})
$("#grid tbody tr .btn-alterar").each(function () {
var currentDataItem = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
//Check in the current dataItem if the row is editable
if (currentDataItem.Status == "Inativo") {
$(this).remove();
}
})
if ($('#canEdit').val().toUpperCase() == "FALSE") {
$('#grid').find(".btn-alterar").hide();
$('#grid').find(".btn-successo").hide();
$('#grid').find(".btn-excluir").hide();
}
}
What happens is that when I get an error, the error message inside complete on update event is shown, but when the update succeed the instruction $("#grid").data("kendoGrid").dataSource.read() is not being called.
I would like to know if there's another way to do that, like save using $.ajax or if there's another event to call after "Update Success".
-----------------------------------------------------------------
UPDATE
I changed the 'data' to 'e' in the complete method under update and it's working now.
I'm using A Kendo Grid, With Server Side Filtering and Server Side Sorting. In my Data Source Transport Read method the field is always null. Any Suggestions?
This my code for initializing the Grid:
var gridDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("Read", "GridModule")',
type: 'POST',
contentType: 'application/json'
},
parameterMap: function (options) {
options.assignmentFilters = assignmentFilters;
return JSON.stringify(options);
}
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
schema: {
model: {
fields: {
LastSurveyDate: { type: "date" },
LastNoteDate: { type: "date" }
}
},
data: "data",
total: "totalRows"
}
});
var $grid = $('#gridAssignments');
if (e.firstLoad) {
$grid.kendoGrid({
scrollable: true,
pageable: {
refresh: true,
pageSizes: [20, 50, 100, 500, 1000],
buttonCount: 12,
messages: {
display: "Showing {0}-{1} from {2} Provider Contacts",
empty: "No Contacts Match the Filter Criteria",
itemsPerPage: "Contacts per page"
}
},
reorderable: true,
navigatable: true,
change: gridOnChange,
dataBound: gridOnDataBound,
dataSource: gridDataSource,
columnReorder: gridColumnReorder,
columnHide: gridColumnHide,
columnResize: gridColumnResize,
columnShow: gridColumnShow,
columnMenu: {
sortable: false,
messages: {
columns: "Choose columns",
filter: "Filter",
}
},
resizable: true,
height: '720px',
filterable: {
extra: false,
operators: {
string: {
contains: "Contains",
},
date: {
lt: "Is before",
gt: "Is after",
equal: "On"
}
}
},
selectable: "row",
sortable: {
mode: "single",
allowUnsort: true
},
columns: [ #Html.Raw(Model.GridColumns.Columns) ]
});
} else {
$grid.data('kendoGrid').setDataSource(gridDataSource);
}
For anyone that runs into the same problem...
In my case my code worked fine until I added two fields to the Schema.Model.Fields. Then for some reason the Field in my read method of my Grid Module was NULL. By default it all fields were treated as strings but when I added the two new properties then No default was used.
I had to add all my Grid's fields
schema: {
model: {
fields: {
LastSurveyDate: { type: "date" },
LastNoteDate: { type: "date" },
FirstName: { type: "string" },
LastName: { type: "string" },
HasNewEval: { },
HasCommitmentsToGet: { },
OnPriorityList: { type: "string" },
HasProductsBelowMinimum: { type: "HasProductsBelowMinimum" },
Points: {},
Title: { type: "string" },
Provider: { type: "string" },
Phone: { type: "string" },
TimeZone: { type: "string" },
Touches: { type: "string" },
LastNoteText: { type: "string" },
VerbalAging: { type: "string" }
}
},
That worked for me.