I am using a kendoui grid for which autoBind config is set to false. I want to bind data on click of a button. i do not want to make use of datasource.read() as it make additional server side call. I already have data available which I want to bind to the grid.
See the fiddle for more info
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/grid/local-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/products.js"></script>
<div id="example">
<div id="buttonGrid" style="height:100px;width:100px">Click me</div>
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
//data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: true,
autoBind: false,
pageable: {
input: true,
numeric: false
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" }
]
});
});
$("#buttonGrid").click(function(){
//How to bind the data available as products
});
</script>
</div>
</body>
</html>
Use data() instead:
$("#buttonGrid").click(function(){
//How to bind the data available as products
$("#grid").data("kendoGrid").dataSource.data([
{ ProductName: "Test1", UnitPrice: 1, UnitsInStock: 1, Discontinued: false }
]);
});
Demo
Related
In the kendoGrid, you can implement the Filter Multi Checkboxes in order of specify multiple values for a single column filter.
I would like to replicate the same feature inside the kendoFilter widget. I've tried to use a kendoMultiSelect as an editorTemplate (see this Dojo example)
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
autoSync: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } }
}
}
}
});
$("#filter").kendoFilter({
dataSource: dataSource,
applyButton: true,
fields: [
{ name: "ProductName", label: "Product Name", editorTemplate: productDropDownEditor },
],
expression: {
logic: "and",
filters: [
{ field: "ProductName", value: "", operator: "eq" }
]
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" }
]
});
});
function productDropDownEditor(container, options) {
$('<input data-bind="value: value" name="' + options.field + '"/>')
.appendTo(container)
//.kendoDropDownList({
.kendoMultiSelect({
dataTextField: "ProductName",
dataValueField: "ProductName",
autoclose: false,
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
}
});
}
Unfortunately, I think it doesn't work because the filter.value doesn't expect an array as a parameter. Is there a standard way to use the tell the kendoFilter how to create a filter based on multiple values?
I think I see what you are trying to do. Unfortunately, you can't use it that way because kendoFilter does it one by one (i.e. you'll need to click on the "+" icon in order to add another filter). Here is another alternative of what I think you are trying to do.
First off, I'd hide kendoFilter. Then based on the multiselected product name I'd redo the expression of the filter. This still accomplishes what you are trying to do (filtering through multiselect). Try the code below in the DOJO.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/filter/custom-editors">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.default-ocean-blue.min.css" />
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/products.js"></script>
<div id="example">
<div id="filter"></div>
<div id="multiselect"></div>
<br />
<br />
<br />
<div id="grid"></div>
<script>
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
pageSize: 20,
data: products,
autoSync: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } }
}
}
},
});
var filter = $("#filter").kendoFilter({
dataSource: dataSource,
expression: {
logic: "or",
filters: [],
}
}).data("kendoFilter");
$("#multiselect").kendoMultiSelect({
dataTextField: "ProductName",
dataValueField: "ProductName",
autoclose: false,
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
}
},
change: function(e) {
var dataItems = e.sender.dataItems();
var options = filter.getOptions();
options.expression.filters = [];
for (let dataItem of dataItems) {
options.expression.filters.push({
field: "ProductName",
value: dataItem.ProductName,
operator: "eq"
});
}
filter.setOptions(options);
filter.applyFilter();
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" }
]
});
});
</script>
<style>
#filter {
display: none;
}
</style>
</div>
</body>
</html>
In the kendo ui treelist the headerTemplate works for a multi-column only in the lowest column of the hierarchy. Not in the root column.
Sample:
columns: [{
field: "FirstName", title: "First Name", width: 180
}, {
title: "Personal Info",
/* headerTemplate: "Personal Info Template", */ /* do not works */
columns: [{
field: "LastName", title: "Last Name", width: 120,
}, {
title: "Location",
columns: [{
field: "City", width: 140,
headerTemplate: "City Template", /* works */
}, {
field: "Country", width: 140
}]
}]
}]
Sample Link
How can a button/html be placed in the root column of a multi-column header?
I've checked the console and it has a runtime error when that headerTemplate was uncommented:
Uncaught TypeError: i.headerTemplate is not a function
So i suposed it was expecting a template function, like:
headerTemplate: kendo.template("Personal Info Template"),
And it works, hence you can use html in that template:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treelist/multicolumnheaders">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.119/styles/kendo.bootstrap-v4.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.1.119/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="treelist"></div>
<script>
$(document).ready(function () {
var service = "https://demos.telerik.com/kendo-ui/service";
$("#treelist").kendoTreeList({
dataSource: {
transport: {
read: {
url: service + "/EmployeeDirectory/All",
dataType: "jsonp"
}
},
schema: {
model: {
id: "EmployeeID",
parentId: "ReportsTo",
fields: {
ReportsTo: { field: "ReportsTo", nullable: true },
EmployeeID: { field: "EmployeeId", type: "number" },
Extension: { field: "Extension", type: "number" }
},
expanded: true
}
}
},
height: 540,
sortable: true,
resizable: true,
reorderable: true,
columnMenu: true,
columns: [{
field: "FirstName", title: "First Name", width: 180
}, {
title: "Personal Info",
headerTemplate: kendo.template("Personal Info <button>Button</button>"),
columns: [{
field: "LastName", title: "Last Name", width: 120,
}, {
title: "Location",
columns: [{
field: "City", width: 140,
headerTemplate: "City Template", /* works */
}, {
field: "Country", width: 140
}]
}]
}]
});
});
</script>
</div>
</body>
</html>
Updated Dojo
i am trying to expand row on select and collapse same row on click by using Kendo Grid for Mvc UI ,, How to Check the CSS class of the arrow icon in the selected row - k-plus status ,, in the other words i would like to check if selected row is expanded or not.
Use this script:
selectable: true,
change: function() {
let $row = this.select();
if ($row.length && $row.find('[aria-expanded="true"]').length) {
this.collapseRow($row);
}
else {
this.expandRow($row);
}
}
It checks if the row is expanded by looking after an element with aria-expanded.
Demo:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/hierarchy">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title"
}
],
selectable: true,
change: function() {
let $row = this.select();
if ($row.length && $row.find('[aria-expanded="true"]').length) {
this.collapseRow($row);
}
else {
this.expandRow($row);
}
}
});
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", width: "110px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "300px" }
]
});
}
</script>
</div>
</body>
</html>
I have a problem with Kendo UI using Typescript in my project. I have a grid which filtering mode doesn't work on some column types, like integer. I tried to add the type in the columns directly, but it's not working at all.
And it's not filtering on links either.
[EDIT] Here's my function code that create the grid :
private _createInfoGridOptions(): kendo.ui.GridOptions {
return {
dataSource: {
serverPaging: true,
serverSorting: true,
pageSize: 15,
},
resizable: true,
selectable: 'row',
filterable: true,
columnMenu: true,
sortable: true,
scrollable: {
virtual: true
},
groupable: true,
height: 450,
columns: [
{ field: 'subTaskId', type: "number", title: 'Subtask Id', width: '80px' },
{ field: 'reportDate', type:"date", title: 'Report Date', width: '100px', template: '#= moment.utc(reportDate).local().format("yyyy/mm/dd") #' },
{ field: 'prog', type: "string", title: 'prog', width: '60px', template: "#=prog#" },
{ field: 'state', type:"string", title: 'status', width: '130px' },
{ field: 'maxTemps', type: 'number', title: 'Max Temps', width: '100px' }
]
};
}
I have this error on Chrome:
Uncaught TypeError: (d.prog || "").toLowerCase is not a function
and this one on Firefox:
TypeError: "".toLowerCase is not a function.
I did a plunker to test my code translated in javascript, but the type property works.
$("#grid").kendoGrid({
dataSource:
{
data : [
{id: 36308,reportDate:"2015-02-01",prog: 58,state: "Waiting",maxTemps: 0},
{id: 36309,reportDate:"2015-02-01",prog: 34,state: "Complete",maxTemps: 86400},
{id: 36310,reportDate:"2015-02-01",prog: 116,state: "Complete",maxTemps: 86400},
{id: 36311,reportDate:"2015-02-02",prog: 58,state: "Complete",maxTemps: 86400}
],
serverPaging: true,
serverSorting: true,
pageSize: 15
},
filterable: true,
columnMenu: true,
columns: [
{ field: 'id', type:'number', title: 'Id', width: '80px' },
{ field: 'reportDate', title: 'Report Date', width: '100px' },
{ field: 'prog', type:'number', title: 'Prog', width: '60px' },
{ field: 'state', title: 'Status', width: '130px' },
{ field: 'maxTemps', type:'number', title: 'Max Temps', width: '100px' }
]
});
So it's working in Javascript but not in Typescript, I'm using AngularJS with Kendo UI.
Any ideas why it's not woking ?
Thanks !
Ginwu
So it's working in Javascript but not in Typescript
The typescript you have shared is not the same as the JavaScript that you have shared. Specifially dataSource is vastly different. I would make the TS similar to the JS and that should fix the error.
Try this solution Plunker,
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/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/2015.1.318/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$(document).ready(function() {
var data = [{
id: 36308,
reportDate: new Date("2015/02/01"),
prog: 58,
state: "Waiting",
maxTemps: 0
}, {
id: 36309,
reportDate: new Date("2015/02/01"),
prog: 34,
state: "Complete",
maxTemps: 86400
}, {
id: 36310,
reportDate: new Date("2015/02/01"),
prog: 116,
state: "Complete",
maxTemps: 86400
}, {
id: 36311,
reportDate: new Date("2015/02/02"),
prog: 58,
state: "Complete",
maxTemps: 86400
}];
$("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
model: {
fields: {
prog: {
type: "number"
},
reportDate: {
type: "date"
}
}
}
}
},
scrollable: true,
columnMenu: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
columns: [{
field: 'id',
type: 'number',
title: 'Id',
width: '80px'
}, {
field: 'reportDate',
title: 'Report Date',
width: '100px',
format: "{0:yyyy/MM/dd}",
filterable: {
ui: "datepicker"
}
}, {
field: 'prog',
title: 'Prog',
width: '60px',
template: '#= prog #'
}, {
field: 'state',
title: 'Status',
width: '130px'
}, {
field: 'maxTemps',
type: 'number',
title: 'Max Temps',
width: '100px'
}]
});
});
</script>
</body>
</html>
I have a problem to configure the Kendo-Ui with Combo-box with custom values. I have seen this question How to use ComboBox as Kendo UI grid column? but we are unable to configure the whole ...
Please look at the codes.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.js"></script>
<link href="css/kendo.common.css" rel="stylesheet" />
<link href="css/kendo.default.css" rel="stylesheet" />
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function (){
// var crudServiceBaseUrl = "http://localhost/kendo-prac/",
dataSource = new kendo.data.DataSource({
transport: {
read:{
url: "http://localhost/kendo-prac/data/employees.php",
dataType: "jsonp"
},
update: {
url: "http://localhost/kendo-prac/data/update.php",
dataType: "jsonp"
},
destroy: {
url:"http://localhost/kendo-prac/data/delete.php",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 10,
schema: {
model: {
id: "ID",
fields: {
Name: { editable: false, nullable: false },
Title: { editable: true, nullable: false },
URL: { editable: true, nullable: false },
FTP: { editable: true, nullable: false },
// date: { editable: false, nullable: false },
Status: { type: "string", editable:false},
Remarks: { editable: false, nullable: false }
}
}
}
});
// template: ('<select id="combobox" name="Status"/><option value="#=Status#">#=Status#</option><option value="Added">Added</option><option value="Rejected">Rejected</option></select>')
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 650,
scrollable: true,
sortable: true,
toolbar: ["save", "cancel"],
columns: [
{ field: "Name", width: "60px" },
{ field: "URL", width: "350px" },
{ field: "Title", width: "150px" },
{ field: "FTP", width: "150px" },
// { field: "Date", width: "150px" },
// { field: "Status", width: "100px" },
{field: "Status", width:"150px", template: ('<select id="combobox" name="Status"/><option value="#=Status#">#=Status#</option><option value="Added">Added</option><option value="Rejected">Rejected</option></select>')},
// { field: "Action", width: "100px" },
// { field: "Code", width: "100px" },
{ field: "Remarks", width: "50px",template:('#=Remarks#')},
{ command: "destroy", title: "Delete", width: "100px" }],
editable: true
});
$("#com").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: [
{ text: "Cotton", value: "1" },
{ text: "Polyester", value: "2" },
{ text: "Cotton/Polyester", value: "3" },
{ text: "Rib Knit", value: "4" }
],
filter: "contains",
suggest: true,
index: 3
});
});
</script>
</div>
</body>
</html>
We have not implement able to configure the Combobox. we can simply built the select box with following options. We just update the Status from Combobox.
Thanks
Alen
You can refer to this official example off the KendoUI demos to set the custom editor up correctly.