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
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>.
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
So I have a grid and the columns have the good ol' column menu on them with the filtering/sorting/excluding of columns and it all works fine.
The fly in the ointment is that I would like to allow the user to rename a column heading and the obvious place in the UI to allow this is in said column menu.
Something like this:
(where the red bit is just another option that I click on and popup a little window to let me type in a new heading)
Is this possible and how would I do it?
I see that menus can be customized and the grid demo shows how to adjust the stuff in the filter popup but I am not sure how I would add this item (I can see how I would programmatically do the rename but just this getting an option onto the menu has me stumped).
You can use the columnMenuInit event. Two possibilities:
$("#grid").kendoGrid({
dataSource: dataSource,
columnMenu: true,
columnMenuInit: function (e) {
var menu = e.container.find(".k-menu").data("kendoMenu");
var field = e.field;
// Option 1: use the kendoMenu API ...
menu.append({
text: "Rename"
});
// Option 2: or create custom html and append manually ..
var itemHtml = '<li id="my-id" class="k-item k-state-default" role="menuitem">' +
'<span class="k-link"><b>Manual entry</b></span></li>';
$(e.container).find("ul").append(itemHtml);
// add an event handler
menu.bind("select", function (e) {
var menuText = $(e.item).text();
if (menuText == "Rename") {
console.log("Rename for", field);
} else if (menuText === "Manual entry") {
console.log("Manual entry for", field);
}
});
}
})
See fiddle with two alternatives:
http://jsfiddle.net/lhoeppner/jJnQF/
I guess that the point of a filter is to filter, not to make changes on the grid.
But anyways i found this Kendo Post that may help you to achieve what you need.
You can also take a look a this one too.
I use jqgrid.I want use label in navgrid and dynamic change label text.
I can add button by navButtonAdd.
how to add label in navgrid?
Use the caption property of jqGrid navGrid. As given in the Wiki you can see that for existing navGrid buttons you can use the property addCaption/editCaption in case of Edit and caption in case of others to set the label.
As
caption: "Delete",
Since this is a string value you can directly assign a variable dynamically to set the label
If you really need to modify the text of the buttons added by inlineNav or navGrid you have to do this manually because jqGrid has no simplified function for this.
First of all you can use Developer Tools of Internet Explorer (press F12 to start), Firebug or other tools to examine the navigator buttons. You will see something like
The id of every button are constructed from the id of the grid and some button specific suffix. For example the "Edit" button added by inlineNav is "list_iledit" where "list" is the id of the grid and the suffix "_iledit"has the Edit button. To change the texts later you can use the code like
var $div = $("#" + grid[0].id + "_iledit>.ui-pg-div");
var $icon = $div.find(">span.ui-icon");
$div.text("edit"); // new text of the button
$div.append($icon);
$div.parent().attr("title", "my custom edit tooltip"); // new tooltip
You can use something like this:
.navGrid('#pager_list_1', {
//other codes
}).navButtonAdd('#yourpagerId', {
caption: "Del",
url: delUrl,
buttonicon: "ui-icon-trash",
onClickButton: function (response) {}
}