kendo datasource filter with three conditions - kendo-ui

I want to filter my kendo datasource by three conditions, it has to meet them all
but when I run this line of code I get undefined is not a function
viewModel.savedRepairTypesDataSource.filter(
{logic:"and", filters: [
{field:"item",operator:"eq",value:item},
{field:"category",operator:"eq",value:category},
{field:"estimateId",operator:"eq",value:estimateId}
]
});

Related

Kendo UI Grid - Row filter debounce inputs

I'm using a kendo grid in the same way as the following demo: http://demos.telerik.com/kendo-ui/grid/filter-row
Is there anyway of adding a debounce time to the string filter inputs so the filter is applied "as the user types"
You can easily achieve this by adding the code in the column you want to filter while typing:
filterable: {
cell: {
operator: "contains",
template: function (args) {
args.element.css("width", "90%").addClass("k-textbox").keydown(function(e){
setTimeout(function(){
$(e.target).trigger("change");
});
});
}
}
}
I've made an example here:
http://dojo.telerik.com/ApukU

Multiple kendo grid from single datasource

I have 4 kendo grids in four tabs of a single tabstrip. The requirement is to populate them based on a single textbox input. How do I populate all four of them from a single datasource?
You should have a datasource which will get data.
Foreach grid have a different datasource.
In the grids datasource initialization do something like:
dataSource: new kendo.data.DataSource({ data: globalDataSource.data() }),
Then you can apply filters foreach grid's datasource inidividually, like:
filter: { field: "name", operator: "startswith", value: "Jane" }
Or you can set each grid datasource based on condition:
if (condition){
$("#grid1").data("kendoGrid").setDataSource(globalDataSource);
}
else{
$("#grid1").data("kendoGrid").setDataSource(new kendo.data.DataSource({data: [] }););
}

Kendo UI grid (javascript) - how to populate cells via call to function?

My dataSource data object is a collection of items (500+):
{
var oftype; // can be 1, 2, 3 etc.
var value; // string value of variable length
}
when displaying it in Kendo grid I am showing "value" but, instead of "oftype" values of 1,2,3 etc I'd like to display description of "oftype". I have a function
getDescription (oftype); that returns a string.
Question:
how can I define kendo grid so it uses function getDescription to populate column "oftype"?
Thank you.
Use template in the column, like:
template: "#: getDescription(oftype) #"
Demo

how to give a kendo ui autocomplete widget with multiple values, the css functionality of a kendo ui multiselect widget

I am wondering if there's an easy way to have the multiselect widget's css functionality shown in this demo
http://demos.kendoui.com/web/multiselect/index.html
applied to an autocomplete widget.
If the only reason for using autocomplete is that the list of values is huge and you want to do server side filtering (serverFiltering) with a multiselect widget as well. You just need to define serverFiltering as true.
Example:
var ds = new kendo.data.DataSource({
transport: {
read: {
url : "getData.php"
}
},
serverFiltering: true
});
$("#items").kendoMultiSelect({
dataValueField: "name",
dataTextField : "name",
dataSource : ds
});
You will receive a some additional parameters saying what the user has typed so far and you server can return only the data that meets the condition.
This JSFiddle (http://jsfiddle.net/OnaBai/rpDuL/) tries to show you how it works. You can start typing a country name and see that it actually filters the data. Since this is just JavaScript I've simulated server filtering implementing a read function that greps the data for those records meeting the condition.

Kendo Grid: Server side pagination without a "total"

With the particular database server we are using it's just as expensive to run a COUNT() query as it is to run the actual query, so I'd prefer to not display the count at all.
Normally, outside of kendo grid, I would just display previous and next buttons but not show the total count. Is it possible to achieve something similar with Kendo Grid?
Set the numeric property of the pageable object in your kendo grid options. That should disable the numeric buttons for you:
$("#grid").kendoGrid({
pageable: {
numeric: false
}
});
See http://docs.kendoui.com/api/web/grid#configuration-pageable.numeric for more info
To set the data to a specific count, in your kendo datasource options, use the schema.total function to return some large value to give you enough paged data:
var dataSource = new kendo.data.DataSource({
schema: {
total: function(response) {
return 100000000;
}
}
});

Resources