I want to insert two buttons into the columns of the datagrid using Kendo UI.
Each element of the list contain two buttons example: EDIT and DELETE
I assume you using kendo ui and trying to have edit and delete button in each row this is how you can accomplish it by specifying a column like this .
{ command: ["edit", "destroy"], title: " ", width: "250px" }]
Please see the code snippet below taken from telerik sample . Here is the live dojo sample. The example below uses a popup editing. In case you are using inline editing look into this inline Editing Sample
output of code :
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/editing-popup">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(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"
});
});
</script>
</div>
</body>
</html>
Related
For Kendo UI, it would give a confirmation window before you delete a record.
Is there a way to add it to the update button? and the add record?
Here is an example, it seems hook all the callback already.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/editing-inline">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(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: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px", editor: customBoolEditor },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline"
});
});
function customBoolEditor(container, options) {
$('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
}
</script>
</div>
</body>
</html>
You can do that by using click event of jquery .So , whenever edit button or create new button is clicked then click handler will get called and then you can use confirm(..) box to get response from user .If user select cancel then we can use cancelChanges() to avoid any changes else do required operation.
Demo Code :
$(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: [
"ProductName",
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
width: "120px"
},
{
field: "UnitsInStock",
title: "Units In Stock",
width: "120px"
},
{
field: "Discontinued",
width: "120px",
editor: customBoolEditor
},
{
command: ["edit", "destroy"],
title: " ",
width: "250px"
}
],
editable: "inline"
});
});
function customBoolEditor(container, options) {
$('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
}
//onclick of edit and new recors
$(document).on('click', '.k-grid-edit,.k-grid-add', function() {
var r = confirm("Are you sure ?"); //show alert
//if user select cancel
if (r == false) {
//cancel changes
$('#grid').data('kendoGrid').dataSource.cancelChanges();
console.log("Cancel!");
}
})
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
<base href="https://demos.telerik.com/kendo-ui/grid/editing-inline">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
<div id="example">
<div id="grid"></div>
</div>
I am trying to bind list which i am populating after receiving response from API. I can see the objects into the list but i still didn't understand why kendo grid is not binding datasource. i have code as below.
vm.getAccounts = function () {
acctSearchService.searchAccounts(null, vm.AccountSearchModel)
.then(getAccountsSuccess, getAccountsFailure);
}
vm.accountGridData = [];
function getAccountsSuccess(response) {
vm.accountGridData.push(response.model);
return vm.accountGridData;
}
i am getting result into vm.accountGridData after receiving response from API call and i am trying to bind that to datasource of kendo grid as below.
$("#grid").kendoGrid({
dataSource: { data: vm.accountGridData },
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: vm.mainGridColumns
});
Do i need to do anything else to get the data ?
You need to create a directive like this:
app.directive('myDirective', function () {
return {
restrict: 'EA',
scope: {},
template: [].join(''),
controllerAs: 'vm',
controller: function () {
var vm = this;
vm.getAccounts = function () {
acctSearchService.searchAccounts(null, vm.AccountSearchModel).then(getAccountsSuccess, getAccountsFailure);
}
vm.accountGridData = [];
function getAccountsSuccess(response) {
vm.accountGridData.push(response.model);
return vm.accountGridData;
}
},
link: function () {
$("#grid").kendoGrid({
dataSource: { data: vm.accountGridData },
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: vm.mainGridColumns
});
}
};
});
And in your html:
<div my-directive></div>
<div id="grid"></div>
You dont need data property in your datasource if you don't implement custom read function for it.
Datasource property should be an array or kendo-datasource object.
Try this:
$("#grid").kendoGrid({
dataSource: vm.accountGridData,
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: vm.mainGridColumns
});
And checkout grid documentation: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid
Finally i found the way after fighting. it's in simple one step.
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/angular">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.bootstrap.mobile.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.1118/styles/kendo.silver.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/angular.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid k-scope-field="grid" options="mainGridOptions"></kendo-grid>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope, $http){
$scope.data = new kendo.data.ObservableArray([]);
$http({
method: 'GET',
type:"json",
url: '//jsonplaceholder.typicode.com/posts'
}).then(function successCallback(response) {
$scope.grid.dataSource.data(response.data);
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
$scope.mainGridOptions = {
dataSource: {
data: $scope.data,
pageSize: 5
},
sortable: true,
pageable: true,
filterable: {
mode: "row"
},
resizable: true,
columns: [{
field: "userId",
title: "userId",
width: "120px"
},{
field: "id",
title: "ID",
width: "120px"
},{
field: "title",
width: "120px"
},{
field: "body",
width: "120px"
}]
};
})
</script>
</body>
</html>
I am new to Kendo UI, While I am using the Kendo Grid UI which is consuming the service, the read operation is working fine and the Grid is populated with the data from services but the delete operation is not working
I have tested the delete service using the fiddler getting a perfect response,but I confused why the delete button in kendo grid is not firing the endpoint
I struggled for past one week but no improvement
This is my code,
var carsDataSource1 = new kendo.data.DataSource(
{
batch: true,
transport: {
read: {
url: "/DesktopModules/MyServicesTest/API/DropData/Drop",
dataType: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
},
destroy: {
url: function(options)
{
return 'DesktopModules/MyServicesTest/API/DeleteCategory/
Delete' + options.models[0].id;
},
dataType: "json",
type: "DELETE"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
var CategoryID = options.models[0].id;
console.log(CategoryID);
return CategoryID;
}
}
},
shema:
{
model: {
id: "CategoryID",
field: {
CategoryID:
{
editable: false,
nullable: true,
type: "number"
},
CategoryName:
{
editable: false,
nullable: false,
type: "string"
},
}
}
}
});
$("#grid1").kendoGrid({
dataSource: carsDataSource1,
height: "500px",
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "CategoryID",
title: "number "
},
{
field: "CategoryName",
title: "Name"
},
{ command:"destroy"}
],
toolbar: ["create"],
editable: "inline",
destroy:true,
});
});
I can't get my Kendo UI grid to populate with my JSON data.
I suspect that it has to do with 'the double' data part in front of my relevant json data.
I'm not sure how I can add a double data mark in my schema. Any help would be much appreciated.
JSON:
{"dsProduct":
{"ttProduct":
[{"ProductId":"Truck","ProductType":5,"Tradeable":true},{"ProductId":"Tractor","ProductType":5,"Tradeable":false}]
}
}
JavaScript/HTML code:
<!doctype html>
<html>
<head>
<title>Kendo Grid with json</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.silver.min.css" rel="stylesheet" />
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "http://localhost:8810/Kendo/rest/KendoRest",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
type: "GET",
dataType: "json",
contentType: "application/json; charset=utf-8"
},
},
batch: true,
pageSize: 20,
schema: {
data:
"dsProduct",
model: {
id: "ProductId",
fields: {
ProductId: { type: "string" },
ProductType: { type: "number" },
Tradeable: { type: "boolean" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field: "ProductId", title: "Product Name" },
{ field: "ProductType", title:"Product Type", width: "120px" },
{ field: "Tradeable", title:"Can product be traded?", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "popup"
});
});
</script>
</div>
</body>
</html>
Your definition for the shema.data isn't quite right. Looking at your json, there is a child object under the dsProduct that contains the array. Change your data to dsProduct.ttProduct and it should work.
schema: {
data:
"dsProduct.ttProduct",
model: {
See working sample http://jsbin.com/vevixa/1/edit?html,js,console,output
So I've looked at all the other questions about this sort of issue, and I can't seem to find the answer. Sorry for the long code here - but can someone tell me why the "Delete" command button would suddenly stop triggering? It worked perfectly before. And as you can see, I don't have any code attached to it - it's native. Now, it simply does nothing. I've watched in FireBug and nothing's being fired at all.
JQuery and Kendo are loaded as usual - and the button appears properly. All the other buttons work fine.
Just can't seem to see what the issue is... any suggestions? Here's the code for the grid:
function generateGrid() {
$("#teamGrid").kendoGrid({
columns: [
{ title: "First Name",
field: "users_first_name",
attributes: {
style: "text-align: center; font-size: 14px;"
},
filterable: true,
headerAttributes: {
style: "font-weight: bold; font-size: 14px; width: 100px;"
}
},
{ title: "Last Name",
field: "users_last_name",
attributes: {
style: "text-align: center; font-size: 14px;"
},
filterable: true,
headerAttributes: {
style: "font-weight: bold; font-size: 14px; width: 100px;"
}
},
{ title: "Email",
field: "users_email",
attributes: {
style: "text-align: center; font-size: 14px;"
},
filterable: { extra: false },
headerAttributes: {
style: "font-weight: bold; font-size: 14px; width: 300px;"
}
},
{ title: "User Type",
field: "admin_status",
attributes: {
style: "text-align: center; font-size: 14px;"
},
filterable: true,
headerAttributes: {
style: "font-weight: bold; font-size: 14px; width: 80px;"
},
template: function(dataItem) {
if ( dataItem.admin_status == 0 ) {
return "Team Member";
} else if ( dataItem.admin_status == 1 ) {
return "Admin";
} else if ( dataItem.admin_status == 2 ) {
return "Manager";
} else if ( dataItem.admin_status == 3 ) {
return "Acct Owner";
}
}
},
{
command: [
{
name: "custom1", text: "Edit",
click: function(e) {
$uid = this.dataItem(this.select()).users_id;
$(".title h4").filter(":first").css({
color: "blue",
"text-decoration": "underline",
cursor: "pointer"
});
var offset = $(".grid-box").offset();
var newLeft = offset.left+25;
newLeft = newLeft + "px";
var newTop = offset.top+80;
newTop = newTop + "px";
// Get Profile Info
$.getJSON(
'/data/get_profile_data.php',
{ users_id: $uid })
.done( function(data) {
$("#users_first_name").val(data[0].users_first_name);
$("#users_last_name").val(data[0].users_last_name);
$("#users_email").val(data[0].users_email);
$("#admin_status").val(data[0].admin_status);
$("#rc").val($uid);
$('#teamGrid').css("display","none");
$('.grid-box2').css({
display: "block",
position: "absolute",
top: newTop,
left: newLeft,
});
});
},
},
{
name: "destroy", text: "Delete"
}
],
headerAttributes: {
style: "width: 120px;"
},
attributes: {
style: "text-align: center;"
},
title: " "
}
],
dataSource: {
transport: {
read: {
url: "/data/get_team.php"
},
update: {
url: "/data/update_teammate.php",
type: "POST"
},
destroy: {
url: "/data/delete_teammember.php",
type: "POST"
},
create: {
url: "",
type: "POST"
}
},
schema: {
data: "data",
total: function (result) {
result = result.data || result;
return result.length;
},
model: {
id: "users_id"
}
},
type: "json"
},
pageable: {
refresh: true,
pageSize: 15,
pageSizes: [
15
]
},
sortable: true,
filterable: true,
autoSync: true,
scrollable: false,
selectable: "row",
reorderable: false,
toolbar: [
{ template: kendo.template($("#template").html()) }
]
}); // END: teamGrid
} // END: generateGrid function
Thanks in advance..
I don't understand PHP. But JS part should be similar. Kendo grid has the tendency to swallow errors which is painful for the developers to pin point the cause. However why don't you add a small error handler after the schema just to find what it is. I guess every little thing helps when you get stuck!
schema: {
model: {
id: "ID",
fields: {
ID: { editable: false },
NumberOfLoads: { editable: true, type: "number" },
Hours: { editable: true, type: "number" },
Kilometres: { editable: false },
WaterUsage: { editable: true },
Driver: { editable: true },
Hole: { editable: true }
}
},
errors: "Errors"
},
error: function (e) {
alert(e);
}