I have a grid with Angular and remote data binding. Its configuration is like this:
$scope.myGridOptions = {
dataSource: new kendo.data.DataSource({
type: "json",
transport: {
create: function(operation) {
//calls an Angular service to add
DataService.add(operation).success(function(data) {
operation.success(data);
});
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
pageSize: 10,
schema: {
model: {
id: "Id",
fields: {
...
}
}),
toolbar: [ { name: "create", text: "Add New Book" } ],
autobind: false,
groupable: false,
editable: {
mode: "inline"
},
columns: [
{
field: "Name",
title: "Name"
},
{
field: "Description",
title: "Description"
},
{
command: [
{ name: "edit", title: "Action" }
]
}
]
};
When I click on the "Add New Book" button, the first row in the grid turns into a blank row and allows me to enter data. When finish entering, I click on "Update" to save the data and the first row turns into a regular, read-only row and I verify the new row has been added to the remote database. So far so good. However, when I click on the "Edit" button on the new row followed by clicking on the "Cancel" button my new row disappears until I refresh the page.
What am I missing?
In order for kendo dataSource to sync data after save, you need to return the newly created row back to the dataSource from the server. This is valid for update also.
Related
I want to use 2 or more buttons in one field like Kendo Grid by using custom command in TreeList but I could not do that. Does anyone have a solution?
You just add an array of buttons to the column command property:
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{
command: [
{
name: "Cust1",
text: "Custom1",
click: function(e) {
alert("Custom1");
}
},
{
name: "Cust2",
text: "Custom2",
click: function(e) {
alert("Custom2");
}
},
]
}
],
editable: true,
dataSource: dataSource
});
DEMO
I'm quite new using kendo grids.
So far I've managed to do a few stuff and got a workaround for all my problems.
I have a grid with 2 columns.
One column is a product code that the user should enter, and the other is product quantity that should be filled automatically after the user enter the product code. This should be done on change event.
The product quantity is obtained by a service.
So far I have the following code:
var dataSource = new kendo.data.DataSource({
batch: false,
autoSync: false,
data: [],
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductCode: { type: "string", validation: { required: true } },
ProductQuantity: { type: "number", validation: { required: false, editable: false } }
}
}
},
edit: function (e) {
if (e.model.isNew() == false) {
$('[name="ProductQuantity"]').attr("readonly", true);
}
},
change: function (e) {
if (e.action == "itemchange") {
debugger;
apModel.getProductQuantities(e.items[0].ProductCode).ifFetched().then(function (data) {
var data = JSON.parse(data.Response);
})
//how to access next cell???
$("#ap-grid").data("kendoGrid").saveRow();
}
}
});
$("#ap-grid").kendoGrid({
dataSource: dataSource,
pageable: false,
height: 550,
toolbar: ["create"],
columns: [
{ field: "ProductCode", title: "Product Code" },
{ field: "ProductQuantity", title: "Quantity" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline",
});
I can't find a way how to access the next cell to add the data to it.
Can you give me a hint?
thanks in advance,
André
When you set e.items[0].ProductQuantity in OnChange event handler grid cell should automatically update value if datasource bind correctly.
According to kendo docs:
e.items - The array of data items that were affected (or read).
That means it reference at original row of datasource.
I have this grid
$("#LocationGrid").kendoGrid({
dataSource: locationDataSource,
editable: "inline",
columns: [ { field: "LocationID", hidden: "hidden" },
{ field: "LocationName", title: "Location Name" },
{ command: [{ name: "edit" }] }]
});
i want to add toolbar with create button to this grid if the user has permission
if(condition) //user has permission
{
//add toolbar to grid
toolbar: [{ name: "create", text: "Add New Location}],
}
and also add "Delete" button to command column if the user has permission
if(condition) //user has permission
{
//add delete button to grid
command: [{ name: "delete"}]
}
how i can perform this, please?
We can use the setOptions() method of grid like below,
if(condition)
{
var grid = $("#grid").data("kendoGrid");
grid.setOptions({
toolbar: [{name: "create", text: "Add New Location"}]
});
}
Refer http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions
I have a simple Kendo UI Grid. The gird is in batch mode and works fine. I am using Web API to bind the actual CRUD methods.
I have to show hide the Toolbar Buttons conditionally. How and Where (which event) can I create this kind of functionality
For example:
If(user.Role.Permission == "Edit"){
//Show Edit Button else hide
}
Here is the Actual Kendo UI Grid Code
var baseUrl = "/api/TicketType";
var datatype = "json";
var contentType = "application/json";
var datasource = new kendo.data.DataSource({
serverPaging: true,
pageSize: 10,
autoSync: false,
batch: true,
transport: {
read: {
url: baseUrl,
dataType: datatype,
contentType: contentType
},
create: {
url: baseUrl,
dataType: datatype,
contentType: contentType,
type: "POST"
},
update: {
url: baseUrl,
dataType: datatype,
contentType: contentType,
type: "PUT"
},
parameterMap: function (data, operation) {
if (operation !== "read" && data.models) {
return kendo.stringify(data.models);
}
else {
return {
take: data.take,
skip: data.skip,
pageSize: data.pageSize,
page: data.page
}
}
}
},
schema: {
data: "data.$values",
total: "recordCount",
model: {
id: "TypeID",
fields: {
TypeID: { editable: false, type: "number" },
TypeCode: { editable: true, nullable: false, validation: { required: true } },
Description: { editable: true, nullable: false, validation: { required: true } }
}
}
}
});
$("#Grid").kendoGrid({
dataSource: datasource,
toolbar: [
{name: "create", text: "Add New Record"},
{ name: "save", text: "Save Changes" },
{ name: "cancel", text: "Cancel Changes" },
],
columns:
[
{ field: "TypeID", width: 50, title: "ID"},
{ field: "TypeCode", width: 150, title: "Code"},
{ field: "TypeDescription", width: 200, title: "Description"}
]
})
datasource.read(); // This will bind to the grid.
});
Please try with the below code snippet.
$(document).ready(function () {
hidetoolbar();
});
function onDataBound(arg) {
hidetoolbar();
}
function onDataBinding(arg) {
hidetoolbar();
}
function hidetoolbar(){
If(user.Role.Permission != "Edit"){
$("#Grid .k-add").parent().hide();
$("#Grid .k-update").parent().hide();
$("#Grid .k-cancel").parent().hide();
//OR
$("#Grid .k-add").parent().remove();
$("#Grid .k-update").parent().remove();
$("#Grid .k-cancel").parent().remove();
}
}
$("#Grid").kendoGrid({
dataSource: datasource,
dataBound: onDataBound, // Added
dataBinding: onDataBinding, //Added
toolbar: [
{name: "create", text: "Add New Record"},
{ name: "save", text: "Save Changes" },
{ name: "cancel", text: "Cancel Changes" },
],
columns:
[
{ field: "TypeID", width: 50, title: "ID"},
{ field: "TypeCode", width: 150, title: "Code"},
{ field: "TypeDescription", width: 200, title: "Description"}
]
});
If you want to show or hide the toolbar button, you will need to implement the logic in the Databound event of the Grid.
Please see the below example:
JSBin Databound example
Note: Your question is a duplicate of Make Command Button invisible in Kendo Grid.
I have a kendo grid that does a create/delete, both of them ending with errors.
I would like to:.
When having an error on delete to prevent the row deleting from the grid (that is the default behavior when having errors)
When having a create error to prevent the popup editor to close
Please see this fiddle:
http://jsfiddle.net/andreigavrila/p49eV/2/
var data = [
{ Id: 1, Name: "Decision 1", Code: 1 },
{ Id: 2, Name: "Decision 2", Code: 2 },
{ Id: 3, Name: "Decision 3", Code: 3 }
];
$("#grid").kendoGrid({
dataSource: {
error: function (a) {
console.log('error');
$('#grid').data("kendoGrid").cancelChanges();
//$('#grid').data("kendoGrid").one("dataBinding", function (e) {
//e.preventDefault(); // cancel grid rebind
//});
},
transport: {
read: function(e) {
e.success({data: data});
},
create: function(e) {
console.log('creating');
e.error();
},
destroy: function(e) {
console.log('deleting')
e.error();
}
},
schema: {
data: "data",
model: {
id: "Id",
fields: {
Id: { type: "number" },
Code: { type: "number" },
Name: { type: "string" }
}
}
}
},
toolbar: ["create"],
columns: [
{ field: "Code", title: "Code", },
{ field: "Name", title: "Name" },
{ command: ["destroy"], title: " " }],
editable: {
mode: "popup"
}
});
The second point works by default (so having an error on create does not close the popup)
The first point works by adding the error function, but that breaks the popup (it closes on error).
So I can have either one of my , but not both in the same time. I am kind of stuck.
I also saw this 2 questions on kendo forums:
delete error
server validation
The second link said "to prevent the Grid from closing you need to prevent the next dataBinding event." but i can't make that work.
Thank you for your help.
Andrei
I finally managed to push this to Kendo forums:
Tthe official solution to that:
http://www.kendoui.com/forums/kendo-ui-web/grid/kendo-grid-handling-create-delete-errors-with-popup-editor.aspx
"I suggest you to use an if condition in the error event handler to
determine which of the two workarounds should be executed. In this
case the server should provide information about type of the error
that occurred. You can retrieve the error status from error event
arguments."