I'm creating a scheduler by using Kendo UI Scheduler, with horizontal grouping like this.
My problem is that I don't want one calendar for each resource like the mentioned example does. I only want one calendar displayed, but each day will provide one colomn for each resource. I've found an example that does exactly what I want here (check both "group by speaker" and "group by date" and then select week view), but this example is for Telerik (Kendo is the javascript version of telerik). I've tried to translate this example into working for Kendo UI by using the below code, but none of the options work.
Basic kendo code
$('#scheduler').kendoScheduler({
date: new Date(),
views: [
{ type: "day" },
{ type: "week", selected: true }
],
group: {
resources: ["Owner"]
},
resources: [
{
field: "ownerId",
name: "Owner",
title: "Owner",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
]
}
]
});
How I've tried to group by date and then by resource
resources: ["date", "Owner"]
resources: ["Date", "Owner"]
resources: [Date, "Owner"]
I have not provided another resource called "date"/"Date". In the Telerik example above you did not need to do that. The scheduler understod that you wanted to group by date.
Related
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?
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 the KendoUI Kendo UI v2015.1.408 version. I want to create a grid withe filter menu , but the javascript error "kendoFilterCell is not a function" is thrown. Below is my code ( Actually I just using one of the kendo UI example:
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
filterable: {`enter code here`
mode: "menu, row"
},
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
In Kendo UI, with the Grid widget, I cannot figure out how to hide the extra column at the end of the table, the one that does nothing and is seeminlgy reserved for the scroll bar.
Anyone figure this out? It's in all the examples: http://demos.telerik.com/kendo-ui/web/grid/index.html
Use the scrollable configuration option:
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
scrollable: false
});
I have a kendo ui grid. Let's say that the JS variable pointing to the grid is called grid. How can I go to page 3 programmatically? Thanks.
You might to use:
grid.dataSource.query({ page: 3, pageSize: 20 });
Documentation in here.
or:
grid.dataSource.page(3);
Documentation in here
Answer is just set it pate: 1 when datasource created
var dataSource = new kendo.data.DataSource({
data: [
{ name: "Tea", category: "Beverages" },
{ name: "Coffee", category: "Beverages" },
{ name: "Ham", category: "Food" }
],
page: 1,
// a page of data contains two data items
pageSize: 2
});