I have a kendo treeview like this:
sectionTreeView.kendoTreeView({
dataValueField: "Id",
dataTextField: "Name",
checkboxes: {
checkChildren: true
}
});
I use the following code to programmatically select the root node:
divTreeView.getKendoTreeView().select(".k-item:first");
However, the first node is only highlighted but its checkbox remains unchecked and so is every child node below it. How do I make every checkbox checked?
Try checking the checkbox after you have selected the node like this:
var treeView = divTreeView.getKendoTreeView();
// you need to select the node for this to work
treeView.select(".k-item:first");
treeView.select().find(".k-checkbox input").prop("checked", true).change();
$("#accountsTree .k-item input[type=checkbox]").attr('checked', 'checked');
Related
I have a grid/detail grid set up. On the detail grid, I have a drop down list. The editor function for the drop down is:
function ActionTypeEditor(container, options) {
$('<input id="ddlActionType" data-text-field="name" data-value-field="id"> data-bind="value:' + options.field + '" ').appendTo(container).kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
autoBind: false,
dataSource: GC.ViewModels.Config.AlertAction.actionTypeArray
}).appendTo(container).data("kendoDropDownList").text(options.model.ActionTypeId);
var dropdownlist = $("#ddlActionType").data("kendoDropDownList");
dropdownlist.value(options.model.ActionTypeId);
}
This works fine when I edit one row on a detail grid associated with the "parent" grid row. However, if I edit another detail row associated with another parent row BELOW the first, the next to last stamement
where I select the dropdown list always gets the first one on the page, rather than the one for the lower row. How do I get the correct drop
down list?
Why, you use
var dropdownlist = $(container.find("#ddlActionType")).data("kendoDropDownList");
instead.
You're welcome!
I have my data already in a nested unordered list. I am trying to add checkboxes to each node. This does not seem to work. Here is a small fiddle.
http://jsfiddle.net/ge3Qg/
$("#treeview2").kendoTreeView({
dataSource: items,
checkboxes: {
checkChildren: true
},
dataTextField: ["CategoryName", "ProductName"]
});
$("#treeview").kendoTreeView({
checkboxes: true
});
What am I missing?
Indeed, the checkboxes configuration option relies on client-side templates, which are not taken into account when the content has been rendered from the server. In more recent versions of Kendo (2012.Q3+), you can render the checkboxes in the list, and they will be aligned correctly. See the updated fiddle.
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
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
}
}
Good morning, I'm working on a jqGrid that have the multiselection active.
I need to limit the selection of the row only using the multisel box, not by clicking everywhere on the row.
Thats's because I need to do some action by clicking links on some cells and I won't alter the active multiselection.
I tried to set the multiboxonly property, but it's not what I need.
I didn't find anything else to customize this function of the grid.
You can control on which click the row will be selected with respect of your custom beforeSelectRow event handler. If the handler return true, the row will be selected. If you return false the row will be not selected.
The second parameter of beforeSelectRow is event object, e.target is the DOM element which was clicked. You can get the cell (<td>) in which the click done with $(e.target).closest('td'). Then you can use $.jgrid.getCellIndex to get the index of the cell insido of the row. The index in the colModel should point to the 'cb' column which contain the checkboxes. So the code could be the following:
beforeSelectRow: function (rowid, e) {
var $myGrid = $(this),
i = $.jgrid.getCellIndex($(e.target).closest('td')[0]),
cm = $myGrid.jqGrid('getGridParam', 'colModel');
return (cm[i].name === 'cb');
}
The corresponding demo you can see here.
I would like to suggest easier solution:
beforeSelectRow: function(rowid, e) {
return $(e.target).is('input[type=checkbox]');
},
When multiselect is set to true, clicking anywhere on a row selects that row; when multiboxonly is also set to true, the multiselection is done only when the checkbox is clicked.
So the answer would be:
multiboxonly: true