How to get a client side editor when working with MVC version of Kendo UI Grid? - kendo-ui

Question

Well, I'm really stuck here. This example by Telerik shows how to change a field when editing to whatever you need. Exactly,
columns: [
{ field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
],
...where "categoryDropDownEditor" is a client side function that does the trick.
In MVC version there seems to be nothing of the kind. Is there? I keep believing that it should. I just do not need to traverse partial HTML from server each time I need to decorate an input field. And this is seemingly what "EditorTemplate", the only one available for MVC, does.

Answer 1

OK. In case anyone will bump into the same. I ended up with this "too elegant" a solution:
.Events(e => e.Edit("editing"))
this line in grid initialization routine (server side) calls the named dynamic method (client side):
function editing(e) {
var input = e.container.find("input[name=Regex]");
var textbox = $(document.createElement('textarea')).attr({
id: input.id,
}).width(input.width()).height(input.height()).val(input.val());
input.hide();
textbox.insertAfter(input);
textbox.focus(function () {
/*to make this flexible, I'm storing the current width & height in an attribute*/
$(this).attr('data-defaultwidth', $(this).width());
$(this).attr('data-defaultheight', $(this).height());
$(this).animate({
width: 400
}, 'slow');
$(this).animate({
height: 300
}, 'slow');
}).blur(function () {
/* lookup the original width */
var w = $(this).attr('data-defaultwidth');
var h = $(this).attr('data-defaultheight');
$(this).animate({
width: w
}, 'slow');
$(this).animate({
height: h
}, 'slow');
input.val(textbox.val());
input.trigger('change');
});
}
End tada, although it's a pure hack.