I'm now trying to add an additional row to the top of the table with 3 side by side buttons. Do I need to add any HTML or is it somehow dynamically added via js? Sort of like the url below but it's just a button (possibly an image) and not a dropdown (these will be controls like edit, delete and add columns buttons):
http://demos.kendoui.com/web/grid/toolbar-template.html
<!doctype html>
<head>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.blueopal.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(function(){
var people = [{patientName: "John Doe", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" },
{patientName: "John Doe", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" },
{patientName: "Jane Doe", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" },
{patientName: "Bert Jones", MRN: "464684778", account: "56765765224768", dateOfBirth: "01/06/2013", room: 403, bed: 22, admitDate: "01/15/2013" },
];
$("#grid").kendoGrid({
columns: [{field: "patientName", title: "Patient Name"},
{field: "MRN", title: "MRN"},
{field: "account", title: "Account#"},
{field: "dateOfBirth", title: "Date of Birth"},
{field: "room", title: "Room"},
{field: "bed", title: "Bed"},
{field: "admitDate", title: "Admit Date" }],
dataSource: {
data:people
},
height:300,
scrollable:true,
pageable: true,
pageSize: 2,
sortable: true
});
});
</script>
</body>
</html>
You can add a toolbar section to your kendoGrid config, and supply a list of buttons that you want to add:
$("#grid").kendoGrid({
columns: [{field: "patientName", title: "Patient Name"},
{field: "MRN", title: "MRN"},
{field: "account", title: "Account#"},
{field: "dateOfBirth", title: "Date of Birth"},
{field: "room", title: "Room"},
{field: "bed", title: "Bed"},
{field: "admitDate", title: "Admit Date" }],
toolbar: [
{"name": "create"},
{"name": "save"},
{"name": "cancel"}
],
dataSource: {
data:people
},
height:300,
scrollable:true,
pageable: true,
pageSize: 2,
sortable: true
});
If you can't get things to look the way you want with the toolbar, you can supply your own HTML to this option:
toolbar: "<div>stuff here</div>"
There's more info in the docs, here: http://docs.kendoui.com/api/web/grid#toolbar-array
Related
Hello I would like to know how I can use a for loop in a template to add on a number 1 onward
as this is what I would get in the picture below
the rest are being call by the backend but however this S/N is just a number incensement from 1 onward
enter image description here
// Call the table to the kendogrid where we use our datasource
$("#customer-list").kendoGrid({
dataSource: dataSource,
height: $(window).height()-$("#customer-list").position()["top"]-180,
selectable: "single, row",
change: function(e) {
console.log("change", this.dataItem(this.select()[0]));
},
scrollable: {
endless: true,
},
columns: [{
field: "",
title: "S/N",
headerAttributes: { "class": "k-text-center" },
width: 60,
template: `1`
}, {
field: "",
title: "Profile",
headerAttributes: { "class": "k-text-center" },
width: 150,
template:`
<img class="imageinside" src='#=data.Picture#' width="100px" height="100px" onError="this.onerror=null;this.src='../../assets/images/avatar.png';" style="border-radius:50px"/>
`
}, {
field: "",
title: "Customer Name",
template:`
<div id="customernameid">#=data.Name#</div>
`
}],
});
There's a solution for this in the knowledge base here, using the page() and pageSize() methods of the Data Source, as well as a counter variable.
See the code snippet for the proposed solution.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.412/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.412/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var record = 0;
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
sortable: true,
columns: [
{
title: "#",
template: "#= ++record #",
width: 50
}, {
field: "ContactName", title: "Contact Name"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}
],
pageable: true,
dataBinding: function() {
record = (this.dataSource.page() -1) * this.dataSource.pageSize();
}
});
</script>
</body>
</html>
Problem is that when I choose multiple checkbox and filter for something all checkbox selected returns to normal all checkbox's (un-checked)
my question is : Can I do the checked some checkbox's and filter for something without do any changes on my rows checked
please check photos in below :
1 - Checked some rows
2 - filter some rows where contains 'ss'
3 - here my problem, after press ok on filter get rows without
checked
when i'm using kendo ui v.2018 see image
please help me!!
Thanks UW.
Try setting the persistSelection property of your grid to true.
$("#grid").kendoGrid({
columns: [
{ selectable: true, width: "50px" },
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33},
{ id: 3, name: "Jim Doe", age: 30 },
{ id: 4, name: "Jack Doe", age: 33}
],
schema: {
model: { id: "id" }
}
},
filterable: true,
pageable: {
pageSize: 2
},
persistSelection: true
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<div id="grid">
Can i use if condition to display commands in the column
datasource :
[
{
"ProductID":1,
"ProductName":"Chai",
"UnitPrice":18,
"UnitsInStock":39,
"Discontinued":false
},{
"ProductID":2,
"ProductName":"Chang",
"UnitPrice":19,
"UnitsInStock":17,
"Discontinued":false
}
]
i want to add condition in the columns declaration
$("#my_workspaces_grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{
field: "ProductName",
title: "Project"
},
{
field: "UnitsInStock",
title: "WorkspacePath",
width: 400
},
{
command: ["edit", "destroy"],
title: " ", width: 180
}
});
help me out
Thanks in advance
You can use template. Check the following demo.
$("#grid").kendoGrid({
dataSource: {
data:[
{
"ProductID":1,
"ProductName":"Chai",
"UnitPrice":18,
"UnitsInStock":39,
"Discontinued":true
},{
"ProductID":2,
"ProductName":"Chang",
"UnitPrice":19,
"UnitsInStock":17,
"Discontinued":false
}
]
},
pageable: true,
height: 550,
toolbar: ["create"],
columns: [
{ field: "ProductID", title: "Id" },
{ field: "ProductName", title: "Name" },
{ field: "UnitsInStock", title: "WorkspacePath", width: 400},
{ field: "Discontinued", title:"DSP",
template: "# if (Discontinued) {# <button onClick=function1()>Edit</button> # } else { # <button onClick=function2()>Destroy</button> # } #"
}]
});
<head>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
</body>
I currently have a grid with three columns: qty, price and totalPrice. What I have done is only made the qty column editable. What I want is that when the qty cell is changed for the totalPrice column to automatically be updated (doing qty * price). I have tried adding a template to the totalPrice column as follow :
template: "#= qty * price #"
but this is not working.
Can anyone help please??
grid = $("#grid").kendoGrid({
dataSource: dsDataSource,
height: 500,
editable: "incell",
groupable: false,
sortable: false,
selectable: true,
pageable: false,
scrollable: true,
navigatable: false,
change: function(e){
},
columns:
[
{field: "qty", editable: true, title: "Qty", width: "20px", headerAttributes: {style:"text-align:center;"}, attributes: {style:"text-align:right;" } },
{field: "price", editable: false, title: "Price", width: "20px", headerAttributes: {style:"text-align:center;"}, attributes: {style:"text-align:right;" } },
{field: "totalPrice", editable: false, title: "Total", width: "20px", headerAttributes: {style:"text-align:center;"}, attributes: {style:"text-align:right;" }, template: "#= qty * price#" }
]
}).data("kendoGrid");
You can achieve the same result without template
$("#grid").kendoGrid({
columns: [
{ field: "qty",editable: true, title: "Qty",width: "20px" },
{ field: "price",editable: false, title: "Price", width: "20px" },
{ field: "totalPrice", editable: false, title: "Total", width: "20px" }
],
dataSource: {
data:[
{ id: 1, qty: 1, price: 30, totalPrice:30},
{ id: 2, qty: 2, price: 33, totalPrice:66}
],
schema: {
model: { id: "id" }
}
},
editable: "incell",
edit: function(e) {
var price =e.container.find("input[name=price]").data("kendoNumericTextBox");
var totalPrice =e.container.find("input[name=totalPrice]").data("kendoNumericTextBox");
if(price != null || totalPrice != null)
this.closeCell();
},
save: function(e) {
if (e.values.qty != null)
e.model.totalPrice = e.values.qty * e.model.price;
e.sender.refresh();
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
You can add eventhandler
save: function(e) { e.sender.refresh(); }
which refreshes the grid.
I would like to add some button-like images (which when clicked will manipulate the data below) called update, delete and add column to the top right of the top toolbar. Again these would be images that would call forth events onclick.
Is this the best way to do that?
Would this be done via templates? Not quite sure I understand those yet. Are there other dependencies with templates?
$("#grid").kendoGrid({
columns: [{field: "patientName", title: "Patient Name"},
{field: "MRN", title: "MRN"},
{field: "account", title: "Account#"},
{field: "dateOfBirth", title: "Date of Birth"},
{field: "room", title: "Room"},
{field: "bed", title: "Bed"},
{field: "admitDate", title: "Admit Date" }],
//toolbar: [
//{"name": "create"},
// {"name": "save"},
// {"name": "cancel"}
// ],
dataSource: {
data:people
},
height:300,
scrollable:true,
pageable: true,
pageSize: 2,
sortable: true
});
You might use toolbar.template and do something as:
$("#grid").kendoGrid({
columns : [
{field: "patientName", title: "Patient Name"},
{field: "MRN", title: "MRN"},
{field: "account", title: "Account#"},
{field: "dateOfBirth", title: "Date of Birth"},
{field: "room", title: "Room"},
{field: "bed", title: "Bed"},
{field: "admitDate", title: "Admit Date" }
],
toolbar : [
{"name": "create", template: "<img class='k-grid-add' src='add.png'/>"},
{"name": "save", template: "<img class='k-grid-save-changes' src='save.png'/>"},
{"name": "cancel", template: "<img class='k-grid-cancel-changes' src='cancel.png'/>"}
],
dataSource: {
data : people,
pageSize: 2
},
editable : true,
scrollable: true,
pageable : true,
sortable : true
});
The class values are important since this is what Kendo UI uses for binding the standard handlers to this image click event.
In addition pageSize needs to be define inside the dataSource.
For aligning the icons to the right you should define the following style:
#grid .k-toolbar {
text-align: right;
}
Where #grid is the id of your grid.
See a running example here: http://jsfiddle.net/OnaBai/Y9vhE/ The only question is that since the images are not loaded you will see it as missing images but they are still fully functional.