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.
Related
I am using Kendo grid with pop up editing mode and editor template.
The editor template consists of a kendo drop down list which is bind through the database and i have inserted the optional label value ie "--select--" at run time in controller which works good for add method but for update method it is not autoselecting the "--select value--" and on click value is selected at second hit. Please help if anyone has any solution to this.
Edited: Please find the below code snippet for my drop down list.
#(Html.Kendo().DropDownList().Name("Type")
.DataTextField("Value")
.DataValueField("TypeID")
.DataSource(source =>
{
source.Read(read => { read.Action("Action Name", "Controller name"); });
})
)
// Controller code for binding drop down list
[AllowAnonymous]
public ActionResult GetTypes()
{
//my code to get list of types from db in object "Type"
Type.Insert(0, new TypeModel() { Value = "--Select--", TypeID = Guid.Empty });
return Json(Type, JsonRequestBehavior.AllowGet);
}
As you said in comment section, Kendo UI 2015 Q1 comes with some new features for dropdown family widget e.g autocomplete, dropdown, multiselect, etc and it also has some bug on it.
So its not your fault that the dropdown won't recognize on the first select event.
The developer had fixed this issue and release a service pack for this, therefore all you have to do is upgrade or downgrade your Kendo UI version..
See this dojo where the grid's filter doesn't work for the first time selection
and if you downgrade its version or upgrade it, it will works fine like in this dojo
Kendo UI 2015 Q1 SP1 Release History, you will see on DropDown section that the issue have been fixed..
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 am wondering if there's an easy way to have the multiselect widget's css functionality shown in this demo
http://demos.kendoui.com/web/multiselect/index.html
applied to an autocomplete widget.
If the only reason for using autocomplete is that the list of values is huge and you want to do server side filtering (serverFiltering) with a multiselect widget as well. You just need to define serverFiltering as true.
Example:
var ds = new kendo.data.DataSource({
transport: {
read: {
url : "getData.php"
}
},
serverFiltering: true
});
$("#items").kendoMultiSelect({
dataValueField: "name",
dataTextField : "name",
dataSource : ds
});
You will receive a some additional parameters saying what the user has typed so far and you server can return only the data that meets the condition.
This JSFiddle (http://jsfiddle.net/OnaBai/rpDuL/) tries to show you how it works. You can start typing a country name and see that it actually filters the data. Since this is just JavaScript I've simulated server filtering implementing a read function that greps the data for those records meeting the condition.
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.