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!
Related
I want to get a value from a field in my grid, and put it in the footer of the grid. Is there a smart way to do it like
columns: [
{field: "product", title: "Product"},
{field: "price", title: "Price"},
{field: "priceDoubledInFooter", title:"priceDoubledInFooter",footerTemplate:#=price*price#},
]
I have prepared a simple dojo for you: http://dojo.telerik.com/UWOvi/2
This shows the contact names within the demo grid in a bootstrap popover when clicked.
Without knowing your specific needs I have included all the values from one column into the popover.
This is achieved by creating a function called getMeValues() that is assigned to the footerTemplate.
This function then does the following:
function getMeValues(data)
{
var gridDS = $('#grid').data('kendoGrid').dataSource.data();
var result = '';
gridDS.forEach(function(row, index){
result += index + '::' + row.ContactName + '<br/>';
});
return '<button class="btn btn-primary" data-container="body" data-toggle="popover" data-title="I am some data" data-content="' + result + '"/>' + ' Click Me</button>';
}
I gain access to the data within the dataSource for the grid and then iterate over the ContactName field and add that to a var. I finally then create a button which is placed in the footer which activates a popover to display the contents.
Then to get the newly created button to function I bind the popover event within the dataBound event of the grid so that it knows to activate the button for me.
Obviously change this example for your specific needs but if you have any further questions I'll be happy to help.
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
Good morning, I'm working on a jqGrid that have the multiselection active.
I need to limit the selection of the row only using the multisel box, not by clicking everywhere on the row.
Thats's because I need to do some action by clicking links on some cells and I won't alter the active multiselection.
I tried to set the multiboxonly property, but it's not what I need.
I didn't find anything else to customize this function of the grid.
You can control on which click the row will be selected with respect of your custom beforeSelectRow event handler. If the handler return true, the row will be selected. If you return false the row will be not selected.
The second parameter of beforeSelectRow is event object, e.target is the DOM element which was clicked. You can get the cell (<td>) in which the click done with $(e.target).closest('td'). Then you can use $.jgrid.getCellIndex to get the index of the cell insido of the row. The index in the colModel should point to the 'cb' column which contain the checkboxes. So the code could be the following:
beforeSelectRow: function (rowid, e) {
var $myGrid = $(this),
i = $.jgrid.getCellIndex($(e.target).closest('td')[0]),
cm = $myGrid.jqGrid('getGridParam', 'colModel');
return (cm[i].name === 'cb');
}
The corresponding demo you can see here.
I would like to suggest easier solution:
beforeSelectRow: function(rowid, e) {
return $(e.target).is('input[type=checkbox]');
},
When multiselect is set to true, clicking anywhere on a row selects that row; when multiboxonly is also set to true, the multiselection is done only when the checkbox is clicked.
So the answer would be:
multiboxonly: true