I'm trying to set the values for an multiselect editor, as in:
http://dojo.telerik.com/oneGE
But when I implement same in a Kendoui Grid custom editor the value setting is ignored.
The editor is setup in the grid declaration as a function:
$("#rocongrid").kendoGrid({<br/>
....
editor : function (container,options) {
$('<select multiple="multiple" data-bind="value:' + options.field + '"/>')
.appendTo(container).kendoMultiSelect({
dataTextField: "genre",
dataValueField: "genre",
dataSource: GenreDS,
value: [ "Classical" ]
});
}
},
The "Classical" item is set fine in the dojo sample, but in the Grid Edit mode it does not. Is there something I am not implementing in the custom editor?
There are a couple of questions that you need to consider when implementing multiselect in a Grid.
Values are not going to be a single value but an array of values so you need to implement some way for displaying it as (for example) comma separated values.
if you use data-bind="value:' + options.field + '" then this will overwrite value: [ "Classical" ]. Actually the later does not make sense since what you want is initially showing the values that are already stored in the Grid DataSource
Related
I am using numeric text box as an editor in my grid, when I change number by applying spinner, and then I click CRUD update button, model is not updated with the changed value, which I observed in "save" event of grid.
Is this a bug with Kendo? Although, it will work when we add trigger to spin event, but if we edit number typing in, it wont save? Any thoughts
And wierd thing is when after we enter number and click outside and then clicking update will save correctly. why its behaving like that?
positiveNumberEditor: function(container, options) {
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox(
{
format: " "
,min: 0
,max:9999
,step:1
,value:" "
, spin:function (e) {
this.trigger("change");
}
}
);
}
Finally I got answer for this.
(Answering here, so that it may help some one else!!!)
Well this is a shortcoming when we use an editable grid with reordering functionality. And hence easy fix could be adding a filter to avoid any editable row if any using css as below. And this filter is a config under kendoSortable setting of your grid.
filter: ">tbody >tr:not(.k-grid-edit-row)"
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>.
What is the perfect meaning of editor and template in kendo grid
columns: [{
field: "CategoryId",
title: "#T("Admin.Catalog.Products.Categories.Fields.Category")",
width: 200,
editor: categoryDropDownEditor,
template: "#:Category#"
}]
With the editor property you can specify a function that is called when editing the cell (of course, the grid must be set to 'editable:true')
The function could look like this:
function numberEditor(container, options) {
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
decimals: 0,
step : 1,
min : 0
});
}
So when editing a cell, a NumericTextBox is shown which in this case only allows positive (min:0) integers (decimal:0). In general you can define how the cell can be edited.
The template defines how the value is displayed.In your case the value is just shown as it is.
You could for example add some html:
template: "<b>#:Category#</b>" // Display bold text
template: "#:Category#" // Display as link
The #:Category# accesses the data field with that name. You can also use multiple fields in one column:
template: "#:Category# / #:SomethingElse#"
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!
If you have a kendo grid, is it possible to have a combobox and an icon in the same column? Basically using an editor and a command? Or the other question is to use an editor for a command column.
Thanks!
Use an editor function that is something like this:
editor: function (container, options) {
// Add icon
$('<span class="k-icon k-add"></span>').appendTo(container);
// Add container for the combobox
var span = $('<span></span>').appendTo(container);
// Define the combobox
$('<input name="' + options.field + '"></input>')
.appendTo(span)
.kendoComboBox({
dataSource: [ "Seatle", "Madrid", "Sofia", "Palo Alto" ]
});
}
It might be done more compact but here I try to make clear the different steps instead of chaining more functions.
Running example here: http://jsfiddle.net/OnaBai/ehnSq/12/ Try editing City