javascript - How to Add a Drop Down List in a Kendo UI Grid -

using kendo ui , row template, have grid started following:

http://jsfiddle.net/xf4ck/

i'm wanting alter actions column contain drop down list populated actions object. actions object contains display text , relative url path following example:

var actions = [     { name: "edit", url: "reports/report/1" },     { name: "delete", url: "reports/delete/1" } ]; 

this actions object on each row of grid , may vary per row/user/etc. intended usage user selects drop down list , chooses 1 of options. on choosing option url value posted.

i'm not sure begin, or if possible in row template. appreciated.

i able figured out. in row template calling js function , returning html markup list. setting .kendodropdownlist on items based on class attribute. have updated jsfiddle here doesn't seem work in jsfiddle. working when test in ie10 , chrome on dev machine.

here's relevant code changes:

in rowtemplate, changed

#: actions # 

to

#= renderdropdown(actions) # 

this "=" displays literal text renders html html whereas ":" encodes html.

the renderdropdown function:

function renderdropdown(actions) {     var dropdownlist = "<select class=\"insight-dropdown\">";      dropdownlist = dropdownlist + "<option value=\"default\" disable=\"disabled\">...</option>";      (var = 0; < actions.length; i++) {         dropdownlist = dropdownlist + "<option value=\"" + actions[i].url + "\">" + actions[i].name + "</option>";     }      dropdownlist = dropdownlist + "</select>";     return dropdownlist; } 

to databound event of grid, added function turn html drop down list:

// set drop down lists $(".insight-dropdown").kendodropdownlist({     select: onddlselect }); 

to handle selection of action:

function onddlselect(e) {     var dataitem = this.dataitem(e.item.index());     alert(dataitem.value); }