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
Related
I have a function that I'm going to use with several different Grids. In this function I want to set Grid's Id field which varies in different Grids.
How can I get each grid's ID?
function incId(e) {
var model = e.model;
var grid = e.sender;
//removed
model.set(!IDFIELD!, ++Id);
}
You can use model.idField to get it
model.set(model.idField, ++Id);
Please read its documentation for further investigation
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>
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());
}
}
}
I want to fetch dropdown values or IDs. I am using a dropdown control in an inline editing kendo grid. I'm trying to obtain the values using the change function. My demo code is:
function gridEdit(e)
{
griddata = $('#CodeConfiguration').data("kendoGrid");
codeType = e.container.find(":input[name=CodeType_032]");
fixedCode = e.container.find(":input[name=FixedCode]");
alert(codeType.id);
codeType.change(function()
{
if(codeType.val() == 273)
{
fixedCode.attr('disabled',true);
}
});
}
I want to fetch CodeType dropdown values. Please suggest an appropriate solution.
Basically if your DropDownList is bound to field from the Grid model, then you can directly get the value from the Model.
e.g.
function onEdit(e) {
var codetype = e.model.CodeType;
}
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;
}
});