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)"
Related
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.
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 have a kendo grid in pop up edit mode. First field of the pop up form is auto complete widget. I want to give focus on it whenever the pop up form pops up. I tried to do this in different way as
$("#grid").kendoGrid({
editor:
function(container, options) {
$('<input id="item_code_focus" name="' + options.field + '"/>')
.appendTo(container)
.kendoAutoComplete({
-----
-----
}).focus()
}
});
But it is not working. Please help me?...
You could try and use the edit event of the Grid.
edit:function(e){
e.container.data('kendoWindow').bind('activate',function(e){
$('#autocomplete').focus();
})
},
EDIT: Actually you should use the Window activate event to call focus. Here is example. #OnaBai calling focus when using the edit does not make the input to lose focus - actually the animation causes this behavior.
I searched all over and can't seem to find the answer.
I have a MVC3 project with a WebGrid on it. The first column is a Select that is currently using the normal item.GetSelectLink to create a link to select that row.
I want this to be a checkbox instead of the test "Select". When the user hits the checkbox I want that row in the grid to be selected and the box to become "checked".
I would like the checked and unchecked states to be images that I provide.
How do I do this?
Unless you're doing something fancy with Ajax, the "select" link refreshes the page with "Selected=index" added to the query string. That would be an unusual experience, because people aren't used to checkboxes triggering a page reload.
You could do something like this, which completely mimics the "Select" link functionality. First add the checkbox to the row:
grid.Column(
format: (item) => #Html.Raw("<input class='select' type='checkbox'" + ((grid.SelectedRow == item) ? "checked" : "") + " />")
)
Then add some Javascript to handle the checkbox clicks:
var index = 1;
$("input.select").each(function () {
$(this).data('row', index);
$(this).click(function () { window.location = "?Selected=" + $(this).data('row'); });
index++;
});