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
}
}
Related
I'm using kendo-ui with angularJS 1.5 and I have a simple kendo-grid bound to a datasource with transport configured using functions as follows:
private buildDataSource() {
this.dataSource = new kendo.data.DataSource({
autoSync: true,
change: this.dataSourceChangeHandler.bind(this),
error: this.dataSourceErrorHandler.bind(this),
transport: {
read: this.dataSourceRead.bind(this),
create: this.dataSourceCreate.bind(this),
update: this.dataSourceUpdate.bind(this),
destroy: this.dataSourceDestroy.bind(this)
},
[...]
});
}
private dataSourceUpdate(e: kendo.data.DataSourceTransportUpdate) {
var updatedItem: KendoCosto = e.data;
[...]
e.success(updatedItem, undefined, undefined);
}
The grid options looks like this:
this.gridOptions = {
dataSource: this.dataSource,
change: this.gridChangeHandler.bind(this),
editable: {
mode: "incell",
confirmation: false
},
navigatable: true,
selectable: "multiple, cell",
allowCopy: true,
toolbar: [
"create"
],
[...]
The grid works fine and the read, create, update, destroy behave as expected.
My problem is that whenever I change a value in a grid's cell and hit enter, I would like to have keyboard navigation "placeholder" (the grid has navigatable: true) to remain on the edited cell, but it happens to be moved to the upper left corner cell.
This behavior happens only when dataSource's autoSync is set to true.
I've also tried to "set" the current cell via the ".current" method of the grid's api but it doesn't seem to work:
// this is bound to the grid's change event and it is supposed to
// store the currently selected cell in a property of the class
// that builds both the datasource and the grid
private gridChangeHandler(e: kendo.ui.GridNavigateEvent)
{
this.thisGrid = this.thisGrid || e.sender;
this.currentCell = e.sender.current();
}
// Then on the change event of the datasource I do
private dataSourceChangeHandler(event: kendo.data.DataSourceChangeEvent)
{
if (this.currentCell && this.thisGrid) {
this.thisGrid.select(this.currentCell);
this.currentCell = undefined;
}
}
any suggestions ?
Thanks in advance !
--- edit ---
The code I posted/pasted in the comment is absolutely unreadable so I'm repeating the code here:
To have your solution work, I had to modify my dataBound handler this way.
private gridDataBoundHandler(e: kendo.ui.GridDataBoundEvent) {
if (this.thisGrid && this.currentCell) {
setTimeout((() => {
// this.thisGrid.editCell(this.currentCell);
this.thisGrid.current(this.currentCell);
}).bind(this)
, 10);
}
}
without the timeout, the navigation placeholde was still resetting back to the upper left corner.
First, I think the grid change event is the wrong event to attach to as it only fires when the user selects a row/cell with the mouse...it will not fire on tab events.
So, I would use the grid save event, which fires after you make an edit and "commit" the change through enter, tab, mouse off, etc.
Second, the e.sender.current() includes the current identifying information like "grid_active_cell" and "k-state-focused" and "k-dirty-cell", etc. By the time you get to the dataSource change event, the cell has actually lost all that decoration and your this.currentCell is essentially pointing at a non-existent selector. So, you need to grab a more "permanent" identifier.
So, using the grid save event:
save: function (e) {
var row = $(e.sender.current()).closest("tr");
var colIdx = $("td", row).index(e.sender.current());
var model = e.sender.dataItem(row);
currentCell = "tr[data-uid='" + model.uid + "'] td:eq(" + colIdx + ")";
}
And then in the grid DATABOUND event(as the dataSource change event is still followed by events that change the cell focus to the top-left, but grid.dataBound is further in the chain and seems to work better):
dataBound: function (e) {
if (currentCell) {
grid.editCell(currentCell);
grid.current(currentCell);
}
}
Demo(with variable changes as I do not have your whole class, based on a kendo grid demo): http://dojo.telerik.com/#Stephen/OjAsU
Note that this solution(not my implementation, but your technique in general) will break tabbing from cell to cell, i.e. tabbing will commit the edit but the dataSource change event will always put the focus back on the just-edited cell instead of moving to the tabbed-to cell. This breaks user expectation of what tab does. So, you should consider trying to capture the enter key press only instead of relying on the grid events(which fire regardless of tab or enter).
I can't figure out how to make my treeview filterable.
Looking at the demos on http://demos.telerik.com/kendo-ui/treeview/api
function DoSearch() {
var treeView = $("#ItemList").kendoTreeView().data("kendoTreeView");
var filterText = $("#search-value").val();
if (filterText !== "") {
treeView.dataSource.filter({
field: "text",
operator: "contains",
value: filterText
});
} else {
treeview.dataSource.filter({});
}
}
If I do the implementation, when using filter method I am loosing my treeview
Here a fiddle with my sample treeview the same way that I'm getting, not using datasource, the ASPNET server code return the list as appears on the fiddle, then by javascript call the kendoTreeView method.
Here's my fiddle
http://jsfiddle.net/mspasiuk/hw4j4qt2/
To put in a nutshell what I want to do is have a textbox, when I type or hit on a button using a 'contains' clause, the treeview only have to show the items who match the criteria, If the search box is empty show the original treeview.
I would appreciate any help. Thanks
Alright, I was dealing with the same issue and with the help of this post I managed to do it. So make sure you check the existing thread I gave the link for. Hope that helps.
I have a kendo grid using MVVM.
My problem is I can't seem to set column visibility using the hidden attribute and an expression:
data-columns=
"[{'template':'# if (User!=null) { # #=User.Name# # } #',
'title':'User', 'hidden': User==null}
The template works, but the 'hidden' attribute doesn't seem to.
Is there any way to get this to work?
As an alternative, you could bind to the dataBinding or dataBound event to hide the column conditionally:
data-bind="events:{ dataBinding: onDataBinding }"
View model:
var viewModel = kendo.observable({
User: null,
showHideUserColumn: function (e) {
var grid = e.sender;
if (this.User) {
grid.showColumn("User");
} else {
grid.hideColumn("User");
}
},
onDataBinding: function (e) {
this.showHideUserColumn(e);
// if you want to track changes, (re)bind change tracking
this.unbind("change", this.showHideUserColumn);
this.bind("change", this.showHideUserColumn);
}
});
Only the properties specified via the data-bind attribute participate in MVVM change tracking. The other data attributes are mapped to widget configuration properties and are not evaluated against the view model.
Currently there is no binding which will allow you to hide and show grid columns.
I have a tree-like structure using Kendo UI tree view. Each node is displayed as a hyperlink and on clicking each one, a new kendotabstrip will be opened. My problem is if I select one node, the results are displayed fine in a new tab but if I close the newly opened tab and then select the same node then no new tab is opened since the node has already been selected. If I have to choose the same node, then I have to access another node and then come back to node.
I tried to deselect the selected item once the new tab is opened using the following snippet:
var treeview=$(#grpTree).data("KendoTreeView");
var selNode=treeview.select();
selNode.find("span.k-state-selected").removeClass("k-state-selected")
but the node is not getting deselected. Is there any other way to do it or have I missed out anything?
I know this post is a bit dated, but as Telerik is continually upgrading its components, I thought I'd put this here so that people can be aware of this change moving forward.
You can deselect all selected nodes with the following syntax:
var treeView = $("#treeView").data("kendoTreeView");
treeView.select($());
Source: Kendo UI Treeview Documentation for Select
Yes this is by design. If you want to attach a click handler which will be triggered each time (no matter if the node is already selected). You can attach a delegate event like the following:
$('#treeviewName').on('click','.k-item',function(e){
var clickedNode = $(this);
var treeViewClientObject = $(e.delegateTarget).data().kendoTreeView;
})
My code:
var treeview=$(#grpTree).data("KendoTreeView");
treeview.select(null);
This calls the change function always, so this can be another solution:
$("#favorite_tree").kendoTreeView({
change: function () {
if (this.dataItem(this.select())) {
var treeView = $("#calendar_tree").data("kendoTreeView");
treeView.select($());
}
}
}).data('kendoTreeView');
$("#calendar_tree").kendoTreeView({
change: function () {
if (this.dataItem(this.select())) {
var treeView = $("#favorite_tree").data("kendoTreeView");
treeView.select($());
}
}
}).data('kendoTreeView');
I am using kendo ui treeview. I am loading the treeview dynamically from the database. But my issue is i am getting the expand error if there are no child's to display. How can i remove the expand arrow.
Regards,
Sri
There is a configuration field of the HierarchicalDataSource schema.model object called hasChildren you can add a boolean property to your model which indicates if the your model has items.
This way when the TreeView creates its elements it will check that property (or call the function - you could for example return if the items.leght is greater than zero) and if the returned value is false it wont create the expand arrow in front of the item.
Check this demo.
for an example, I have declared my function like this in my Kendo Ui TreeView :
var inline = new kendo.data.HierarchicalDataSource({
data: #Html.Raw(dataSource),
schema: {
model: {
children: "Children",
hasChildren: function(e) {
var test = e.Children.length;
return test > 0;
}
}
}
});
And for my, it works perfectly !