I have a kendo grid,and treeview with checkboxes in my application.I want to filter the grid based on treeview checkbox selection,i tried this one but its not working properly
my treeview code is
$("#treeview").on("change", function (e) {
var ds = $("#grid").data("kendoGrid").dataSource;
ds.filter([
{"logic":"or",
"filters":[
{
"field":"OrderId",
"operator":"eq",
}
]} ]);
});
my fiddle is http://jsfiddle.net/RHh67/66/
In treeview on change event you need to catch the checked nodes,and then filter the grid datasource based on your condition with field,operator and value of the treeview selected node.
$("#treeview").on("change", function (e) {
var selected = $('#treeview :checked').closest('li');
var ds = grid.dataSource;
var filter = {
logic : "or",
filters: []
};
This is the updated fiddle:
http://jsfiddle.net/RHh67/87/
Cheers,
Happy coding
Related
I have a application that has a kendo grid.
I can filter the grid using several dropdownlists that are outside the grid.
When I click on search, I add filters to the datasource filter list. For example,
var dataSource = $("#grid").data("kendoGrid").dataSource;
var dataSourceFilterQuery = new Array();
if ($("#something").data("kendoDropDownList").value() !== null) {
dataSourceFilterQuery.push({ field: "something", operator: "IsGreaterThanOrEqualTo", value: ($("#something").data("kendoDropDownList").value()) });
}
dataSource.filter(dataSourceFilterQuery);
Then I get the results I want. It works.
I then have the possibility of saving the values of all the dropdownlists as one filter in localStorage.
const filtersObject = {
Something: whatever.value(),
...
};
this.storage.setItem("Filter", JSON.stringify(filtersObject));
When I restart the application, the dropdownlists are populated with whatever is in localStorage
const filter = JSON.parse(localStorage.getItem("Filter"));
$("#something").data("kendoDropDownList").value(filters.whatever || "");
}
The thing is, I wanted to add these filters, if they exist on localStorage, to the datasource when the application starts so that the user can see the results of the filter he saved when the applications starts and not have to click on search again.
So, what I want is to do apply this
var dataSource = $("#grid").data("kendoGrid").dataSource;
var dataSourceFilterQuery = new Array();
if ($("#something").data("kendoDropDownList").value() !== null) {
dataSourceFilterQuery.push({ field: "something", operator: "IsGreaterThanOrEqualTo", value: ($("#something").data("kendoDropDownList").value()) });
}
dataSource.filter(dataSourceFilterQuery);
before the grid is displayed.
Is this possible?
Tks in advance.
Configure the Grid with
autoBind: false
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-autoBind
and when the page loads, call your filter setup, then trigger the grid load manually (via dataSource.read())
I am using Kendo UI v2014.1.528
Binding data in Kendo Grid like below
$("#list485").kendoGrid({
dataSource: dataSource,
sortable: true,
columns: [
//Column List
]
);
It gives me a grid with "Sort" and "Add New Record" feature.
If i click on "Add New Record" button, it adds an empty record in the first row of the grid. This is fine.
But if i sort the grid on any column and then click on "Add New Record" button, the empty row for new record gets added somewhere in between the existing rows.
Can someone help me understand and fix this issue?
You can clear the sorting or filtering from the Kendo grid while clicking on the custom Add button.
I have added the Razor code
Code to add a custom Add button to catch the Javascript
.ToolBar(toolbar =>{ toolbar.Custom().Name("cmdAddRecord")
.Text("Add New Record")
.HtmlAttributes(new { #id = "cmdAddRecord" }); })
Javascript to clear the sorting and filtering.
$("#cmdAddRecord").click(function (e) {
var grid= $("#Grid").data("kendoGrid");
var sorting = grid.dataSource.sort();
var filtering = grid.dataSource.filter();
if (filtering) {
grid.dataSource.filter(null);
}
if (sorting) {
grid.dataSource.sort(null);
}
grid.addRow();
e.preventDefault();
});
I have both TreeView and Grid on the same page and I need to populate the TreeView from the grid data. So the flow is like this:
User selects a something from a dropdown and clicks on a button -> web service call -> populate the grid with data from web service -> populate TreeView with some massage of the grid data
The logic to populate TreeView is currently in the grid.dataSource.fetch() method like this:
// this function is called when user clicks on the button
function getData() {
grid.dataSource.read();
grid.dataSource.page(1);
grid.dataSource.fetch(function () {
var data = this.data();
... // logic to massage the data to populate TreeView
...
}
}
However, if the user selects another thing from the dropdown and clicks on the button again, this.data() seems to have the old data (fromt the 1st time), as a result, TreeView is populated with old data.
Which is the right event/method other than fetch() I should use to put my logic in?
I think you should use kendoGrid's dataBound event.
http://docs.kendoui.com/api/web/grid#events-dataBound.
Here is the sample code for kendoGrid dataBound event handler:
function Grid_DataBound(e) {
console.log("Grid_DataBound", e);
var grid = e.sender;
var dataItems = grid.dataSource.view();
console.log(dataItems);
var treeData = new Array();
for (var i = 0; i < dataItems.length; i++) {
treeData.push({
OrderId: dataItems[i].OrderID,
ShipName: dataItems[i].ShipName
});
}
var dataSource = new kendo.data.HierarchicalDataSource({
data: treeData,
schema: {
model: {
id: "OrderId"
}
}
});
$("#treeview").data("kendoTreeView").setDataSource(dataSource);
}
Let me know if you need full sample code.
I have a Kendo grid with a checkbox as a column along with other columns. I want to get all the rows where the checkbox is checked.
Please give me some idea.
Why not use the multi select feature of Kendo ui Grid
var checkDataSource = new kendo.data.DataSource({
data: checks
});
$("#CheckGrid").kendoGrid({
dataSource: checkDataSource,
change: CheckGridOnChange,
selectable:"multiple",
...
});
function CheckGridOnChange() {
var data = checkDataSource.view(),
selected = $.map(this.select(), function(item) {
return data[$(item).index()].CheckId;//CheckId is my unqiue id for my data, yours would probably be different
});
var ids = selected.join(",");
}
Ref url: Kendo ui grid Events Just hold control and select multiple rows
I have a kendo treeview i use this function to bind event change
change: function (e) {
if (e.field == "checked") {
gatherStates(e.items);
alert(e.items);
}
}
If i want to know the 'dad node'(the node that contain the selected child) of the selected child?
You can get the parent node from e.node:
tree.dataSource.bind("change", function (e) {
if (e.field == "checked") {
var node = e.items[0];
console.log("node", node.text);
console.log("parent", e.node.text);
}
});
Example here (http://jsfiddle.net/OnaBai/ECnef/)
i have a same kind of issue with kendo treeview checkboxes in IE8
jQuery("#treeview").kendoTreeView({
dataSource: ss,
dataTextField: ["ss_"],
checkboxes: {
checkChildren: true
},
select: function (e) {
jQuery(e.node).find("input")[0].click();
}
});
var treeview = jQuery("#treeview").data("kendoTreeView");
treeview.expand(".k-item");
treeview.dataSource.bind("change", onCheckboxClicked);
selecting the text of checkbox fires the select event of treeview and in this event i click the checkbox manually (my requirements)...which in turn fires change event of data source in IE-9. But it doesn't fire the change event of datasource in IE-8. What is the issue?
Thanks