StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I was able to get it figured out. In the row template I am calling a js function and returning html markup for the list. Then setting the .kendoDropDownList on all items based on a class attribute. I have updated the jsfiddle <a href="http://jsfiddle.net/xF4CK/1/" rel="nofollow">here</a> but it doesn't seem to work in jsfiddle. It is working when I test in IE10 and Chrome on my dev machine.</p> <p><strong>Here's the relevant code changes:</strong></p> <p>In the rowTemplate, changed</p> <pre><code>#: actions # </code></pre> <p>to</p> <pre><code>#= renderDropDown(actions) # </code></pre> <p>This "=" displays the literal text which renders the html as html whereas the ":" encodes the html.</p> <p>The renderDropDown function:</p> <pre><code>function renderDropDown(actions) { var dropDownList = "<select class=\"insight-dropdown\">"; dropDownList = dropDownList + "<option value=\"default\" disable=\"disabled\">...</option>"; for (var i = 0; i < actions.length; i++) { dropDownList = dropDownList + "<option value=\"" + actions[i].url + "\">" + actions[i].name + "</option>"; } dropDownList = dropDownList + "</select>"; return dropDownList; } </code></pre> <p>To the dataBound event of the grid, I added this function to turn the html into a drop down list:</p> <pre><code>// Set the drop down lists $(".insight-dropdown").kendoDropDownList({ select: onDDLSelect }); </code></pre> <p>To handle the selection of an action:</p> <pre><code>function onDDLSelect(e) { var dataItem = this.dataItem(e.item.index()); alert(dataItem.value); } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload