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#"
Related
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'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
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
I'm making a formatter for slickgrid that will display a url as an img tag.
Due to the complexity and performance issues involved slickgrid doesnt support dynamic row heights but it does allow setting the global row height via the options.
var gridOptions = { rowHeight: 64 };
To make the images fit in a reasonable way I want to set the img tag to be the same as, or slightly smaller than the row height.
Neither the columnDef nor dataContext parameters that are passed to the formatter appear to have a reference to the parent grid so I'm not sure how to get the row height set on the grid options.
I'd like to avoid having to hack up the slickgrid scripts to pass through what I need as this makes updating a big PITA!
I could declare the formatter inline I guess and pull in the info via a closure but this isn't as reusable as a standalone formatter implimented in a similar mannor to the default formatters. But this is probably what I'll do for now until a better option presents itself.
Can anyone give me any hints or suggestions?
EDIT:
This does what I want but in a non-reusable mannor. It's not masses of code but it would still be nice to only have to write it once.
var gridOptions = { rowHeight: 64 };
var gridImageFormatter = function ImageFormatter(row, cell, value, columnDef, dataContext) {
return "<img src='" + value + "' style='width:auto;height=" + gridOptions.rowHeight + "' />";
};
var gridColumns = [
{id: "Id", name: "Id", field: "id", width: 250 },
{id: "Name", name: "Name", field: "name", width: 100 },
{id: "Image", name: "Image", field: "image", width: 64, formatter: gridImageFormatter },
{id: "Url", name: "Url", field: "url", width: 250 }
];
EDIT 2:
Using the power of the internet I found a nice little trick for making images autosize if they are bigger that the availible space.
This doesn't work to make smaller images strech to the given space but I can live with that!
How do I auto-resize an image to fit a div container
And this gives us something which works for most cases and is reusable:
function ImageFormatter(row, cell, value, columnDef, dataContext) {
return "<img src='" + value + "' style='max-width:100%;max-height:100%' />";
}