I am using Kendo multiselect drop down but the requirement is to avoid the typing in input box after clicking the dropdown select.I have tried the solutions provided in the link http://www.telerik.com/ but it doesn't work with mac.
My code: -
vm.partnerOptions = {
animation: RefineBarService.animation,
dataSource: vm.partnersData,
dataTextField: "id",
dataValueField: "id",
placeholder: "All Partners",
headerTemplate: $compile(angular.element("#partner-header-template").html())($scope),
itemTemplate: angular.element("#partner-item-template").html(),
tagTemplate: angular.element("#partner-item-template").html()
};
vm.owners = res.data.owners;
vm.reasons = res.data.reasons;});
Solution1 tried:-
$('input').on('keypress',function(e){
e.preventDefault();
})
Solution2 tried :-
$('.k-input').attr('readonly', "readonly")
This worked for me,
let ms = $("#drpMultiSelect").data("kendoMultiSelect");
ms.input.attr("readonly", "readonly");
Related
I want to be able to filter a column based on values from a different column.
I have bound a column to ID property and showing Name (using template). When the user filters/sorts, the values of the bound property (ID) are used. I want to use the values of a different property/column.
I have already figured out a way to handle sort (using compare function for kendo.ui.GridColumnSortable) but cannot find a way to handle filter.
PS: I tried using filterMemberPath and sortMemberPath but they only seem to work for server side filtering/sorting.
Talked to Kendo support and found a couple of ways to handle this issue:
if using Kendo version 2016.3 or above, the filter event can be used
filterable: true,
filter: function(e) {
if (e.filter.filters[0].field == "age") {
e.preventDefault();
this.dataSource.filter({ field: "name", operator: "startswith", value: "Jane" });
}
but if using kendo version 2016.1 or below, the following approach works which uses filterMenuInit and binds the click event on filter button
filterable: true,
filterMenuInit: function(e) {
var button = e.container.find(".k-primary");
var fieldName = e.field;
var grid = this;
button.on("click", function(e) {
e.preventDefault()
grid.dataSource.filter({ field: "name", operator: "startswith", value: "Jane" });
});
},
I'm having a weird issue. My kendo drop down list is revealing the drop down list each time I press the up or down arrow, on all the inputs in my app. Does anyone know what can be causing this? I went to the kendo page that talks about this, but its mostly a reference for the keyboard shortcuts.
I should mention that kitting the down and up arrow DOES change to the next item in the list, but I can't have the dropdown list showing each time.
var dataYesNo = [ { text: "Yes", value: 'true' }, { text: "No", value: 'false' } ]; $('#ddlList').kendoDropDownList({ dataSource: dataYesNo, dataValueField: 'value', dataTextField: 'text', optionLabel: 'select a value...' });
OK, I figured it out. I stumbled onto this ...
http://www.telerik.com/forums/conflict-w-bootstrap-js-dropdownlist
I had to upgrade my bootstrap version to 3.3.5 and works like a charm. Regardless, thanks for the assistance.
this follows in from another post to do with setting a grid's selected fields when we have a data source field (and combo fields) with a json object (as opposed to a simple string).
So if we look at the change event handler for the following combox...
function createCombo(container, options, data) {
var input = $('<input name="' + options.field + '" />')
input.appendTo(container)
input.kendoComboBox({
autoBind: true,
filter: "contains",
placeholder: "select...",
suggest: true,
dataTextField: "display",
dataValueField: "rego",
dataSource: data,
change: function () {
var dataItem = this.dataItem();
var dataField = options.field.split('.');
var fieldName = dataField[0];
options.model.set(fieldName + '.rego', dataItem.rego);
options.model.set(fieldName + '.display', dataItem.display);
}
});
}
I am setting my 2 fields as follows...
options.model.set(fieldName + '.rego', dataItem.rego);
options.model.set(fieldName + '.display', dataItem.display);
(each item in the combo, and the grid data source has a json object with a 'rego' and 'display' field, see full example here.
This seemed to work exactly as I wanted, but I had just had someone point out to me that when you scroll the combobox with the up/down arrow keys, it just seems to toggle between 2 values in the list, as opposed to iterating through all the items. If I remove the 2 'options.model.set' statements, the combo then behaves.
I am really hoping there is a work around this, but everything I Have tried makes no different.
If there were any suggestion to finish this off, it would be greatly appreciated!
Thanks in advance for any help
Since you're modifying the model manually, you should to remove the name=... attribute from the input (otherwise the grid will also modify the model; you could also use name="car.rego" - it has to be the value field - and then not set the combobox value in the config) and also only call set for the last change you make on the model (otherwise, the grid's save event will get triggered twice, once with invalid data).
So you editor would look like this:
function createCombo(container, options, data) {
var dataField = options.field.split('.');
var fieldName = dataField[0];
var input = $('<input/>')
input.appendTo(container)
input.kendoComboBox({
autoBind: true,
filter: "contains",
placeholder: "select...",
suggest: true,
dataTextField: "display",
dataValueField: "rego",
dataSource: data,
value: options.model[fieldName].rego,
change: function (e) {
var dataItem = this.dataItem();
options.model[fieldName]['rego'] = dataItem.rego;
options.model.set(fieldName + '.display', dataItem.display);
}
});
}
Also, your data should be consistent (in one DS, you use "C1" as rego, in the other "CAR1").
(demo)
I have a grid/detail grid set up. On the detail grid, I have a drop down list. The editor function for the drop down is:
function ActionTypeEditor(container, options) {
$('<input id="ddlActionType" data-text-field="name" data-value-field="id"> data-bind="value:' + options.field + '" ').appendTo(container).kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
autoBind: false,
dataSource: GC.ViewModels.Config.AlertAction.actionTypeArray
}).appendTo(container).data("kendoDropDownList").text(options.model.ActionTypeId);
var dropdownlist = $("#ddlActionType").data("kendoDropDownList");
dropdownlist.value(options.model.ActionTypeId);
}
This works fine when I edit one row on a detail grid associated with the "parent" grid row. However, if I edit another detail row associated with another parent row BELOW the first, the next to last stamement
where I select the dropdown list always gets the first one on the page, rather than the one for the lower row. How do I get the correct drop
down list?
Why, you use
var dropdownlist = $(container.find("#ddlActionType")).data("kendoDropDownList");
instead.
You're welcome!
How can I select the Kendo drop down list value on change function. The Kendo dropdownlist is in grid. On change function I want to select the first item in the list.
I have written the code:
function categoryDropDownEditor(container, options) {
var dropdownlist = $('<input data-text-field="category" id ="ctdd" data-value-field="CatId" data-bind="value:' + options.field + '"/>').appendTo(container).kendoDropDownList({
optionLabel: "Select...",
dataValueField: "categoryid",
dataTextField: "category",
autoBind: false,
change: onChange,
dataSource: catogory
}).data("kendoDropDownList");
}
function onChange()
{
dropdownlist.select(0);
}
But the dropdown is not selecting on change function. How can i do that please help me.
I think in your onchange event add e as event , e.sender.select(0) will do the trick.
here is the code.
function Change(e) {
console.log("Event Fired"); e.sender.select(0);
}