Related
I'm having a problem finding a solution related to the Kendo Grid.
I am rendering a kendo dropdown list within a cell of a Kendo Grid. It appears to look fine and all, until the user focuses off or tabs off of the dropdown within the cell. The red hash shows that a change was made, but it's showing the data-value-field of the kendo DDL and not the text. Ok, I realize I can just use the same field from the DS in the dataTextField as I'm using in the dataValueField, but that won't work for me...because when I'm calling create or update, I need to be able to pass the primary key or ID of that selected item back into my web api controller.
Here is the grids DS
function loadContactGrid(vendorID) {
var contactsReadURL = null;
contactsReadURL = "/contacts/getcontacts/" + parseInt(vendorID);
contactGridDS = new kendo.data.DataSource({
transport: {
read: {
url: contactsReadURL,
type: 'GET',
contentType: "application/json; charset=utf-8",
},
update: {
url: "/contacts/UpdateContacts/",
type: 'PUT',
contentType: "application/json; charset=utf-8",
dataType: "json",
error: function(xhRequest, ErrorText, thrownError) {
alert('ERROR!!!\n' + ' xhRequest: ' + xhRequest + '\n' + ' ErrorText: ' + ErrorText + '\n' + ' thrownError: ' + thrownError + '\n');
},
complete: function(e) {
$("#contactGrid").data("kendoGrid").dataSource.read();
}
},
destroy: {
url: "/contacts/DeleteContact/",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "DELETE"
},
create: {
url: "/contacts/InsertContact/",
contentType: "application/json; charset=utf-8",
type: 'POST',
dataType: "json",
success: function(results) {
alert('Contacts successfully saved!');
},
error: function(xhRequest, ErrorText, thrownError) {
alert('ERROR!!!\n' + ' xhRequest: ' + xhRequest + '\n' + ' ErrorText: ' + ErrorText + '\n' + ' thrownError: ' + thrownError + '\n');
},
complete: function(e) {
$("#contactGrid").data("kendoGrid").dataSource.read();
}
},
parameterMap: function(options, operation) {
if (operation !== "read" && options) {
return JSON.stringify(options.models);
}
if (operation == "create") {
// send the created data items as the "models" service parameter encoded in JSON
return { models: kendo.stringify(data.models) };
}
}
},
batch: true,
scrollable: false,
pageSize: 8,
change: function(e) {
if (e.action == "itemchange" && e.field == "email") {
var model = e.items[0];
if (isEmailValid($('input[name=email]').val()) == false) {
e.items[0].receivereport = false;
}
}
if (e.action == "itemchange" && e.field == "contacttype") {
var model = e.items[0];
//setTimeout(function () {
//$('.k-dirty-cell').focusout(function() {
//alert($(this).text(textOverrideContactType(e.items[0].contacttype)));
//});
//textOverrideContactType(e.items[0].contacttype);
//}, 1000); attempting to change text in cell here failed
}
if (e.action === "remove") {
this.sync();
}
},
schema: {
model: {
id: 'contactid',
fields: {
roletyp_seq: { editable: false, nullable: false, required: true, type: 'string' },
contacttype: { editable: true, nullable: false, required: true, type: 'number' },
roletyp_pk: { editable: false, nullable: false, required: true, type: 'number' },
contactid: { editable: false, nullable: false, required: true, type: 'number' },
vendorid: { editable: false, nullable: false, required: true, type: 'number' },
prevrole_pk: {
editable: false,
nullable: true,
required: true,
type: "number",
}
}
}
},
});
And my grid
$("#contactGrid").kendoGrid({
dataSource: contactGridDS,
navigatable: true,
dataBound: mapContactTypes,
editable: true,
//editable: "inline",
//editable: "popup",
edit: function (input) {
if ($('input[name=receivereport]').is(':focus')) {
//detect if email is valid
//get input immediately before this one
if (isEmailValid($('input[name=receivereport]').parent().prev().text()) == false) {
// disable check box
// alert("invalid");
$('input[name=receivereport]').attr('disabled', 'true');
$('input[name=receivereport]').prop('checked', false);
} else {
// enable check box
// alert("valid");
$('input[name=receivereport]').removeAttr('disabled');
$('input[name=receivereport]').prop('checked', false);
}
}
//when user clicks into or out of a field, if the name in the respective row name is blank, alert the user
var grid = this;
var fieldName = grid.columns[input.container.index()].field;
if (isNameInContactGridPopulated(fieldName) == false) {
alert("You can't leave out a contact name in the row you are editing.");
//disable save button
$('.k-grid-save-changes').addClass('k-state-disabled');
$('.k-grid-save-changes').hide();
} else {
//do nothing
$('.k-grid-save-changes').removeClass('k-state-disabled');
$('.k-grid-save-changes').show();
}
if ($('input[name=contactname]').is(":focus") == true) {
//disable save button
if ($('input[name=contactname]').val() == '') {
$('.k-grid-save-changes').addClass('k-state-disabled');
$('.k-grid-save-changes').hide();
}
}
$('input[name=contactname]').keyup(function() {
if ($(this).val() == '') {
$('.k-grid-save-changes').addClass('k-state-disabled');
$('.k-grid-save-changes').hide();
}
});
$('input[name=contactname]').focusout(function () {
if ($(this).val() != '') {
$('.k-grid-save-changes').removeClass('k-state-disabled');
$('.k-grid-save-changes').show();
}
});
},
toolbar: ["save", "cancel"],
pageable: true,
columns: [
{ field: 'roletyp_seq', title: 'RT Seq.', hidden: true, attributes: { 'class': 'contactCell_roletyp_seq' } },
{ field: 'contacttype', title: 'Contact Type', hidden: false, attributes: { 'class': 'contactCell_contacttype' }, editor: loadContactTypeEditor, width: "200px", template: "#=textOverrideContactType(1)#" },
//{ field: 'contacttype', title: 'Contact Type', hidden: false, attributes: { 'class': 'contactCell_contacttype' }, editor: loadContactTypeEditor, width: "200px", template: "#=textOverrideContactType(contacttype)#" },
//{ field: 'contacttype', title: 'Contact Type', hidden: false, attributes: { 'class': 'contactCell_contacttype' }, editor: loadContactTypeEditor, width: "200px" },
{ field: 'prevrole_pk', title: 'prev role ID', hidden: true, attributes: { 'class': 'contactCell_prevrole_pk' } },
{ field: 'roletyp_pk', title: 'Role Type ID', hidden: true, attributes: { 'class': 'contactCell_roletyp_pk' } },
{ field: 'contactid', title: 'Contact ID', hidden: true, attributes: { 'class': 'contactCell_contactid' } },
{ field: 'vendorid', title: 'Vendor ID', hidden: true, attributes: { "class": 'contactCell_vendorid' } },
{ field: 'contactname', title: 'Name', hidden: false, attributes: { "class": 'contactCell_contactname' } },
{ field: 'workphone', title: 'Phone', hidden: false, attributes: { "class": 'contactCell_phone' } },
{ field: 'mobilephone', title: 'Cell', hidden: false, attributes: { "class": 'contactCell_mobilephone' } },
{ field: 'title', title: 'Title', hidden: false, attributes: { "class": 'contactCell_title' } },
{ field: 'email', title: 'Email', hidden: false, attributes: { "class": 'contactCell_email' } },
{ field: 'receivereport', title: 'Receive Reports?', hidden: false, attributes: { "class": 'contactCell_receivereport' }, template: '<input type="checkbox" #= receivereport ? "checked=checked" : "" # value="" disabled="disabled" ></input>' },
{ command: "destroy", title: " ", width: "100px" }
],
sortable: {
mode: 'single',
allowUnsort: false
}
});
Then, I have two functions below. 1 is the custom editor and the other is an attempt I considered to override the text displayed in the kendo ddl.
function loadContactTypeEditor(container, options) {
var contactTypeDS = new kendo.data.DataSource({
dataType: "json",
type: "GET",
transport: {
read: "/contacts/GetAllContactTypes/"
}
});
contactTypeDS.read();
$('<input class="contactTypeDropDown" required data-text-field="roletyp_dsc" data-value-field="roletyp_pk" data-bind="value:' + options.field + '"/>').appendTo(container).kendoDropDownList({
dataTextField: "roletyp_dsc",
dataValueField: "roletyp_pk",
autoBind: false,
select: function (e) {
//if (e.sender.text() != '') {
// $('#contactGrid_active_cell').html(e.sender.text());
//}
//if (e.sender.text() != '') {
// setTimeout(function() {
// $('.contactCell_contacttype').text(e.sender.text());
// }, 1000);
//}
//options.model[options.field] = e.sender.text();
},
//dataBound: function(){
// options.model[options.field] = e.sender.text();
//},
dataSource: contactTypeDS
});
}
function textOverrideContactType(roleId) {
//need to find a match on the passed in role/contact type ID and return it's match to "mask/overwrite" the text that's there after a user selects an item in the dropdown
$.ajax({
dataType: 'json',
type: 'GET',
url: "/contacts/GetAllContactTypes/",
contentType: 'application/json; charset=utf-8',
success: function (data) {
$.each(data, function (key, val) {
if (roleId == key) {
return val;
}
});
},
failure: function (error) {
alert("Error loading contact types.");
}
});
}
To summarize: I tried a few things with no avail. What is happening, is, the DDL renders just fine, and even when the user doesn't move off of that DDL, the proper "label" shows, but when that control loses focus, it shows the data-value-field. I can't have that, I need to be able to show the data-text-field. That's why I wrote that textoverride method. But I'm trying to call it within the grid, fields's template: and it's not working. It says it doesn't recognize that function. I don't get it; it's clearly declared. What am I supposed to pass in as the parameter, it's not exactly like the demo here...a bit different, as I'm populating the DDL with another remote data source.
http://demos.telerik.com/kendo-ui/grid/editing-custom
Here's the other thing; I need that data-value-field, ID, to persist and be passed into my web api controller when it gets called. Right now, as it stands, I'm only able to get the "text" to show in the controller and not the "ID." That ID will not be available to me in the read method. The stored procs that the CRUD is hitting is completely different. My stored proc for insert and update needs to get that contacttype ID as the number.
Thanks in advance. I'm sure I'm close...
From the provided information it seems that you need to make the column ForegnKey by setting the "values" option of the column. Please check the example below:
[demo] Grid: ForeignKey column
[documentation] Grid API: columns.values option
I actually ended up using another means to do this. The above still seems illusive to me. I ended up changing the values of a key in another row, that was already available, to get passed back into the controller. I tried the answers provided with no avail. Sorry!
How can I call custom service for deleting a row in Kendo UI grid.This custon service should have a confirmation dialog option that can be customized.
Any thoughts on this is highly appreciative
You should customize the kendo.data.DataSource 'destroy' attribute to specify the URL and update the kendoGrid 'delete' command code for the custom confirmation.
Example code
$(document).ready(function () {
var windowTemplate = kendo.template($("#windowTemplate").html());
var crudServiceBaseUrl = "http://demos.kendoui.com/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 } }
}
}
}
});
var window = $("#window").kendoWindow({
title: "Are you sure you want to delete this record?",
visible: false, //the window will not appear before its .open method is called
width: "400px",
height: "200px",
}).data("kendoWindow");
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}"},
{ field: "UnitsInStock", title:"Units In Stock"},
{ field: "Discontinued"},
{ command: [
{name: "edit"},
{name: "Delete",
click: function(e){ //add a click event listener on the delete button
var tr = $(e.target).closest("tr"); //get the row for deletion
var data = this.dataItem(tr); //get the row data so it can be referred later
window.content(windowTemplate(data)); //send the row data object to the template and render it
window.open().center();
$("#yesButton").click(function(){
grid.dataSource.remove(data) //prepare a "destroy" request
grid.dataSource.sync() //actually send the request (might be ommited if the autoSync option is enabled in the dataSource)
window.close();
})
$("#noButton").click(function(){
window.close();
})
}
}
]}],
editable: {
mode: "inline"
}
}).data("kendoGrid");
});
Taken from:
http://docs.telerik.com/kendo-ui/web/grid/how-to/Editing/custom-delete-confirmation-dialog
You can set the delete option in your datasource to a function and do anything you want from that point. Without a sample of your service, I can't help you getting started but I can link you to the documentation.
I am getting this error every time i update any row.
The update itself is successful in the database, but when i trigger the success method for kendo it seems to be bothered, at the beginning i thought it could be that the object i return from the database is different, but its exactly the same one as the one i submit.
Thanks in advance
Uncaught SyntaxError: Unexpected identifier
yt.setter
lt.extend._set
Ut.extend.accept
lt.extend._accept
(anonymous function)
(anonymous function)
j
k.fireWith
e.(anonymous function)
o.(anonymous
function).call.X.success
$.ajax.success
j
k.fireWith
x
b
Here is the code:
dataSource = new kendo.data.DataSource({
transport: {
read: function(options) {
$.ajax( {
url: crudServiceBaseUrl + "?serviceType=students&serviceFunction=getStudentLists&type=2",
dataType: "json",
success: function(result) {
var data = _.flatten(result);
options.success(data);
}
});
},
update: function(options) {
$.ajax( {
type: 'POST',
url: "/tools.php?id=ajaxstudentlist",
dataType: "json",
data: {data:options.data.models},
success: function(result) {
var arr = [];
arr.push(result);
var data = _.flatten(arr);
options.success();
}
});
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 70,
schema: {
model: {
id: "studystatusid",
fields: {
studystatusid : { type: 'number', editable: false, nullable: true },
studentid : { type: 'string', editable: false, nullable: false},
lastname : { type: 'string', editable: false, },
firstname : { type: 'string', editable: false, },
spnumber : { type: 'string', editable: false, },
status : { type: 'string', editable: false, },
begin_date: { type: "date", validation: { required: true } },
end_date: { type: "date" }
}
},
parse : function(data) {
for (var i = data.length - 1; i >= 0; i--) {
data[i].studentid = addZeros(data[i].studentid);
if(data[i].begin_date !== '0'){
data[i].begin_date = new Date(parseInt(data[i].begin_date+ '000'));
}
if(data[i].end_date){
data[i].end_date = new Date(parseInt(data[i].end_date+ '000'));
}
}
return data;
}
}
});
Your Datasource Update
update: function(options) {
$.ajax( {
type: 'POST',
url: "/tools.php?id=ajaxstudentlist",
dataType: "json",
data: {data:options.data.models},
success: function(result) {
var arr = [];
arr.push(result);
var data = _.flatten(arr);
options.success();
}
});
},
the above ajax call is expecting a JSON result back , you should return a JSON result back as a success , Its Better to return the updated row back.
why are are you calling ajax inside Kendo?
Should be like the following code. Try this and update the status I will modify the code if it not get succeeded.
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "?serviceType=students&serviceFunction=getStudentLists&type=2",
dataType: "json",
success: function (data) {
console.log(data);
}
},
update: {
url: "/tools.php?id=ajaxstudentlist",
dataType: "json",
data:{inputParam:inputvalue},
success: function(result) {
console.log(data);
}
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "studystatusid",
fields: {
studystatusid : { type: 'number', editable: false, nullable: true },
studentid : { type: 'string', editable: false, nullable: false},
lastname : { type: 'string', editable: false, },
firstname : { type: 'string', editable: false, },
spnumber : { type: 'string', editable: false, },
status : { type: 'string', editable: false, },
begin_date: { type: "date", validation: { required: true } },
end_date: { type: "date" }
}
}
}
});
Uncaught TypeError: Cannot read property 'template' of undefined
I am using a kendo grid .
I want to Disable a Column when I edit.(Not when I add a new record).Did write code when edit
function onEdit(e) {
var indexCell = 1;
var grid = $('#consumablesGrid').data('kendoGrid');
if (e.model.id) { // when Editing the id is defined
if (indexCell != 'undefined' && grid.columns[indexCell].title == "Consumable") {
grid.closeCell();
}
}
}
But it shows "Uncaught TypeError: Cannot read property 'template' of undefined " when executing grid.closeCell() .
For better understanding I am Including My full grid Condition.
function ConsumableManager() {
$("#consumablesGrid").kendoGrid({
dataSource: {
transport: {
read: {
url: "GetConsumablesGrid",
type: "POST",
contentType: "application/json",
dataType: "json"
},
update: {
url: "UpdateConsumables",
contentType: "application/json",
type: "POST",
dataType: "json",
complete: function (data) {
var result = jQuery.parseJSON(data.responseText);
if (result.State == true) {
toastr.success(result.Description);
$("#consumablesGrid").data("kendoGrid").dataSource.read();
}
else {
toastr.error(result.Description);
$("#consumablesGrid").data("kendoGrid").dataSource.read();
}
}
},
destroy: {
url: "DestroyConsumables",
contentType: "application/json",
type: "POST",
dataType: "json",
complete: function (data) {
var result = jQuery.parseJSON(data.responseText);
if (result.State == true) {
toastr.success(result.Description);
$("#consumablesGrid").data("kendoGrid").dataSource.read();
}
else {
toastr.error(result.Description);
}
}
},
create: {
url: "CreateConsumables",
contentType: "application/json",
type: "POST",
dataType: "json",
complete: function (data) {
var result = jQuery.parseJSON(data.responseText);
if (result.State == true) {
toastr.success(result.Description);
$("#consumablesGrid").data("kendoGrid").dataSource.read();
}
else {
toastr.error(result.Description);
}
}
},
parameterMap: function (data, operation) {
if (operation != "read") {
return kendo.stringify(data.models);
}
}
},
serverPaging: false,
pageSize: 10,
batch: true,
schema: {
model: {
id: "ConsumablesID",
fields: {
ConsumablesID: { editable: false },
Consumable: { editable: true },
UnitCost: { editable: true },
Currency: { editable: true },
ContractID: { editable: false }
}
},
errors: "Errors"
},
error: function (e) {
alert(e.errors + "grid");
}
},
editable:
{
mode: "inline",
createAt: "bottom"
},
pageable: {
refresh: true,
pageSizes: true
},
toolbar: ["create"],
sortable: true,
autoBind: false,
edit: function (e) {
alert("Edit");
onEdit(e);
},
update: function (e) {
},
columns:
[
{ field: "ConsumablesID", width: 50, hidden: true, title: "ID" },
{ field: "Consumable", width: 200, title: "Consumable", editor: ConsumablesDropDownEditor },
{ field: "UnitCost", width: 100, title: "Unit Cost" },
{ field: "Currency", width: 200, title: "Currency", editor: CurrencyUnitDropDownEditor },
{ field: "ContractID", width: 85, hidden: true, title: "ContractID" },
{ command: ["edit", "destroy"], title: "Action", width: "175px" }
]
});
$("#consumablesGrid").data("kendoGrid").dataSource.read();
}
Anyone have Idea Why this happened.How can I do that Please response.
1.I've a grid
2.I want to editable (False) when edit (Not in add)
You probably have too new a jquery version: http://docs.telerik.com/kendo-ui/getting-started/javascript-dependencies#jquery-version
Current Kendo UI supports jquery 1.9.1. If you use later versions of jquery with kendo you may face issue with closeCell().
To fix(work around) this issue you can use
$('#consumablesGrid').getKendoGrid().trigger('cancel')
instead of grid.closeCell()
It's depend of jquery versions .
To avoid this problem you can use this script
function onEdit(e) {
if (!e.model.isNew() && (e.model != 'undefined') && (e.model != null)) {
e.container.find("input[name=GroupName]").hide(); // To hide only the value of the column when updating the row
// e.container.find("#GroupName").parent().hide().prev().hide(); //to hide completely the column (value + structure + title name)
}
}
I am using Kendo UI with ASP.NET Web API. There is a ProjectsController that has all the necessary methods.
My issue is that when I click on Delete button, Kendo UI grid will raise remove() event, but DataSource never invokes transport.destroy. Rather, it seems that tansport.create is being invoked. In transport.parameterMap I can see that the operation is create instead of destroy.
Here is a sample JavaScript code:
$(document).ready(function () {
var apiUrl = '/api/projects/';
var dataType = 'json';
var dataSource = new kendo.data.DataSource({
batch: true,
autoSync: false,
transport: {
read: {
url: apiUrl,
dataType: dataType,
type: "GET"
},
update: {
url: apiUrl,
dataType: dataType,
type: "PUT"
},
destroy: {
url: apiUrl,
type: "DELETE"
},
create: {
url: apiUrl,
contentType: "application/json;charset=utf-8",
dataType: dataType,
type: "POST"
},
parameterMap: function (data, operation) {
console.log("Operation: " + operation);
if (operation === "create" && data.models) {
for (var i in data.models) {
var model = data.models[i];
if (model.ProjectId === 0) {
return kendo.stringify(model);
}
}
} else if (operation === "destroy") {
console.log("Data.Models: " + data.models);
console.log("Data.id: " + data.ProjectId);
return { id: data.ProjectId };
}
return data;
}
},
schema: {
id: "ProjectId",
model: {
fields: {
ProjectId: { type: "number", editable: false, nullable: false, defaultValue: 0 },
ProjectName: { type: "string", validation: { required: true } },
Status: { type: "string", validation: { required: true } },
IsActive: { type: "boolean" }
}
}
},
pageSize: 10,
serverPaging: false,
serverFiltering: false,
serverSorting: false
});
$("#projectsGrid").kendoGrid({
dataSource: dataSource,
groupable: false,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
pageSize: 10,
toolbar: ["create"],
editable: "popup",
columns: [
{ field: "ProjectId", width: 30, title: "ID" },
{ field: "ProjectName", width: 180, title: "Project" },
{ field: "Status", width: 90, title: "Status" },
{ field: "IsActive", width: 40, title: "Is Active", type: "boolean", template: '<input type="checkbox" #if (IsActive) {# checked="checked" #}# disabled="disabled" />' },
{ command: ["edit", "destroy"], title: " ", width: "80px" }
],
remove: function (e) {
console.log("Delete button clicked.");
console.log("Project ID: " + e.model.ProjectId);
//dataSource.remove(e.model);
//dataSource.sync();
}
});
});
Web API works fine when requests are issued via Fiddler, but Kendo UI Grid shows:
POST http://localhost:port/api/Projects
when it should be DELETE.
Thanks everyone in advance!
On your datasource, you have the batch flag set to true, this means the datasource will make the call only after you tell it to, e.g calling sync().
http://docs.kendoui.com/api/framework/datasource#configuration-batch
As well as
Make sure you have defined Id in the model, as OnaBai explained here Why does the KendoUI Grid Transport Create event gets raised multiple times, and even when the action is Update? , your id is outside the model, should be in :
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
}
}
if someone has defined the id in model as answered in above ,but dataSource not triggering transport.destroy yet ,below configuration could be helpful:
editable: {
..
mode: "inline", //or "popup
...
}
//or
editable: "inline" //or "popup"
http://www.telerik.com/forums/transport-destroy-of-grid-editor-is-not-working