I'm trying to set filter column to be multi and search operator to be contains. Unfortunately, the filter makes a request with the equals operator instead. My Kendo version is 2015.3.930. My column configuration object looks like this:
filterable: {
operator: "contains",
multi: true,
dataSource: {
transport: {
read: filterReadMethod
}
}
}
What I want is a column filter (in grid) that contains chechboxes and filter by contains. Any suggestions?
What I've already tried:
cell: {
showOperators: false,
operator: "contains"
},
And
operators: {
string: {
contains: "Contains"
}
}
Check out this example on the Kendo API reference. I think your code needs to be like:
filterable: {
multi: true,
operators: {
string: {
contains: "Contains"
}
}
},
UPDATE
After a bit of testing, I am going to say that no. No you cannot use both multi and contains. It appears that by setting multi: true, under-the-hood Kendo creates filter with the operator set to eq. The change event of the datasource actually let's you peek under the hood, but even manually setting the value does not work.
I tested in the Kendo Dojo. The code I ended up with is below. By looking at the Kendo datasource reference, you can see that there are some ways to get to the filters that are being used.
So let me qualify my definitive "no" by saying that it is JavaScript and there is certainly a "hacky" way to get around this.
However, if this is really a feature that you need, then I would recommend hitting up the support forums on Telerik's site. Even if you no longer have a valid contract, they are pretty cool about answering simple questions, albeit it will be a few days before they get to it.
Wish I had a better answer for you.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "country",
filterable: {
multi:true,
search: true,
dataSource: [
{ country: "BG" },
{ country: "USA" }
]
},
} ],
filterable: true,
dataSource: {
data: [
{ country: "BG" },
{ country: "USA" },
{ country: "1BG3" },
{ country: "1USA4" }
],
/*filter: {
logic: "or",
filters: [
{ field: "country", operator: "contains", value: "BG" }
]
},*/
change: function(e) {
try{
//e.sender._filter.filters[0].operator = "contains";
this.filter().filters[0].operator = "contains";
var f = this.filter().filters[0].value;
console.log(f);
}catch(e1) {
console.log(e1);
}
}
}
});
</script>
</body>
</html>
Related
I'm currently using the grid from Kendo UI version v2016.2.504 and have incorporated the pager functionality.
When clicking the "last page" button I'm looking to see how I can identify the source or sender is definitely the "last page" button when using change event in kendo's datasource. I don't see any discernible way in the "e" event or sender property. Does anyone know?
kendouipager
var dataSource = new kendo.data.DataSource({
data: $scope.datasource,
pageSize: 15,
change: function (e) {
var sender = e.sender; // help
},
});
You can add an event listener to the button and then either do the what you want to do in the callback or raise a flag and handle it in the page event handler.
See the snippet for a demo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/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/2019.3.1023/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
var isLast = false;
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 35 },
{ id: 3, name: "John Smith", age: 40 }
],
pageSize: 1,
schema: {
model: { id: "id" }
}
},
pageable: true,
page: function(e) {
console.log("Page change", e.page);
console.log("isLast", isLast);
if (isLast) {
// You can do what you want to do here - option 2
}
isLast = false;
}
});
document.getElementsByClassName("k-pager-last")[0].addEventListener("click", (e) => {
isLast = true;
// You can do what you want to do here - option 1
});
</script>
</body>
</html>
Starting with Kendo-UI 2017, I've noticed that the row filter now shows two "x" buttons to clear the filter (one inside the text box and one to the right of the text box). Why are there two rather than only one like in the older versions? More importantly,
is there a setting to remove the clear button from inside the text box without resorting to using CSS?
$("#grid").kendoGrid({
columns: [
{
field: "name",
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
},
{ field: "age", filterable: false }],
filterable: { mode: "row" },
dataSource: [{ name: "Jane", age: 30 }, { name: "John", age: 33 }]
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" rel="stylesheet" />
<link href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.bootstrap.min.css" rel="stylesheet" />
<script src="//kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<div id="grid"></div>
The AutoComplete widget for filtering is to blame. I ended up using CSS anyway to hide it:
.k-clear-value {
display: none !important;
}
But the JavaScript answer was to put the following in the dataBound event:
this.element.find(".k-filtercell .k-autocomplete .k-clear-value").remove();
Here is the updated code:
$("#grid").kendoGrid({
columns: [
{
field: "name",
filterable: {
cell: {
showOperators: false,
operator: "contains"
}
}
},
{ field: "age", filterable: false }],
filterable: { mode: "row" },
dataBound: function(e) {
this.element.find(".k-filtercell .k-autocomplete .k-clear-value").remove();
},
dataSource: [{ name: "Jane", age: 30 }, { name: "John", age: 33 }]
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" rel="stylesheet" />
<link href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.bootstrap.min.css" rel="stylesheet" />
<script src="//kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
<div id="grid"></div>
Source
I came across this, and i really don´t know how to change it. I have column field like this:
{ field: "nome", title: "Nome", width: "20px", template: '<span><img id=idIconRowFolder src="icon_rowFolder.png" style="float: left;width: 20%;height: 16px;width: 16px;margin-top: 2%;"/></span>#= nome #',hideMe: true},
As you can see, i´m using a template and inside it there´s an image...it´s basically a icon that appears on the left side of the text in each row. What i want is to change this icon dinamically, so i know i have to use the dataBound function, and iterate through rows, and i´m actually doing this, but i don´t know how to access the template and his content:
my dataBound:
var grid = this;
grid.tbody.find('>tr').each(function()
{
var dataItem = grid.dataItem(this);
console.log(dataItem);
if(dataItem.tipo === 'pdf')
{
"what do i do here" ?
}
});
Thanks for your time, regards.
EDIT:
Hi everyone, thanks to your suggestions, i found a way, here it is for someone who could have the same problem:(in the databound put this)
var grid = $("#gridBaseDados").data("kendoGrid");
$(grid.tbody).find('tr').each(function ()
{
var dataItem = grid.dataItem(this).tipo;
var ficheiroValExtension = dataItem.split('.').pop();
if(ficheiroValExtension === 'pdf')
{
$(this).find('img').prop('src', 'index.hyperesources/icon_rowPdf.png').css('width','17px').css('height','22px');
}
}
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<div id="Grid">
</div>
<script>
$(document).ready(function () {
$("#Grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders",
dataType: "jsonp"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
dataBound: onDataBound,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 260
}, {
field: "ShipCity",
title: "Ship City",
template: '<img id=idIconRowFolder src="icon_rowFolder.png" style="float: left;width: 20%;height: 16px;width: 16px;margin-top: 2%;"/>'
}
]
});
});
function onDataBound(e) {
var grid = $("#Grid").data("kendoGrid");
$(grid.tbody).find('tr').each(function () {
$(this).find('img').prop('src', 'Your new image src');
//Below syntax will return orderID
//$($(this).find('td').get(0)).html()
});
}
</script>
</body>
</html>
Let me know if any concern.
As i understand you want to show specific image corresponding to each data item. Then you have two options:
1.Additional field in dataSource that represents img.src
{
field: "nome",
title: "Nome",
width: "20px",
template: '<span><img src="#=imgSrc#" .../></span>#= nome #',
hideMe: true
}
2.Use clientSide function that return image source dependent on data item:
{
field: "nome",
title: "Nome",
width: "20px",
template: '<span><img src="#=getImgSrc(data)#" .../></span>#= nome #',
hideMe: true
}
and function itself:
var getImgSrc = function(item)
{
if(item.tipo === 'pdf') { return ... }
...
}
Update: of course for that no need to iterate dataSource in dataBound event
I have a tree view, with dragAndDrop set to true. When a leaf node of the tree is converted into an internal node, by dropping some child in it, it starts to behave strangely. If I collapse this node, it won't expand again. It gets even weirder if I drop another child to it. Here is the code I used:
var inline = new kendo.data.HierarchicalDataSource({
data: [
{ categoryName: "Storage", subCategories: [
{ subCategoryName: "Wall Shelving" },
{ subCategoryName: "Floor Shelving" },
{ subCategoryName: "Kids Storage" }
] },
{ categoryName: "Lights", subCategories: [
{ subCategoryName: "Ceiling" },
{ subCategoryName: "Table" },
{ subCategoryName: "Floor" }
] }
],
schema: {
model: {
children: "subCategories"
}
}
});
$("#label-tree").kendoTreeView({
dragAndDrop: true,
loadOnDemand: false,
dataSource: inline,
dataTextField: [ "categoryName", "subCategoryName" ]
});
I tried other ways of defining the datasource, but they end up the same. Am I doing it wrong?
This was a bug in Kendo UI but was solved in version 2013.1.514. Trying using:
<link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css" rel="stylesheet">
<link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.default.min.css" rel="stylesheet">
<script src="http://cdn.kendostatic.com/2013.1.514/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
I have a simple data source that I'm trying to load into a kendoui grid and it does not show - what am I doing wrong?
$(document).ready(function () {
var hisGrid = $("#hisGrid").kendoGrid({
dataSource: {
data: hisDS,
schema: {
model: {
id: "ID",
fields: {
HIS_DT: {
type: "string",
editable: false
},
HIS_VAL: {
type: "string",
editable: false
}
}
}
},
pageSize: 10
},
height: 500,
scrollable: true,
sortable: true,
selectable: true,
columns: [{
field: "HIS_DT",
title: "Date/Time",
width: 10
}, {
field: "HIS_VAL",
title: "History",
width: 5
}]
}).data("kendoGrid");
});
Here's a jsfiddle to the example
Would appreciate a fresh pair of eyes!
Thanks
It is a problem with jQuery version. If you include jQuery 1.8.3 it works fine.
But as recommendation, try using the one distributed with KendoUI so you make sure that they are compatible.
<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script type="text/javascript" src="http://cdn.kendostatic.com/2012.2.710/js/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
Fixed version here : http://jsfiddle.net/5mFsG/27/