So I have this unusual situation, where 3 of the Filter options display information correctly, but the fourth one doesn't? and im not sure why. also, on the bottom right, where the total # of rows displays, it will display as "Nan - 2" or "Nan - 8", instead of "1-8 - 8"
The option that doesn't work is Case 1.
Here is the code:
function changeProcessedItemFilter() {
var val = $("#processedItemFilter").prop("value");
var grid = $("#PLAGridMain").getKendoGrid();
var parsedValue = parseInt(val);
var approveBtn = $("#Approve").data("kendoButton");
var updateBtn = $("#Update").data("kendoButton");
switch(parsedValue)
{
case 0:
break;
case 1: //filter New Data only. Unprocessed/ UnSent.
approveBtn.enable(true);
updateBtn.enable(false);
grid.dataSource.query({
filter: [{ field: "Processed", operator: "eq", value: false }, { field: "Sent", operator: "eq", value: false }]
});
break;
case 2: //filter Processed/ Unsent Records.
approveBtn.enable(false);
updateBtn.enable(true);
grid.dataSource.query({
filter: [{ field: "Processed", operator: "eq", value: true }, { field: "Sent", operator: "eq", value: false }]
});
break;
case 3:// Filter GMCC Records. UnProcessed/Sent.
approveBtn.enable(true);
updateBtn.enable(true);
grid.dataSource.query({
filter: [{ field: "Processed", operator: "eq", value: false }, { field: "Sent", operator: "eq", value: true }]
});
break;
case 4:// Filter Updated Records. Processed/Sent.
approveBtn.enable(false);
updateBtn.enable(true);
grid.dataSource.query({
filter: [{ field: "Processed", operator: "eq", value: true }, { field: "Sent", operator: "eq", value: true }]
});
break;
}
}
Related
I have a kendogrid where I want to search three columns from a input field. The logic below will only search one of the columns is there another flag I need to add for it to search all three columns
$('#filter').on('input', function (e) {
var grids = $(".k-grid");
for (var j = 0; j < grids.length; j++) {
var grid = $(grids[j]);
var griddata = $(grid).data('kendoGrid');
griddata.dataSource.filter(
{ field: "Name", operator: "contains", value: e.target.value },
{ field: "Date", operator: "contains", value: e.target.value },
{ field: "Type", operator: "contains", value: e.target.value });
}
});
If you need to use more than one filter, pass them in as an array. You can also set or change the logic.
griddata.dataSource.filter({
logic: "or",
filters:
[
{ field: "Name", operator: "contains", value: e.target.value },
{ field: "Date", operator: "contains", value: e.target.value },
{ field: "Type", operator: "contains", value: e.target.value }
]});
I'm working with kendo Multiselect and I would like to find a way to search in multiple fields of my data source.
Here is my actual code. but it works only for one field:
`
$scope.dataList = new kendo.data.DataSource({
data:[{id: "1",name: "Doe, John",email: "John.Doe#example.com"}],
});
$scope.customOption = {
dataSource: $scope.dataList,
dataTextField: "name",
dataValueField: "id",
filter: "contains",
itemTemplate: '<span>#=id#</span>#=name#<i> #=email#</i>',
}
`
As you see I'm also using AngularJS, I try to search for names and emails.
$("#id").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "name",
dataValueField: "id",
autoBind: false,
filtering: function (e) {
if (e.filter) {
var value = e.filter.value
var newFilter = {
filters: [
{ field: "id", operator: "contains", value: value },
{ field: "name", operator: "contains", value: value },
{ field: "email", operator: "contains", value: value }
],
logic: "or"
}
e.sender.dataSource.filter(newFilter)
e.preventDefault()
}
e.preventDefault()
},
dataSource: {
data:[
{id: "1",name: "Doe, John",email: "John.Doe#example.com"},
{id: "2",name: "sss, John",email: "sss.Doe#example.com"},
{id: "3",name: "fff, John",email: "fff.Doe#example.com"},
{id: "4",name: "ccc, John",email: "ccc.Doe#example.com"}
],
},
value: [
{id: "1",name: "Doe, John"},
]
});
Refer to API Documentation of Kendo DataSource and MultiSelect. hope it helps.
I have a requirement in which I have to show two dropdown list in the Filterable cell of kendo grid. These two dropdown lists would filter two different columns in the kendo grid.
One thought I had is having template which would be some kendo container like some panel probably, and then add two dropdowns to that container.
Is this even possible? If yes how to achieve this?
Here is my kendo grid definition.
ctrl.mainGridOptions = {
dataSource: ctrl.gridDataSource,
columns: [
{
title: 'Col1-Col2',
field: 'Col1',
width: 200,
template: kendo.template($("#col1").html()),
filterable: { cell: { template: ctrl.coonetemplate, showOperators: false } }
},
{
field: 'Col3',
width: 150,
title: 'Col3',
template: kendo.template($("#col3").html()),
filterable: { cell: { template: ctrl.colthreeTemplate, showOperators: false } }
}
]
}
Here is a mockup of what I want to achieve.
There are a few different parts to this.
First, if you want to have multiple filter controls for different pieces of data, you should define a column for each one. Then, put a template on the first column to have it display the data for two columns. Use the attributes option to set a colspan=2. Then, use the attributes option on the second columns to set style="display:none".
The second part is getting the dropdowns. I generally prefer to use the values option to accomplish this. The code below uses this for the OrderID column. The other alternative was the approach you were on, which is to use the cell template. The code below uses this on the ShipName column.
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "string" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
},
height: 550,
filterable: {
mode: "row"
},
pageable: true,
columns: [
{
field: "OrderID",
width: 150,
attributes: {
colspan: 2
},
values: [
{text: "10248", value: "one"},
{text:"10249", value: "two"}
],
template: '#:OrderID# (#:ShipName#)',
filterable: {
cell: {
operator: "eq",
showOperators: false
}
}
},
{
attributes: {
style: "display:none"
},
field: "ShipName",
width: 200,
title: "Ship Name",
filterable: {
cell: {
template: function(args) {
args.element.kendoDropDownList({
dataSource: args.dataSource,
dataTextField: "ShipName",
dataValueField: "ShipName",
valuePrimitive: true
});
},
operator: "eq",
showOperators: false
}
}
},
{
field: "Freight",
width: 255,
filterable: false
}]
});
});
</script>
</div>
Runnable Demo
Kendo Grid filterable cell with custom options column wise and by using this solution it also overwrites general filters settings in case specific column requirement. ASP.NET MVC C#.
columns.Bound(c => c.columnName)
.Format("{0}%")
.Filterable(ftb => ftb
.Cell(cell => cell.ShowOperators(true))
.Extra(false)
.Operators(op => op
.ForNumber(fn => fn
.Clear()
.IsEqualTo(CommonResource.GridFilter_IsEqualTo)
)
)
)
.Title("Column Name");
Is it possible to use a custom tooltip text from datasource?
i have a datasource schema like this:
schema: {
data: "d",
model: {
fields: {
text: { type: "string" },
value: { type: "number" },
desc: { type: "string " }
}
}
}
and I want to use text for base bar values, and desc for tooltip so I have this configuration:
series: [{
field: "value",
categoryField: "desc"
}],
categoryAxis: [{
field: "text"
}]
and in the tooltip configuration:
tooltip: {
visible: true,
template: "#= category # : #= value # minutes"
}
this configuration does not seem to work. Is there any way I can use desc field only for tooltip?
Just use dataItem object in kendo template:
tooltip: {
visible: true,
template: "#= dataItem.desc # minutes"
}
Here is dojo example: http://dojo.telerik.com/IYOZO.
I'm trying to put 2 filters on kendo grid with 'OR' logic.
It's not working. I need the grid to be filtered with the both the dropdowns.
If in Foo dropdown 'foo1' is selected and in Bar dropdown 'All' selected, then the grid should be displaying
foo bar
1 1
1 2
Code below:
$(function() {
var grid=$("#grid").kendoGrid({
dataSource: {
data: [
{ foo: "1", bar: "1" },{ foo: "1", bar: "2" },
{ foo: "2", bar: "2" },{ foo: "2", bar: "1" },
{ foo: "3", bar: "3" },{ foo: "3", bar: "2" }
]
},
columns: [
"foo","bar"
],
toolbar: kendo.template($("#template").html())
});
grid.find("#foo").kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
autoBind: false,
optionLabel: "All",
dataSource: [{id:'1', name:'foo1'}, {id:'2', name:'foo2'},{id:'3', name:'foo3'}],
change: function () {
var ds = $("#grid").data("kendoGrid").dataSource;
var filter = {
logic: "and",
filters: []
};
if (this.value()) {
filter.filters.push([{ field: "bar", operator: "eq", value:
$("#bar").data('kendoDropDownList').value() },
{ field: "foo", operator: "eq", value: $("#foo").data('kendoDropDownList').value() }
]);
}
ds.filter([filter]);
}
});
grid.find("#bar").kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
autoBind: false,
optionLabel: "All",
dataSource: [{id:'1', name:'bar1'}, {id:'2', name:'bar2'},{id:'3', name:'bar3'}],
change: function () {
var ds = $("#grid").data("kendoGrid").dataSource;
var filter = {
logic: "and",
filters: []
};
if (this.value()) {
filter.filters.push([{ field: "bar", operator: "eq", value:
$("#bar").data('kendoDropDownList').value() },
{ field: "foo", operator: "eq", value: $("#foo").data('kendoDropDownList').value() }
]);
}
ds.filter([filter]);
}
});
});
After pushing the filters to the filter array the grid datasource is not filtered.
Updated jsbin below:
http://jsbin.com/izuloj/23/edit
There are couple of problems:
The argument for DataSource filters is an array but you are pushing an array when you do:
filter.filters.push([
{ field: "bar", operator: "eq", value: $("#bar").data('kendoDropDownList').value() },
{ field: "foo", operator: "eq", value: $("#foo").data('kendoDropDownList').value() }
]);
Comparing with empty is not the same that not adding the condition. So you should actually do:
// If there is some value in "bar" we add a condition for filtering it
if ($("#bar").data('kendoDropDownList').value()) {
filter.filters.push({
field: "bar",
operator: "eq",
value: $("#bar").data('kendoDropDownList').value() }
);
}
// If there is some value in "foo" we add a condition for filtering it
if ($("#foo").data('kendoDropDownList').value()) {
filter.filters.push(
{
field: "foo",
operator: "eq",
value: $("#foo").data('kendoDropDownList').value() }
);
}
Finally, you should not set any filter if both drop down inputs are empty but in that case you cannot send an empty filter array, you should do ds.filter({})) instead.
So your change function ends being:
function onChange () {
var ds = $("#grid").data("kendoGrid").dataSource;
var filtering = false;
var filter = {
logic: "and",
filters: []
};
if ($("#bar").data('kendoDropDownList').value()) {
filtering = true;
filter.filters.push(
{ field: "bar", operator: "eq", value: $("#bar").data('kendoDropDownList').value() }
);
}
if ($("#foo").data('kendoDropDownList').value()) {
filtering = true;
filter.filters.push(
{ field: "foo", operator: "eq", value: $("#foo").data('kendoDropDownList').value() }
);
}
if (filtering) {
ds.filter([filter]);
} else {
ds.filter({});
}
}
Your code modified here : http://jsbin.com/izuloj/31/edit
Instead of
var filter = {
logic: "and",
filters: []
};
if (this.value()) {
filter.filters.push([{ field: "bar", operator: "eq", value:
$("#bar").data('kendoDropDownList').value() },
{ field: "foo", operator: "eq", value: $("#foo").data('kendoDropDownList').value() }
]);
}
ds.filter([filter]);
Doing below works....easy to read
if ( $("#foo").data('kendoDropDownList').value() === "")
{
ds.filter( { field: "bar", operator: "eq", value: $("#bar").data('kendoDropDownList').value()});
}
else
{
ds.filter({
logic: "and",
filters: [{ field: "foo", operator: "eq", value: $("#foo").data('kendoDropDownList').value() },{ field: "bar", operator: "eq", value: $("#bar").data('kendoDropDownList').value() }]
});
}
Remove the square brackets on ds.filter([filter]); so that it becomes ds.filter(filter);.