Add New Item When Filter Is Applied
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Product Version | 2020.3.1021 |
Description
How can I display the newly inserted items in the Grid when filtering is applied?
Solution
The filter condition is applied to the DataSource and as a result, when a new item is inserted, the values in it are empty, which, usually, does not match the specified filter and the new item is not visible.
To successfully add new items, apply the respective approach depending on the following scenarios:
When the Filter Is Initially Set
In this scenario, add the empty value to the initial filter condition.
filter: {
logic: "or",
filters: [{ //filter all products that contain "ch"
field: "ProductName",
operator: "contains",
value: "Ch"
},
{ //or products with empty string name (new records)
field: "ProductName",
operator: "eq",
value: ""
}]
}
The following example demonstrates how to implement the suggested approach.
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1 } },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
},
filter: {
logic: "or",
filters: [{ //filter all products that contain "ch"
field: "ProductName",
operator: "contains",
value: "Ch"
},
{ //or products with empty string name (new records)
field: "ProductName",
operator: "eq",
value: ""
}]
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
filterable: true,
pageable: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120 },
{ command: "destroy", title: " ", width: 150 }],
editable: true
});
});
</script>
Filter Is Initially Unknown and Is Applied by User
In most scenarios, the Grid does not have any filters that are initially set. The user can apply filters at some point and try to insert new records after this.
- Retrieve the applied filters in the
changeevent of the DataSource. - Add an additional filter that will match an empty value for the Model.
change: function (e) {
if (e.action == "add") {
var newItem = e.items[0];
var filter = this.filter();
var filters = filter.filters;
var noValueFilter = { field: "ProductName", operator: "eq", value: "" };
//add empty value to the filter conditions
var newFilter = {
logic: "or",
filters: [noValueFilter, filter]
};
this.filter(newFilter);
}
}
The following example demonstrates how to implement the suggested approach.
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1 } },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
},
change: function (e) {
if (e.action == "add") {
var newItem = e.items[0];
var filter = this.filter();
if (filter) {
var filters = filter.filters;
var noValueFilter = { field: "ProductName", operator: "eq", value: "" };
//add empty value to the filter conditions
var newFilter = {
logic: "or",
filters: [noValueFilter, filter]
};
this.filter(newFilter);
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
filterable: true,
pageable: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Discontinued", width: 120 },
{ command: "destroy", title: " ", width: 150 }],
editable: true
});
});
</script>