Skip to content

Commit 19ed852

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 79cccf5 commit 19ed852

File tree

5 files changed

+464
-2
lines changed

5 files changed

+464
-2
lines changed

‎docs/controls/data-management/grid/appearance.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,7 @@ If the total number of items is large and the scrolling is fast, the table of th
217217
* Refreshing or replacing the Grid data in the virtual mode has to be accompanied by resetting the position of the virtual scrollbar to zero—for example, by using `$('#GridID .k-scrollbar').scrollTop(0);`. In some scenarios, you might also need to call the [`refresh()` method](http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-refresh).
218218
* Programmatic scrolling to a particular Grid row is not supported when virtual scrolling is enabled, because it is not possible to reliably predict the exact scroll offset of the row.
219219
* When the Grid is `navigatable`, keyboard navigation supports only the `Up Arrow` and `Down Arrow` keys. The `Page Up` and `Page Down` key scrolling is not supported.
220-
* The Grid does not persist [selection](#selection) when virtual scrolling occurs. To achieve this behavior, [use this custom implementation]({% slug howto_persist_row_selection_paging_sorting_filtering_grid %}).
220+
* The Grid does not persist [selection](#selection) when virtual scrolling occurs. To achieve this behavior, [use this custom implementation]({% slug howto_persist_row_selection_paging_sorting_filtering_grid %}). The new [persistSelection](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/persistselection) can work with single selection using the following [example]({%slug grid-virtual-scrolling-with-persist-single-selection %}). The multiple selection is not recomended as the old page is removed from the DOM when scrolling and this can breake the selection as the DOM elements do not exist after scrolling to the new page.
221221

222222
When virtual scrolling is not supported or recommended, revert to standard paging or non-virtual scrolling without paging, depending on the number of data items.
223223

‎docs/knowledge-base/grid-multiple-filter-criterion.md‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
---
2+
title: Create a filter widget with multiple filter criterion
3+
description: An example on how to create a filter widget with multiple filter criterion.
4+
type: how-to
5+
page_title: Create a filter widget with multiple filter criterion | Kendo UI Grid
6+
slug: grid-multiple-filter-criterion
7+
tags: grid, multiple, filter, filters, criterion, extra, more, filtering, filtratrion, many
8+
res_type: kb
9+
component: grid
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tr>
16+
<td>Product</td>
17+
<td>Progress Kendo UI Grid</td>
18+
</tr>
19+
<tr>
20+
<td>Progress Kendo UI version</td>
21+
<td>2018.1.117</td>
22+
</tr>
23+
</table>
24+
25+
## Description
26+
27+
How can I create a filter widget with multiple filter criterion?
28+
29+
## Solution
30+
31+
Within the [filterMenuInit](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/filtermenuinit) event handler add the required number of inputs and when the `click` event of the submit button is clicked build the filter query and filter the data source using the [flter method](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter).
32+
33+
34+
```html
35+
<h1>Ship Name column has custom filte UI</h1>
36+
<div id="example">
37+
<div id="grid"></div>
38+
<script>
39+
$(document).ready(function() {
40+
$("#grid").kendoGrid({
41+
dataSource: {
42+
type: "odata",
43+
transport: {
44+
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
45+
},
46+
schema: {
47+
model: {
48+
fields: {
49+
OrderID: { type: "number" },
50+
Freight: { type: "number" },
51+
ShipName: { type: "string" },
52+
OrderDate: { type: "date" },
53+
ShipCity: { type: "string" }
54+
}
55+
}
56+
},
57+
pageSize: 20,
58+
serverPaging: true,
59+
serverFiltering: true,
60+
serverSorting: true
61+
},
62+
height: 550,
63+
filterable: true,
64+
sortable: true,
65+
pageable: true,
66+
columns: [{
67+
field:"OrderID",
68+
filterable: false
69+
},
70+
"Freight",
71+
{
72+
field: "OrderDate",
73+
title: "Order Date",
74+
format: "{0:MM/dd/yyyy}"
75+
}, {
76+
field: "ShipName",
77+
title: "Ship Name"
78+
}, {
79+
field: "ShipCity",
80+
title: "Ship City"
81+
}
82+
],
83+
filterMenuInit:onFilterMenuInit
84+
});
85+
86+
function onFilterMenuInit(e){
87+
if(e.field == 'ShipName'){
88+
e.container.html('');
89+
$('<div id="logic">')
90+
.appendTo(e.container)
91+
.kendoDropDownList({
92+
dataTextField:'name',
93+
dataValueField:'value',
94+
dataSource: [{name:'AND',value:'and'},{name:'OR',value:'or'}],
95+
96+
})
97+
98+
for(var i = 0; i < 3; i++){
99+
$('<div id="operator'+i+'">')
100+
.appendTo(e.container)
101+
.kendoDropDownList({
102+
dataTextField:'name',
103+
dataValueField:'value',
104+
dataSource: [
105+
{name:'Is equal to',value:'eq'},
106+
{name:'Is not equal to',value:'neq'},
107+
{name:'Contains',value:'contains'}
108+
109+
],
110+
111+
})
112+
113+
$('<input class="k-textbox" id="value'+i+'">')
114+
.appendTo(e.container)
115+
}
116+
117+
118+
var submit = $('<button type="submit" class="k-button k-primary">Filter</button>')
119+
120+
$('<div >')
121+
.append(submit)
122+
.append('<button type="reset" class="k-button">Clear</button>')
123+
.appendTo(e.container)
124+
125+
submit.on('click', function(){
126+
var grid = $('#grid').data('kendoGrid');
127+
var logic = $('#logic').data('kendoDropDownList').value();
128+
var filterQuery =grid.dataSource.filter();
129+
130+
if(filterQuery){
131+
removeFiltersForField(filterQuery,'ShipName')
132+
}else{
133+
filterQuery= {logic:'and', filters:[]};
134+
}
135+
136+
var shipNameFilter = {logic:logic, filters:[]};
137+
138+
for(var i =0; i < 3; i++){
139+
shipNameFilter.filters.push({
140+
field:'ShipName',
141+
operator: $('operator'+i).data('kendoDropDownList').value(),
142+
value: $('value'+i).val()
143+
})
144+
}
145+
146+
filterQuery.filters.push(shipNameFilter)
147+
148+
grid.dataSource.filter(filterQuery);
149+
150+
151+
})
152+
153+
}}
154+
});
155+
156+
function removeFiltersForField(expression, field) {
157+
if (expression.filters) {
158+
expression.filters = $.grep(expression.filters, function(filter) {
159+
removeFiltersForField(filter, field);
160+
if (filter.filters) {
161+
return filter.filters.length;
162+
} else {
163+
return filter.field != field;
164+
}
165+
});
166+
}
167+
}
168+
</script>
169+
</div>
170+
```

‎docs/knowledge-base/grid-virtual-scrolling-with-persist-single-selection.md‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
---
2+
title: How to Maintain Row Selection on Virtual Scrolling
3+
description: An example on how to persist single selection with virtualization
4+
type: troubleshooting
5+
page_title: Virtual Scrolling With Persist Single Selection
6+
slug: grid-virtual-scrolling-with-persist-single-selection
7+
position:
8+
tags: grid, selection, virtual
9+
ticketid: 1139830
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tr>
16+
<td>Product Version</td>
17+
<td>2018.1 117</td>
18+
</tr>
19+
<tr>
20+
<td>Product</td>
21+
<td>Grid for Progress® Kendo UI®</td>
22+
</tr>
23+
</table>
24+
25+
26+
## Description
27+
28+
I want to persist selection when the virtual scrolling is used.
29+
30+
## Solution
31+
32+
This could be achieved by programmatically handling the items selection collection on the Grid [change event](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/change).
33+
34+
Please check the following example demonstrating this:
35+
36+
````html
37+
<div id="example">
38+
<div id="grid"></div>
39+
<script>
40+
$(document).ready(function() {
41+
$("#grid").kendoGrid({
42+
dataSource: {
43+
type: "odata",
44+
serverPaging: true,
45+
serverSorting: true,
46+
pageSize: 100,
47+
transport: {
48+
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
49+
},
50+
schema: {
51+
model: {
52+
id:"OrderID"
53+
}
54+
}
55+
},
56+
height: 543,
57+
scrollable: {
58+
virtual: true
59+
},
60+
change: function(e) {
61+
var selectedRows = this.select();
62+
var dataItem = this.dataItem(selectedRows[0]);
63+
e.sender._selectedIds= {};
64+
e.sender._selectedIds[ dataItem.OrderID ]= true;
65+
},
66+
selectable:true,
67+
persistSelection:true,
68+
sortable: true,
69+
columns: [
70+
{ field: "OrderID", title: "Order ID", width: 110 },
71+
{ field: "CustomerID", title: "Customer ID", width: 130},
72+
{ field: "ShipName", title: "Ship Name", width: 280 },
73+
{ field: "ShipAddress", title: "Ship Address" },
74+
{ field: "ShipCity", title: "Ship City", width: 160 },
75+
{ field: "ShipCountry", title: "Ship Country", width: 160 }
76+
]
77+
});
78+
});
79+
</script>
80+
<style>
81+
82+
/*horizontal Grid scrollbar should appear if the browser window is shrinked too much*/
83+
#grid table
84+
{
85+
min-width: 1190px;
86+
}
87+
88+
</style>
89+
</div>
90+
<div id="example">
91+
<div id="grid"></div>
92+
<script>
93+
$(document).ready(function() {
94+
$("#grid").kendoGrid({
95+
dataSource: {
96+
type: "odata",
97+
serverPaging: true,
98+
serverSorting: true,
99+
pageSize: 100,
100+
transport: {
101+
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
102+
},
103+
schema: {
104+
model: {
105+
id:"OrderID"
106+
}
107+
}
108+
},
109+
height: 543,
110+
scrollable: {
111+
virtual: true
112+
},
113+
change: function(e) {
114+
var selectedRows = this.select();
115+
var dataItem = this.dataItem(selectedRows[0]);
116+
e.sender._selectedIds= {};
117+
e.sender._selectedIds[ dataItem.OrderID ]= true;
118+
},
119+
selectable:true,
120+
persistSelection:true,
121+
sortable: true,
122+
columns: [
123+
{ field: "OrderID", title: "Order ID", width: 110 },
124+
{ field: "CustomerID", title: "Customer ID", width: 130},
125+
{ field: "ShipName", title: "Ship Name", width: 280 },
126+
{ field: "ShipAddress", title: "Ship Address" },
127+
{ field: "ShipCity", title: "Ship City", width: 160 },
128+
{ field: "ShipCountry", title: "Ship Country", width: 160 }
129+
]
130+
});
131+
});
132+
</script>
133+
<style>
134+
135+
/*horizontal Grid scrollbar should appear if the browser window is shrinked too much*/
136+
#grid table
137+
{
138+
min-width: 1190px;
139+
}
140+
141+
</style>
142+
</div>
143+
144+
````

0 commit comments

Comments
 (0)