У меня есть сетка jquery для кендо с информацией об элементе и поле поиска в заголовке сетки, которое использует шаблон кендо.Когда я пишу что-то в окне поиска, то узнаю нужный элемент из сетки элементов - это моя функциональность, но я провал.В этой ситуации как решить эту проблему
Я пытался использовать вложенную модель источника данных кендо для представления объекта списка в схеме, выполнять фильтрацию кендо, вложенную сетку кендо и т. Д.
(сетка кендо)
toolbar: kendo.template($("#search-template").html()),
sortable: true,
columns: [
{ selectable: true, width: "50px" },
{
field: "item_name",
title: "Item info",
template: "Name: #= (item_name == null) ? '' : item_name#",
//"Category: #= (category_name == null) ? '' : category_name# </br>" +
//"Add Date: #= kendo.toString(kendo.parseDate(added_date, 'yyyy-MM-dd'), 'dd/MM/yyyy')# </br>" +
//"Unit: #= (unit_name == null) ? '' : unit_name # </br>" +
//"#= (item_description == null) ? '' : item_description #",
width: "200px"
},
{
field: "item_id",
title: "Image",
template: '<img src="../../Content/project-asset/item_images/img_#= typeof item_id == "undefined" || item_id == null ? "no-image.jpg" : item_id #.jpg" onerror = "imgError(this)" style="height: 90px;align-content: center;">',
width: "120px"
},
{
field: "inv_brands_items",
title: "Brand Details",
template: kendo.template($("#itemListTemplate").html()),
width: "650px"
},
(шаблон заголовка)
<script type="text/x-kendo-template" id="search-template">
<div class="refreshBtnContainer">
<a href="\\#" class="k-pager-refresh k-link k-button" id="refreshGrid" title="Refresh"><span class="k-icon k-i-reload"></span></a>
</div>
<div class="toolbar">
<label class="category-label" for="category">Search your item:</label>
<input type="text" id="filter" style="width: 200px; height: 35px; color: black;" />
</div>
</script>
````````````
(grid list data show template)
```````
<script id="itemListTemplate" type="text/x-kendo-tmpl">
<table class="table table-hover table-bordered transaction-table mb-0 SetBorder">
<thead>
<tr>
<th class="SetBorder">Brand</th>
<th class="SetBorder">Barcode</th>
<th class="SetBorder">Store</th>
<th class="SetBorder">Location</th>
<th class="SetBorder">Cost Price</th>
<th class="SetBorder">Sale Price</th>
<th class="SetBorder">Reorder Level</th>
</tr>
</thead>
<tbody>
#
for (var i = 0; i < inv_items_brands.length; i++)
{
var brandName = inv_items_brands[i].brand_name;
var barcode = inv_items_brands[i].barcode;
var store = inv_items_brands[i].store_name;
var location = inv_items_brands[i].store_location_name;
var costPrice = inv_items_brands[i].cost_price;
var salePrice = inv_items_brands[i].sale_price;
var reorderLevel = inv_items_brands[i].reorder_level;
#
<tr>
<td>
#= brandName != null ? brandName:'' #
</td>
<td>
#= barcode != null ? barcode:'' #
</td>
<td>
#= store != null ? store:'' #
</td>
<td>
#= location != null ? location:'' #
</td>
<td>
#= costPrice != null ? costPrice:'' #
</td>
<td>
#= salePrice != null ? salePrice:'' #
</td>
<td>
#= reorderLevel != null ? reorderLevel:'' #
</td>
</tr>
# } #
</tbody>
</table>
</script>
(datasource schema)
`````````
schema:
{
model:
{
id: "item_id",
fields: {
item_id: { type: "number" },
item_name: { type: "string" },
item_category_id: { type: "number" },
category_name: { type: "string" },
is_consumable: { type: "boolean" },
salable: { type: "boolean" },
purchasable: { type: "boolean" },
item_description: { type: "string" },
added_by: { type: "number" },
added_date: { type: "date" },
update_by: { type: "number" },
update_date: { type: "date" },
has_serial_no: { type: "boolean" },
has_expiry_date: { type: "boolean" },
unit_id: { type: "number" },
unit_name: { type: "string" },
is_deleted: { type: "boolean" },
is_service: { type: "boolean" },
brand_id: {
type: "number",
from: "inv_items_brands.brand_id"
},
barcode: {
type: "string",
from: "inv_items_brands.barcode"
},
brand_name: {
type: "string",
from: "inv_items_brands.brand_name"
},
store_id: {
type: "number",
from: "inv_items_brands.store_id"
},
store_name: {
type: "string",
from: "inv_items_brands.store_name"
},
store_location_id: {
type: "number",
from: "inv_items_brands.store_location_id"
},
store_location_name: {
type: "string",
from: "inv_items_brands.store_location_name"
},
cost_price: {
type: "string",
from: "inv_items_brands.cost_price"
},
sale_price: {
type: "string",
from: "inv_items_brands.sale_price"
},
reorder_level: {
type: "number",
from: "inv_items_brands.reorder_level"
}
}
функциональность фильтра
$('#filter').on('input',
function(e) {
var grid = $('#grid').data('kendoGrid');
var columns = grid.columns;
console.log(columns);
var filter = { logic: 'or', filters: [] };
columns.forEach(function (x) {
console.log("Field -" + x.field);
if (x.field) {
console.log(grid.dataSource.options.schema.model.fields);
console.log(x.field);
var type = grid.dataSource.options.schema.model.fields[x.field].type;
console.log("Type -" + type);
if (type === 'string') {
filter.filters.push({
field: x.field,
operator: 'eq',
value: e.target.value
});
}else if (type === 'number') {
if (isNumeric(e.target.value)) {
filter.filters.push({
field: x.field,
operator: 'eq',
value: e.target.value
});
}
} else if (type === 'date') {
var data = grid.dataSource.data();
for (var i = 0; i < data.length; i++) {
var dateStr = kendo.format(x.format, data[i][x.field]);
if (dateStr.startsWith(e.target.value)) {
filter.filters.push({
field: x.field,
operator: 'eq',
value: data[i][x.field]
});
}
}
} else if (type === 'boolean' && getBoolean(e.target.value) !== null) {
var bool = getBoolean(e.target.value);
filter.filters.push({
field: x.field,
operator: 'eq',
value: bool
});
}
}
});
````````