I am trying to implement filter which can support relative fields i.e. the first field would be table names once user choose any table then second field gets populated with all columns available for selected table. Now users can choose operator and pass value for filtering the column value. So basically I want to filter on basis of column's value. As I dont want to put all columns for all tables in one field because that makes my drop down very long as I have huge columns in some table and also user wont be able to search specific column easily hence I want to introduce one more field which is table drop down. Once user select from table drop down then column dropdown will only have selected table column which reduce the columns number and user can choose easily. see the attached screenshot for same. So the expression preview should be something like . e.g. "table1.column5 is equal to myvalue". How we can achieve this ? I tried using editortemplate of field property of kendo Filter widget and added field 2 as shown in attached screen shot but after that not able to get field 2 value in expression. Can someone suggest what are the other ways we can achieve this ?
I have recieved the answer for this question by telerik support team. Posting same here to help someone in future:
I went through several different scenarios, however the desired functionality is not supported with the current implementation of the Filter widget. The reason is that the filter that you see in the expression preview - "field is equal to value", is based upon the filter fields in the widget's and datasource configurations.
Example:
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
fields: {
name: { type: "string" },
age: { type: "number" },
city: {type: "string"},
money: {type: "number"}
}
}
}
In this case the name of the field must be one that is available in the model.fields configuration. In other words, in order for the filter to work properly, you'll need to have all of the table.column combinations inside the schema, example:
fields: {
table1.name: { type: "string" },
table1.age: { type: "number" },
table1.city: {type: "string"},
table1.money: {type: "number"},
table2.age: { type: "number" },
table2.city: {type: "string"},
table2.money: {type: "number"},
table3.age: { type: "number" },
table3.city: {type: "string"},
table4.money: {type: "number"},
...
}
An alternative approach that I can suggest is to filter the second dropdownlist based on the selection of the first. You should keep in mind that this doesn't change the expression itself, in other words you still won't be able to create a filter that has a table.column field name.
Example, table1 is selected in the first dropdown and we have name and age options in the second one:
Example, table2 is selected in the first dropdown and we have city and money options in the second one:
I've prepared an example which demonstrates the above functionality:
https://dojo.telerik.com/#gdenchev/AHAmocIM
DOJO link content in case link disabled in future:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.1.119/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.1.119/js/kendo.all.min.js"></script>
</head>
<body>
<div id="filter"></div>
<br /><br />
<script>
var data = [
{ name: "Jane Doe", age: 30, city: "City1", money: 60 },
{ name: "John Doe", age: 33, city: "City2", money: 90 }
];
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
fields: {
name: { type: "string" },
age: { type: "number" },
city: {type: "string"},
money: {type: "number"}
}
}
}
});
$("#filter").kendoFilter({
dataSource: dataSource,
expressionPreview: true
});
$(".k-filter-toolbar-item:eq(1)").on("click", function(e) {
let filter = $("#filter").data("kendoFilter");
filter.one("change", function(e) {
let filterRow = $(".k-filter-item:last").find(".k-filter-field");
let firstDropDown = filterRow.find("select").data("kendoDropDownList");
let secondDropDown = $("<input />")
.insertBefore(filterRow)
.kendoDropDownList({
dataSource: {
data: ["table1", "table2"]
},
change: function() {
let value = this.value();
let columnsForTableOne = [{text: "name", value: "name"},{text: "age", value: "age"}];
let columnsForTableTwo = [{text: "city", value: "city"},{text: "money", value: "money"}];
let data;
switch(value) {
case "table1": data = columnsForTableOne;
break;
case "table2": data = columnsForTableTwo;
break;
}
firstDropDown.dataSource.data(data);
}
}).data("kendoDropDownList");
});
});
</script>
</body>
</html>
Related
I have a Kendo Grid where the COR ABA No. may or may not be editable, depending on a value in the first column. So, if NOC Code=='C01', then COR ABA No. is editable, otherwise it is not.
I have achieved this by adding the Edit event on the columns and in that edit handler disabling the HTML input Kendo creates, when no editing is allowed. (In the grid definition, I have Editable(true) to start). I want instead to do this by doing the logic check in the DataBound event for the grid. That is, after all data is bound, iterate over the data, determine when the column should NOT be editable, and prevent this somehow. My idea is to simply remove the click handler that I ASSUME Kendo adds for a cell when using Editable(true) as stated above. Is this the way? Or how? Thanks!
I suggest another way, instead call closeCell() on edit event, if you do not want to allow the user to edit the cell. In doing so, the cell will not display an input when the user clicks it to edit it.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id" },
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" }
}
}
}
},
editable: "incell",
toolbar:["create"],
edit: function(e) {
if (!e.model.isNew() && e.container.index() == 0) {
var grid = $("#grid").data("kendoGrid");
grid.closeCell();
}
}
});
</script>
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'm trying to implement some functionality in "onchange" of text box in telerik kendo grid. But it is not firing in change; instead it's firing on onBlur.
The code is here. demo
To track the changes in the editors inside the column templates you should use different approach. Please check the example below:
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: kendo.template($("#name-template").html())
}],
dataSource: {
data: [ {id: 1, name: "Jane Doe" }, {id: 2, name: "John Doe" } ],
//schema is required for enabling valid CRUD operations
schema: {
model: {
id: "id",
fields: {
id: {type: "number"},
name: {type: "string"}
}
}
}
}
});
var grid = $("#grid").data("kendoGrid");
grid.table.on("change", "input", function(e) {
alert("change");
//optionally update the underlying model:
var editor = $(this);
var dataItem = grid.dataItem(editor.closest("tr"));
dataItem.set("name", editor.val());
});
Another option is to use the MVVM approach shown in the following demo:
http://dojo.telerik.com/Utino
I've used "onkeyup" event. It works :)
You should try "onkeypress" event. It will work as per your requirement.
I have developed a kendo UI grid in my HTML page and one of the columns is of type 'email'.
Now the problem is I cannot filter on the email type column data.
model: {
PrimaryEmail: { type: 'email' }
}
To give more clarity, if I enter any text in the filter, it always takes Equal to condition, and the dropdown list is blank to select the condition.
Please let me know if we have a solution for this.
Basically the KendoUI Model does not support such data type : "email", so either you have to declare your field to type: "string" or it would take default as "string"
however if you need to validate column of the Grid as an e-mail you should enable it in the column validation options
$("#grid").kendoGrid({
dataSource: {
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false },
PrimaryEmail: { type: "string", validation: { email: true, required: true} },
Username: { validation: { required: true} }
}
}
}
}
there is no type called email . The available options are "string", "number", "boolean", "date". The default is "string" .
You may use the string for the Email Type then you will have all the conditions