I'm trying to write a piece of code that shows the options of a column as checkboxes for the user to filter.
But I wanna do more than that. Let's say for instance that the user checks the "USA" option in the example below, it should show as a result: "USA", "USA1" and "USA2" (a contains filter).
I've found a variety of kendo filters but none of them could be applied to the property "filterable" - "multi:true".
I've tried the code on http://jsfiddle.net/phqs/vfqs917w/ but I couldn't achieve the results I want.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "country",
filterable: {
multi:true,
operators: {
string: {
contains: "Contains"
}
}
}
} ],
filterable: true,
dataSource: [ { country: "BG" }, { country: "USA" },{ country: "USA1" },
{ country: "USA2" }
]
});
</script>
Can someone please help me on this?
Related
Is it possible to call an API while typing filters in kendo grid or can we add pagination in filters itself.
We have around 5000000 filters,and we are populating data for only 5 filters,If the user wants any other filter,he can type in kendo text box and then we can make api call and show data for all related filters.
I am trying keydown event,but this will close grid and user need to enter again
Sample :
$('body').on('keydown', '.k-textbox','#grid' ,function (event) {
var grid=$('#grid').data("kendoGrid");
grid.setOptions({
columns: [{
field: "ProductName",
title: "Product Name",
filterable: {
mode: "menu,row",
multi: true, search: true,
dataSource:
[{ "ProductName": "abc" }, { "ProductName": "bh" }, { "ProductName": "li" }]
}}]
});
I want to use 2 or more buttons in one field like Kendo Grid by using custom command in TreeList but I could not do that. Does anyone have a solution?
You just add an array of buttons to the column command property:
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{
command: [
{
name: "Cust1",
text: "Custom1",
click: function(e) {
alert("Custom1");
}
},
{
name: "Cust2",
text: "Custom2",
click: function(e) {
alert("Custom2");
}
},
]
}
],
editable: true,
dataSource: dataSource
});
DEMO
Is it possible to persist grid sort/filter/selection on grid.refresh() in some smart optimized way? I need to refresh grid on window resize event to adjust to a new window size. I guess refresh internally destroys and recreates grid, not accounting for possible active sort/filter/selection. Because grid can contain a lot of data (virtual scrolling), I would like to a avoid unnecessary db querying, rendering and sorting. I guess I am looking for a refresh which will refresh on existing data.
Seams like they just implemented it - here is the example.
Maybe to be included in the next release.
Here is the code in the example that does this:
jQuery(function ($) {
$("#grid").shieldGrid({
dataSource: {
data: gridData,
schema: {
fields: {
id: { type: Number },
name: { type: String },
company: { type: String },
phone: { type: String },
age: { type: Number },
gender: { type: String }
}
},
filter: {
// create the initial filter in that form
and: [
{ path: "name", filter: "con", value: "John" }
]
}
},
filtering: {
enabled: true
},
paging: true,
columns: [
{ field: "id", width: "250px", title: "ID" },
{ field: "name", title: "Person Name", width: "250px" },
{ field: "company", title: "Company" },
{ field: "phone", title: "Phone", width: "250px" },
{ field: "age", title: "Age" }
]
});
});
I found the solution in refresh method it self. It accepts options objects where one can provide current data source options to persist. Example to persist sort and/or filter:
var options = {
dataSource: $("#grid").swidget().dataSource
}
$("#grid").swidget().refresh(options);
Please stand me correct if I am wrong here. For selections I guess one can retrieve selected indices and reselect after calling refresh.
EDIT: filter and sort are preserved, but filter row resets (loses all active input values). Could this be a bug? How to keep values in filter row?
I am using Telerik Kendo Grid; it wouldn't allow to use the sortable functionality of the table when my datasource (array) looks as below:
var myArray = [
{ Destination = { Country: "United Kingdom", AircraftTypeCount: 9 }, Origin= [ {Country: "United States", Code: "JFK"} ] },
{ Destination = { Country: "Egypt", AircraftTypeCount: 5 }, Origin= [ {Country: "Qatar", Code: "QR"} ] }]
It renders the country column fine, but when I click on the column the sorting doesn't occur. Below is my Kendo Grid (using AngularJS):
$("#myKendoTable").kendoGrid({
dataSource: {
data: myArray
},
sortable: {
mode: "multiple",
allowUnsort: true
},
columns: [
{
field: "Country",
title: "Country",
width: 300,
template: function (item) {
return item["Destination"].Country;
}
}
]
});
I've just sorted this out. It seems that Kendo's sorting functionality recognises basic array structure, so I had retrieve all Destinations from myArray into a separate array, and use that new array as the datasource.
I used the following method to do so (using underscoreJS):
function getDestinationsData(airlineRoutes)
{
return _.map(AirlineDestinationRoutes, function (airlineRoutes) { return airlineRoutes.Destination });
}
I would like to ask, how to change in Kendo Grid component column filterable input (see image below) into dropdown menu with two given values (CZ and EN)?
Many thanks for any help.
EDIT:
I tried to do by this way, but with no effect:
{
field :"language",
title : $translate.instant('LANG'),
type: "string",
width:220,
filterable: {
ui: function (element) {
element.kendoDropDownList({
dataSource: ['CZ','EN'],
optionLabel: "--Select Value--"
});
}
}
},
Check this tutorial, it should give you information how to do it
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
Sorry, Is this that you are trying to achieve ?
I have resolved this by applying below code
{
field: "language",
title: "Language",
width: 150,
filterable: {
multi: true,
dataSource: [
{ language: "CN" },
{ language: "EN" }
]
}
}
Hope this will work for you