Kendo grid with inline editable list

Question

I need to implement a grid with editable entries. One of entity fields is list of strings. For example, it's an order list and each order may have several tracking numbers. So I need it to implement a widget that will support displaying the list of entities, ability to add and delete items. And (the most important thing) it has to work within Kendo grid.

So I've built a sample widget ...

(function (jQuery) {

var ui = kendo.ui;
var Widget = ui.Widget;

var TrackingNumbersList = Widget.extend({
    addEntryToList: function (event, value) {
        if (value == undefined) {
            var value = this.valueInput.val();
            if (value != null && value != "") {
                this.addEntryToList(event, value);
            }
        } else {
            this.domElement.find("div#valuesContainer").append($j("<div valueContainer></div>").html(value));
            this.valueInput.val('');
        }
    },
    clear: function () {
        this.domElement.find("div[valueContainer]").remove();
    },
    renderInterface: function () {
        var that = this;

        this.domElement.append("<div id='valuesContainer'></div>");
        this.valueInput = $j("<input id='txtValue' type='text' />");

        this.domElement.append(
        $j("<div></div>").append(this.valueInput)
        .append($j("<input type='button' value='Add' />").click($j.proxy(that.addEntryToList, that)))
        .append($j("<input type='button' value='Delete all' />").click($j.proxy(that.clear, that)))
        );
    },
    init: function (element, options) {
        this.domElement = $j(element);
        this.renderInterface();
        Widget.fn.init.call(this, element, options);
        this.element = element;
    },

    options: { name: "TrackingNumbersList" },
    value: function () {
        var result = [];
        this.domElement.find("div[valueContainer]").each(function (index, el) {
            result.push($j(el).html());
        });
        return result;
    },
    value: function (val) {
        this.clear();
        var that = this;
        $j(val).each(function (index, value) {
            that.addEntryToList(null, value);
        });
    }
});
ui.plugin(TrackingNumbersList);})(jQuery);

And now I want to ask if anyone has an idea how to get this stuff working within Kendo Grid. Appreciate any help .

Competency

Answer 1

If I understand you correctly, the kendo multi select control should do the job. I think it would be much easier to use in kendo grid

Flexed

I'm rather trying to understand how to build a widget that will work fine inside Kendo Grid. I really want to understand this. – Competency

Answer 2

Try an EditorTemplate with grid inline edit, This may solve your problem

Refract

Give some example code so the fellow user may understand more clearly – Lixiviate

Answer 3

You can use the Editing-inline like this. You can add, edit and delete a record in the kendo grid.

Sarraute