jquery - Override KendoUI Autocomplete selected value -

how override function takes value selected or typed in user , puts triggering input?

e.g. datasource is:

[     {         id: 1,         name: "tim"     },     {         id: 2,         name: "bob"     } ] 

i want autocomplete return:

<span class="my-class">tim</span> 

instead of tim

i using editor cell in kendoui grid once cell no longer being edited html so:

<td role="gridcell"><span class="my-class">tim</span></td> 

---

here editor grid column:

function partnumberscanner(container, options) {   partid = options.model.id;   var autoc = $('<input class="k-input data-value-field="id" k-textbox part-sniffer" data-bind="value:' + options.field + '"/>')   autoc.appendto(container);   autoc.kendoautocomplete({     datatextfield: "idealform",     datavaluefield: "id",     delay: 50,     datasource: {       serverfiltering: true,       transport: {         read: {           url: root+"part/fetch-parts",           type: "post",           datatype: "json"         }       },       error: function(e) {         alert(e.errorthrown+"\n"+e.status+"\n"+e.xhr.responsetext) ;       },       schema: {         id: "id",         idealform: "idealform",         manufacturer: "manufacturer"       }     },     minlength: 5,     filter: "contains",     placeholder: "start typing...",     //template: '#= "<li class=\'k-item\' role=\'option\' data-manufacturer=\'"+manufacturer+"\'>"+idealform+"</li>" #',     select: function(e)     {       matchedpartdata = this.dataitem(e.item.index());       manufacturer = matchedpartdata.manufacturer;     },     change: function(e) {      // selectedpart = this.value();       $.each(partdata, function(i, v){         if(partid == v.id)         {           targetid = ;           return false         }       })       partdata[targetid].manufacturer = manufacturer;       grid.datasource.sync();       }   }); } 

the problem change callback called while cell still in edit mode, need alter value returned change.

---

i making user types in part number, , if parts found starting user has typed, shown in autocomplete , can selected.

once value has been typed , grid cell leaves edit mode, bootstrap popover needs placed on value in cell.

hope have explained enough.

---

i tried earlier still couldn't work. have:

template: "<span data-content=''>#= partnumber #</span>" 

what need happen once selection made, ajax call made brings data gets put data-content attr of cell.

---

change: function(e) { ... options.model.set(options.field, '<span class="part-intel">'+this.value()+'</span>'); grid.datasource.sync(); $.ajax({           url: root+'part/partanalysis',           async: false,           success: function(data)           {             element = container.find('span.part-intel');             /*element.popover({             html: true,             content: data           })*/             alert(element.html()) // shows undefined            // element.popover('show');           }         }) }) 

for setting value should use value function. doing inside change event handler is:

change: function(e) {     e.sender.value("new value"); } 

edit since in case have access row model since in editor function partnumberscanner receive in options can do:

change: function(e) {     options.model.set(options.field, "new value"); }