CODEWITHSUNDEEP
kendo-uikendo-asp.net-mvc
Leonid Zakirov
Leonid Zakirov

Reputation: 21

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

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.

Upvotes: 0

Views: 191

Answers (1)

Leonid Zakirov
Leonid Zakirov

Reputation: 21

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.

Upvotes: 1

Related Questions