I have a kendo combo box with two entries, say "Thing 1" and "Thing 2". I want "Thing 1" to be set by default.
Is there a preferred way to do this? I can't seem to find it, although I did set the placeholder attribute to "Thing 1" and it worked. The Kendo documentation says that placeholder is "The hint displayed by the widget when it is empty. Not set by default." Am I using placeholder incorrectly?
The optionLabel attribute (which I believe you refer to as the placeholder) is used to specify the text representing no selection. When that is chosen from the list, the selected item is null so is not the correct solution for setting a default, unless you wish the default selection to be null. The selection can be set programmatically by calling the select() method on the widget instance. The following for example will set the selection to 'Thing1'.
<div id="dropdownlist"></div>
<script type="text/javascript">
$("#dropdownlist").kendoDropDownList({
dataSource: [
'Thing1',
'Thing2',
'Thing3'
],
optionLabel: "None"
});
$("#dropdownlist").data("kendoDropDownList").select(1);
</script>
It is worth noting that this is not the only way to achieve this. My above example uses Imperative(JQuery) syntax to declare the dropdown. If you are using the ASP.NET MVC server wrappers, there is a Value attribute you can set in the declaration, for example:
.Value("1")
Finally, if you are using MVVM with declarative initialization, you can bind the selection to a value on a View Model. I haven't complicated my answer with an MVVM example since I assume you aren't using this mechanism.
<script>
$(function () {
var data = [
{ text: "12 Angry Men", value: "1" },
{ text: "Il buono, il brutto, il cattivo.", value: "2" },
{ text: "Inception", value: "3" },
{ text: "One Flew Over the Cuckoo's Nest", value: "4" },
{ text: "Pulp Fiction", value: "5" },
{ text: "Schindler's List", value: "6" },
{ text: "The Dark Knight", value: "7" },
{ text: "The Godfather", value: "8" },
{ text: "The Godfather: Part II", value: "9" },
{ text: "The Shawshank Redemption", value: "10" },
{ text: "The Shawshank Redemption 2", value: "11" }
];
$("#movies").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
});
let combobox = $("#movies").data("kendoComboBox");//This "instantiates it"
combobox.value("The Godfather");
});
</script>
<input id="movies" />
Result:
Related
As you can see in this codepen link, I have replaced the header text with v-text-field but the problem is the v-text-field is attached with filterBy icon (the up-down arrow icon) as well. When i click on the text-field the filterBy function is working that i dont want. So far I think the #click event is covering whole area. I wish to separate the text-field and filterBy behavior. Any help will be greatly appreciated.
https://codepen.io/MicroDreamIT/pen/vYRvMza
You can disable the filter option on v-table columns by using the property 'sortable'.
Your headers data should look like that :
headers: [
{
text: "Dessert (100g serving)",
align: "left",
value: "name",
sortable: false // this will disable filter property and hide the icon
},
{ text: "Calories", value: "calories", sortBy: true },
{ text: "Fat (g)", value: "fat" },
{ text: "Carbs (g)", value: "carbs" },
{ text: "Protein (g)", value: "protein" },
{ text: "Iron (%)", value: "iron" }
],
I am working on an app in which I need to add items to kendo panelbar on button click.
These panels need to be expandabale/collapseble.
Is there a way to do this?
<ul id="panelbar"></ul>
<script>
$("#panelbar").kendoPanelBar();
var panelBar = $("#panelbar").data("kendoPanelBar");
panelBar.append(
[
{
text: "Item 1",
cssClass: "myClass", // Add custom CSS class to the item, optional, added 2012 Q3 SP1.
url: "http://www.telerik.com/" // link URL if navigation is needed, optional.
},
{
text: "<b>Item 2</b>",
encoded: false, // Allows use of HTML for item text
content: "text" // content within an item
},
{
text: "Item 3",
contentUrl: "http://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent1.html"
},
{
text: "Item 4",
imageUrl: "http://demos.telerik.com/kendo-ui/content/shared/icons/sports/baseball.png",
expanded: true, // item is rendered expanded
items: [{ // Sub item collection.
text: "Sub Item 1"
},
{
text: "Sub Item 2"
}]
},
{
text: "Item 5",
// item image sprite CSS class, optional
spriteCssClass: "imageClass3"
}
]
);
</script>
Reference: http://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar#methods-append
Is it possible to use the Kendo-Dataviz pie chart as a button control. I want every piece to be a different control.
I could not find anything like that in the documentation.
You might define a seriesClick event. Something like:
$("#chart").kendoChart({
series: [
{
type: "pie",
categoryField: "type",
data: [
{ value: 1, type: "Category 1" },
{ value: 2, type: "Category 2" }
]
}
],
seriesClick : function (e) {
alert("You clicked on: " + JSON.stringify(e.dataItem));
}
});
See it running here : http://jsfiddle.net/rS3T4/
I am using Telerik's Kendo UI and their autocomplete widget in conjunction with their MVVM framework, and am having a bit of a hard time with getting a box to set the retrieved (and selected) object to the bound one on the view model. For example...
var viewModel = kendo.observable({
Context: {}
});
$("#context").kendoAutoComplete({
dataTextField: "Name",
dataValueField: "Id",
delay: 800,
dataSource: {
dataType: "json",
serverFiltering: true,
transport: {
read: {
url: "/search/data",
data: function (data) {
return {
term: data.filter.filters[0].value
}
}
}
}
}
}).data("kendoAutoComplete");
Then I use the following HTML;
<input data-val="true"
id="context"
name="context"
placeholder="Context"
type="text"
data-bind="value: Context" />
This hits a controller action that returns the following;
[
{
Id: "items/1",
Name: "Item 1",
Label: "Item 1 Label"
},
{
Id: "items/2",
Name: "Item 2",
Label: "Item 2 Label"
},
{
Id: "items/3",
Name: "Item 3",
Label: "Item 3 Label"
}
]
However when I select the object after using the autocomplete to search for it, the Context property on my viewmodel remains null.
I can circumvent this by adding a specific select function.
select: function(e) {
var dataItem = e.sender.dataItem(e.item.index()).toJSON();
// update the model
viewModel.set('Context', dataItem);
}
but I would really rather just it work like it is supposed to; Any suggestions?
The problem is that you define viewModel as an Observable object but you are not binding it to the input.
Try adding the binding as follow:
kendo.bind($("#context"), viewModel);
Check it here: http://jsfiddle.net/OnaBai/DYVLT/
With the new kendo multiselect how would I add options to the list and make them selected?
For instance if I have a dropdown containing: 1,2,3 and I wanted to add 4 and 5 how do I do that? Do I have to destroy the multiselect, add the options and then reinit the multiselect?
Given the following multiselect definition:
var data =
[
{ text: "Africa", value: "1" },
{ text: "Europe", value: "2" },
{ text: "Asia", value: "3" },
{ text: "North America", value: "4" },
{ text: "South America", value: "5" },
{ text: "Antarctica", value: "6" },
{ text: "Australia", value: "7" }
];
var multi = $("#select").kendoMultiSelect({
dataTextField: "text",
dataValueField: "value",
dataSource: data
}).data("kendoMultiSelect");
You can use:
var values = multi.value();
For getting the list of values.
And for setting the value to South America (element with value 5) and "Asia" (element with value 3) use:
multi.value(["5", "3"])
If you want to add values to whatever it has then you need a little trick:
var multi = $("#select").kendoMultiSelect({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
value: ["1", "2", "3"]
}).data("kendoMultiSelect");
// Adding value 4 and 5 to current content
var values = multi.value().slice();
$.merge(values, ["4", "5"]);
multi.value(values);
Warning: If values 4 and 5 were already selected you will end up having them duplicated.
Just want to add some information about how to actually add new values to the multi-select.
As OnaBai points out, the code to add an item to the multi-select is
$("#SDropDown").data("kendoMultiSelect").dataSource.add({ Text: x, Value: y });
given the .cshtml
#(Html.Kendo()
.MultiSelect()
.Name("SDropDown")
.AutoBind(true)
.Placeholder("Select s...")
.DataTextField("Text")
.DataValueField("Value")
)
In order to add an item as entered in the multi-select hook the change event for the text input. Since this isn't uniquely identified, I use XPath to get the <input> element. This is hooked in document.ready (in .cshtml, so escape #):
$(document).ready(function () {
var node = document.evaluate('//select[##id="SDropDown"]/../div[contains(##class,"k-multiselect")]/input', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
if (node)
{
node.onkeypress = SChanged;
}
}
function SChanged(e)
{
// only append on enter
if (kendo.keys.ENTER == e.keyCode)
{
// updates multi-select data source
AddToOrganizations(this.value);
var multi = $("#SDropDown").data("kendoMultiSelect");
multi.dataSource.filter({}); //clear applied filter before setting value
// keep all currently selected items and append the user entered text
// (does not check for duplicates)
// Also, the new values can only be selected after the data source has
// been updated.
var values = multi.value().slice();
$.merge(values, [this.value]);
multi.value(values);
}
}