I want to customize the data to be selected in kendo UI radiogroup after loading the widget.
Here is an example with several attempts to accomplish items after initializing kendo UI radiogroup.
https://dojo.telerik.com/oJOZezuQ/2
value can be set after without problems, but items cannot.
Is there a better variant than to regenerate the whole widget when changing items?
The only way I've been able to make this work is to remove the kendo widget and then recreate it with the new item:
<div id="radioGroupSection"></div>
<script>
rg = $("#radioGroupSection");
rg.html('<ul id="radiogroup"></ul>')
$("#radiogroup").kendoRadioGroup({
items: [ "one", "two" ],
value: "one"
});
setTimeout(function () {
rg.html('<ul id="radiogroup"></ul>')
$("#radiogroup").kendoRadioGroup({
items: [ "one", "two", "three" ],
value: "three"
});
}, 3000);
</script>
Here is the dojo
I have now implemented it as follows:
https://dojo.telerik.com/oJOZezuQ/9
It seems to me to be a good solution, as the options are not changed during a refresh.
<ul id="radiogroup"></ul>
<script>
var tmpSetOptions = {
items: [ "one", "two" ],
value: "one",
labelPosition: "before",
layout: "horizontal"
};
$("#radiogroup").kendoRadioGroup(tmpSetOptions);
setTimeout(function(){
tmpSetOptions.items = [ "one", "two", "three", "four", "five"];
$("#radiogroup").kendoRadioGroup(tmpSetOptions);
}, 5000);
</script>
Related
I have a Kendo Grid where the COR ABA No. may or may not be editable, depending on a value in the first column. So, if NOC Code=='C01', then COR ABA No. is editable, otherwise it is not.
I have achieved this by adding the Edit event on the columns and in that edit handler disabling the HTML input Kendo creates, when no editing is allowed. (In the grid definition, I have Editable(true) to start). I want instead to do this by doing the logic check in the DataBound event for the grid. That is, after all data is bound, iterate over the data, determine when the column should NOT be editable, and prevent this somehow. My idea is to simply remove the click handler that I ASSUME Kendo adds for a cell when using Editable(true) as stated above. Is this the way? Or how? Thanks!
I suggest another way, instead call closeCell() on edit event, if you do not want to allow the user to edit the cell. In doing so, the cell will not display an input when the user clicks it to edit it.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id" },
{ field: "name" },
{ field: "age" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" }
}
}
}
},
editable: "incell",
toolbar:["create"],
edit: function(e) {
if (!e.model.isNew() && e.container.index() == 0) {
var grid = $("#grid").data("kendoGrid");
grid.closeCell();
}
}
});
</script>
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:
I'm trying to implement some functionality in "onchange" of text box in telerik kendo grid. But it is not firing in change; instead it's firing on onBlur.
The code is here. demo
To track the changes in the editors inside the column templates you should use different approach. Please check the example below:
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: kendo.template($("#name-template").html())
}],
dataSource: {
data: [ {id: 1, name: "Jane Doe" }, {id: 2, name: "John Doe" } ],
//schema is required for enabling valid CRUD operations
schema: {
model: {
id: "id",
fields: {
id: {type: "number"},
name: {type: "string"}
}
}
}
}
});
var grid = $("#grid").data("kendoGrid");
grid.table.on("change", "input", function(e) {
alert("change");
//optionally update the underlying model:
var editor = $(this);
var dataItem = grid.dataItem(editor.closest("tr"));
dataItem.set("name", editor.val());
});
Another option is to use the MVVM approach shown in the following demo:
http://dojo.telerik.com/Utino
I've used "onkeyup" event. It works :)
You should try "onkeypress" event. It will work as per your requirement.
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
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);
}
}