Grid column binding with custom editor

[Roland]

How can i bind a custom editor to my grid

<div id="grid" data-role="grid" data-bind="source: gridDataSource" data-editable="inline" data-columns='[

        { "command": ["edit", "destroy"], "title": " ", "width": "120px" },

        { "field": "title", "width": "100px", "editor": "titleEditor"},

        { "field": "year", "width": "100px" }

    ]'>

     

</div>

I want that the titleEditor will be shown

function titleEditor(container, options) {

    var inputField = $('<input data-text-field="title" data-value-field="title" data-bind="value:' + options.field + '"/>');

    var button = $('<span unselectable="on" class="k-icon k-i-search">select</span>');

    button.click(function(e) {

        lookupdialog.dialog({

             

        });

    });

    inputField.after(button);       

    inputField.appendTo(container);

};

See my jsfiddle

Thanks