Kendo UI Dropdown Action Links

Question

I'm trying to add dropdown to the 4th col but not sure how to do that. I want to do the following:

• Add Action dropdown with Delete, Update, Edit options
• When I click on delete, update or edit I want to call some function

Here is what I have so far:

http://jsfiddle.net/JQPurfect/5wZ3R/1/

{field: 'Title', filterable: { ui: titleFilter }},
{field: 'City', title: 'City', filterable: { ui: cityFilter }},
{field: 'FirstName', title: 'Action', filterable: { ui: nameFilter }} //This is where I want the dropdown.

Answer 1

you have to use the kendo template to place the select in the 4th col

<script type="text/x-kendo-template" id="selectTemplate">
  <select class='action' data-id="#=data.id#" >
                        <option value="">Select an action</option>
                        <option value="Edit">Edit</option>
                        <option value="Delete">Delete</option>
                    </select>
    </script>

and use this template in that col

{field: '', title: 'Action', filterable: { ui: nameFilter },template : $('#selectTemplate').html()}

and wired the change event to all the select elements

$('#grid').on('change','.action',function(){
                     alert($(this).val());
 });

here is the updated fiddle http://jsfiddle.net/cT3YK/2/