Can Kendo-UI multiselect be use for input of user defined values?
By default when user clicks on multiselect control a dropdown is opened and user can select one of the predefined values. When user select one of the predefined values, that value is added to the selection.
What we need is a little bit different behavior. We would like to allow user to enter a custom string value, press enter key, and then that entered value would added to the selection.
One idea was to abuse multiselect control, by subscribing to the key events and adding user defined value to data source of the control, at which point we could (possibly) mark that value as selected (I am just guessing this, not sure if it would actually work).
So, is there an option value for this kind of behavior for multiselect or maybe some other control (does not have to be Kendo), so we don't have to hack existing kendo control?
As an example of the behavior I have create a quick [PoC here] (http://plnkr.co/edit/mcpVsstaxB2Xteh374pk?p=preview).
Here is the code from the plnkr
<script>
$(function() {
var input = $('input');
var list = $('ul');
input.on('keyup', function(e) {
if (e.which === 13) {
var value = $.trim(input.val());
if (value.length > 0) {
list.append($('<li/>'));
list.find('li:last').text(value);
var remove = $('<span class="remove"/>');
remove.html(' x');
list.find('li:last').append(remove);
remove = list.find('.remove:last');
remove.click(function() {
$(this).closest('li').remove();
});
input.val('');
}
}
});
});
</script>
Related
I'd like to update a label on change event of the Kendo Multi Select. But the value() just gives the Id. Do you have any idea about accessing other fields of the selected value?
This is the JavaScript handler:
function change(e) {
if (e.sender.value()[0])
$("#Label").text(e.sender.value()[0]);
else
$("#Label").text('');
}
Use var value = this.dataItems(); instead, it will give you all information you need about the current selected value, and do note because it's multi select it's value may more than 1.
function onChange(e) {
var value = this.dataItems();
console.log(value[0].text);
if (value[0]){
$("#Label").text(value[0].text);
}else{
$("#Label").text('');
}
}
DEMO
I am using Kendo Numeric text box to display decimal values.I want to change the font color based on the user input.How to achieve this?
You Can do this in JQuery easily by changing the style on the change and spin event of the input:
On your numeric text box add the events:
$("#numerictextbox").kendoNumericTextBox(
{
change: onChangeOrSpin,
spin: onChangeOrSpin
});
Then in the event handler call:
function onChangeOrSpin()
{
var val = this.value();
changeFontColour(val);
}
function changeFontColour(val)
{
if(val < 5)
{
$("#numerictextbox, .k-input").css('font-family','Arial');
$("#numerictextbox, .k-input").css('font-style','italic');
$("#numerictextbox, .k-input").css('font-weight','bold');
$("#numerictextbox, .k-input").css('color','blue');
}
else
{
$("#numerictextbox, .k-input").css('font-family','Times New Roman');
$("#numerictextbox, .k-input").css('font-style','normal');
$("#numerictextbox, .k-input").css('font-weight','normal');
$("#numerictextbox, .k-input").css('color','black');
}
}
Here is a working fiddle: http://jsfiddle.net/loanburger/nwsw4yeq/
Update:
For multiple numeric inputs on the same page, use classes and add a different class to each input so you can distinguish between then when you need to change the colour. Then use a data attribute to find the correct one to change.
You cannot use the id because there are two parts to how kendo creates the widget:
The first part is the input for editing the value. This is the
one the user interacts with. This input will be given the class:
numerictextbox numericOne k-input
There is a second input of interest which is the one used to display the value after the widget looses focus this one gets the classes: k-formatted-value numerictextbox numericOne k-input
Neither of these inputs get an id and you don't want to use the native Kendo classes either so using a distinct class on each of your numeric widget controls, you can identify which colours to change since that class will get added to both inputs in the widget.
See here: https://jsfiddle.net/loanburger/4evy3tcg/
I have a scenario where I have a Kendo dropdown, Kendo Datepicker as couple of columns in the grid.
On Add new record, the dropdown should be editable, on Edit mode, this drop down should be non Editable.
I have declared Grid to be Editable in declaration using
.Editable()
model.Field(p => p.CountryName).Editable(true); // where CountryName is kendo dropdown
I am trying to do on Edit this way,
function OnEdit(e) {
if (e.model.isNew() == false) {
e.model.fields["CountryName"].editable = false
}
THe behaviour I observe is Initially on load, Editable is set to true (due to cshtml declaration). When I click on Edit too, the drop down is Editable because of the page load flag that is set.
Even though OnEditmethod is executed and editable is set to false, the grid seems to have loaded before this code execution, hence editable =false is not reflected.
If I click on Edit second time, now the editable is set to false due to the previous call, Hence the dropdown is non editable as expected.
In Summary, the flag setting is not effective for the current action, but for the immediate next action. I am not sure if I have made it clear. Can you guys help?
Update - The other option I tried, during databind to the grid, I tried explicitly settign editable to false to all the grid data. My assumption here was only the loaded rows will have this field set to false. But in this case even the add new record takes Editable false.
var grid2 = $("#Gridprepayment").data("kendoGrid").dataSource.data(requiredData);
$.each(requiredData, function (i, row) {
var model = $("#Gridprepayment").data("kendoGrid").dataSource.at(i);
if (model) {
model.fields["CountryName"].editable = false;
}
});
The best way is to make the column editable .
e.g.
model.Field(d => d.CountryName).Editable(true);
and Onedit function, replace the inner html like mentioned below, for just to display it as label.
function OnEdit(e) {
e.container[0].childNodes['0'].innerHTML = e.model.CountryName;
}
Try disabling the kendo dropdown in the following manner:
function OnEdit(e) {
if (e.model.isNew() == false) {
$("#CountryName").data("kendoDropDownList").enable(false);
}
}
You can try this if you want to show the dropdownList as label in edit mode
function OnEdit(e) {
if(e.container.find("input").attr("id") === 'CountryName') {
this.closeCell();
}
}
Note: The above code was written considering "CountryName" as the id of the dropdown. Please change if the id is different.
I tried this which worked.
It's only a work around :
function OnEdit(e) {
if (e.model.isNew() == false) {
if (e.container.find("input").attr("id") === 'CountryName') {
e.container.find("td:eq(0)").html($("#CountryName").val());
}
}
}
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've a Kendo grid with editable = incell and more than one required text field. The default values are empty strings. When I click on "Add new record" the first required field is marked as error because it's empty. I can only leave the field after I've done some input. Although the other required fields are still empty I can leave the row.
How can I prevent that a row can't be left without filling all required fields?
Try this,
$('.k-grid-save-changes').on("click", function () {
var grid = $("#grid").data("kendoGrid");
if (grid.editable && !grid.editable.validatable.validate()) {
//What ever you want to do
e.preventDefault();
return false;
}
});