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);
}
Related
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");
I use kendo MultiSelect as custom editor in kendo grid ,
MultiSelect work correctly when save changes but no show textvalue when press edit row button (MultiSelect is empty).
my custom editor function is:
function GRID_MULTISELECT_CUSTOM_EDITOR(container, options) {
var columnValue = String(options.model.POST_HISTORY).replace(/,/g,'","');
$('<input name="GRID_POST_LVL_MULTISELECT" id="GRID_POST_LVL_MULTISELECT" data-value-primitive="true" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoMultiSelect({
filter: "contains",
optionLabel: " ",
width: "100px",
dataTextField: "NAME_UNIT",
dataValueField: "CD_UNIT",
dataSource: prsListDataSource,
value: [columnValue],
change: function(e) {
selectedValue = e.sender.value();
apex.event.trigger($("#PRS_LIST_REG_POST_HISTORY_MULTISELECT"),"kapex-multiselect-change");
apex.event.trigger($("#PRS_LIST_REG_POST_HISTORY_MULTISELECT"),"kapex-multiselect-databound");
}
});
var ms = $("#GRID_MULTISELECT_CUSTOM_EDITOR").data("kendoMultiSelect");
console.log(ms.value());
}
console.log(ms.value()); show value is set but textvalue no show in MultiSelect widget.
When 1 value is stored in database MultiSelect work correctly and textvalue show in edit. but when sotre multi value, textvalue not show.
I store datavalue with this format in database column as varchar.
001,100,110,111,112
I recommend you to serialize the POST_HISTORY values as arrays to the client. This will spare the need to modify the model value on the fly in the custom editor function. You will also don't need to think how to transform the MultiSelect's array value back to a comma-separated string value after the user finishes editing a row.
http://dojo.telerik.com/IDUBI
Keep in mind that using the value configuration in the MultiSelect declaration will not work in this case, because the MVVM value binding is applied at a later stage and takes precedence.
On the other hand, if you absolutely need to serialize the POST_HISTORY values as comma-separated strings to the client, then use dataSource.schema.parse to transform these strings to arrays before the Grid is databound:
http://dojo.telerik.com/OQAGa
Finally, create the MultiSelect widget from a <select multiple>, not <input>.
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!
Is there a way to implement 2 different edit form in jqGrid. I mean one normal usual edit form and the other with a much lesser form field (customized). both in the same navGrid. say edit and editpartial. can anyone throw some light?? many thanks.
The buttons "Add" and "Edit" added by navGrid call both editGridRow method with different parameters as the second parameter (properties parameter). In case of usage navGrid called as
$("#grid").jqGrid("navGrid", "#pager", {parameters}, prmEdit, prmAdd);
then navGrid calls
$("#grid").jqGrid("editGridRow", rowid, prmEdit);
if the user click "Edit" button and calls
$("#grid").jqGrid("editGridRow", rowid, prmAdd);
if the user click "Add" button.
In the same way you can add new custom button to navigator with respect of navButtonAdd method. For example
$("#grid").jqGrid("navButtonAdd", "#pager", {
caption: ""/*"My Edit"*/,
buttonicon: "ui-icon-note", // some icon
title: "My edit",
onClickButton: function() {
var $self = $(this);
$self.jqGrid("editGridRow",
$self.jqGrid("getGridParam", "selrow"),
{ // some options
recreateForm: true
}
);
}
});
In the way you add one more Edit button. The only thing which you need do now is temporary changing of editable property of some columns before call of editGridRow and resetting it to original value after call of editGridRow. You can use setColProp method to simplify the work. For example if you want to make myColumn column editable you can use
$("#grid").jqGrid("navButtonAdd", "#pager", {
caption: ""/*"My Edit"*/,
buttonicon: "ui-icon-note", // some icon
title: "My edit",
onClickButton: function() {
var $self = $(this);
// make "myColumn" temporary editable
$self.jqGrid("setColProp", "myColumn", {editable: true});
$self.jqGrid("editGridRow",
$self.jqGrid("getGridParam", "selrow"),
{ // some options
recreateForm: true
}
);
// make "myColumn" back as non-editable
$self.jqGrid("setColProp", "myColumn", {editable: false});
}
});
I want to emphasize that usage of recreateForm: true option for all usage of editGridRow (inclusive navGrid) is very important. So I recommend you just change default value of the option:
$.extend($.jgrid.edit, { recreateForm: true });