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
Related
I have kendo grid. This grid contains hierarchy of detail grids.
Can I take dataItem for this detail grid when I click by row?
You can use following callback code.
function(e) {
console.log($(e.target.closest('.k-grid')).data("kendoGrid").dataItem(e.target));
}
{
title: "Click",
width: "100px",
command: [
{
name: "Click",
click: function (e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
// You can access value of column by dataItem.columnID
}
}
]
}
Here is a command name 'Click' in kendo grid. When you will click on command, appropriate function will execute.
This work for me:
$("#main_grid_id").data("kendoGrid").dataItem($(e.currentTarget).closest("tr.k-detail-row").prev("tr"))
I have a simple application that binds to a view model using Knockout JS. It uses a foreach loop that fires the Knockout afterAdd event when a new item is added to the view model. The result is supposed to be a Kendo draggable that can be dropped on a target. For some reason I can't get the drop event on the target to fire.
JSFiddle
<button data-bind="click: $root.add">Add</button>
Drop target
var ViewModel = function () {
this.operations = ko.observableArray([]);
this.add = function () {
this.operations.push("drag");
}.bind(this);
this.bind = function () {
$(".draggable").kendoDraggable({
hint: function (e) {
$("#console").append("<li>firing hint</li>");
return e.clone();
},
});
$(".droptarget").kendoDropTarget({
drop: function (e) {
$("#console").append("<li>firing drop</li>");
}
});
};
};
ko.applyBindings(new ViewModel());
The problem is that you're instantiating the KendoDropTarget widget multiple times. If I click the Add button in your example kendoDropTarget() is invoked three times. If I add a guard against this (see http://jsfiddle.net/tj_vantoll/rk6qwsy4/1/) the drop event works as expected.
I have a treeview defined like
$("#treeview").kendoTreeView({
dataSource:homogenous,
dataBound: function(e){
$("#treeview").data("kendoTreeView").select(".k-item:first");
},
select: function(){
alert('selectd');
}
});
Initially the treeview is selecting. But it is not getting the alert of select. But when we selecting the node it is getting the alert. How should i get rid of them.
The select method won't fire the select event. You can however use the trigger method to fire any event:
dataBound: function(e){
$("#treeview").data("kendoTreeView").select(".k-item:first");
$("#treeview").data("kendoTreeView").trigger("select", {
node: $("#treeview .k-item:first")[0]
});
},
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
I am using kendo ui treeview widget control. I am dynamically getting the parents and child. How can i expand all the parents and child. I have wrote code:
var treeview = $('#tree').kendoTreeView({
dataSource: parent,
dataTextField: ["question", "answer", "parentvalue"]
});
treeview.expand('.k-item');
but it is not working. How can i do that.
If you are using remote dataSource you will have no luck expanding it in such way because the items are still not loaded and created.
Instead use the dataBound event of the TreeView and set the loadOnDemand property to false (so all the items are loaded initially then try to expand the items (you might need to do it recursevely) .
The .kendoTreeView() function actually returns the jQuery elements that the treeview was applied to, not the widget itself.
Instead, you need to do:
$("#my-treeview").data("kendoTreeView").expand(".k-item");
As is your code, you only get the element created but not the data associated with it. You rather have to use such code:
$('#tree').kendoTreeView({
dataSource: parent,
dataTextField: ["question", "answer", "parentvalue"]
});
var treeview = $("#your-treeview-id").data("kendoTreeView");
as indicated in my comments above (and not var treeview = $("#tree").kendoTreeView(...)).
function ExpandTree()
{
treeview = $("#MyTreeview").data("kendoTreeView");
if(treeview != undefined)
{
treeview.expand(".k-item");
}
}
function CollapseTree()
{
treeview = $("#MyTreeview").data("kendoTreeView");
if(treeview != undefined)
{
treeview.collapse(".k-item");
treeview.expand(".k-first"); //To expand only parent
}
}