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.
Related
I am using a kendo multi select in power bi custom visual but it appears that only the first selection is sticking.
My code is below:
$("#myMultiSelect").kendoMultiSelect({
dataTextField: "value",
dataValueField: "identity",
dataSource: viewModel.categories,
change: function(e) {
var selectionDeffered = this.value().map(id => selectionManager.select(id, true));
if (this.value().length == 0)
{
selectionManager.clear()
}
}
});
A full gist with the kendo core is here:
https://gist.github.com/jcbowyer/5df55d4758a7614ca08d71eaf640fc57
Is there a simple way to achieve multi-select? I may be making an obvious mistake but the chiclet sample is very complex and uses a different method called selectionhandler. I am unclear how to user selection handler with kendo.
The issue was I was not clearing previous selection. The selection manager multiselect is working if one multi select is added. I have not been able to get the mutliselect to work if multiple multi selects are added.
So I have a grid and the columns have the good ol' column menu on them with the filtering/sorting/excluding of columns and it all works fine.
The fly in the ointment is that I would like to allow the user to rename a column heading and the obvious place in the UI to allow this is in said column menu.
Something like this:
(where the red bit is just another option that I click on and popup a little window to let me type in a new heading)
Is this possible and how would I do it?
I see that menus can be customized and the grid demo shows how to adjust the stuff in the filter popup but I am not sure how I would add this item (I can see how I would programmatically do the rename but just this getting an option onto the menu has me stumped).
You can use the columnMenuInit event. Two possibilities:
$("#grid").kendoGrid({
dataSource: dataSource,
columnMenu: true,
columnMenuInit: function (e) {
var menu = e.container.find(".k-menu").data("kendoMenu");
var field = e.field;
// Option 1: use the kendoMenu API ...
menu.append({
text: "Rename"
});
// Option 2: or create custom html and append manually ..
var itemHtml = '<li id="my-id" class="k-item k-state-default" role="menuitem">' +
'<span class="k-link"><b>Manual entry</b></span></li>';
$(e.container).find("ul").append(itemHtml);
// add an event handler
menu.bind("select", function (e) {
var menuText = $(e.item).text();
if (menuText == "Rename") {
console.log("Rename for", field);
} else if (menuText === "Manual entry") {
console.log("Manual entry for", field);
}
});
}
})
See fiddle with two alternatives:
http://jsfiddle.net/lhoeppner/jJnQF/
I guess that the point of a filter is to filter, not to make changes on the grid.
But anyways i found this Kendo Post that may help you to achieve what you need.
You can also take a look a this one too.
I have created a kendo HierarchicalDataSource
var fontidatasource = new kendo.data.HierarchicalDataSource({
data: vm.get("Source")
});
I want search in it the item that are checked.
I have tried to use a gatherStates function (kendo documentation), but don't function...
I'm afraid that there is not such filtering option for HierarchicalDataSources.
You might try this answer even that it says TreeView it applies here since the data model is the same.
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
}
}
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 !