@{
    ViewBag.Title = "Home Page";
}

@(Html.Kendo().Grid<KendoMVCWrappers.Models.Person>().Name("persons")
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model=>model.Id(m=>m.PersonID))
                    .Read(read => read.Action("GetPersons","Home"))
            )
            
            .Columns(columns =>
            {
                columns.Template(@<text></text>).ClientTemplate(
                    Html.Kendo().DropDownList().Name("commandDDL#=PersonID#").Items(items =>
                        {
                            items.Add().Text("Edit").Value("1");
                            items.Add().Text("Delete").Value("2");
                            items.Add().Text("Save").Value("3");
                            items.Add().Text("Cancel").Value("4");
                        })
                        .HtmlAttributes(new { style = "width:250px" })
                        .OptionLabel("Select Command To Execute")
                        .DataTextField("Text")
                        .DataValueField("Value")
                        .Events(ev => ev.Change("onDDLSelect"))
                        .ToClientTemplate().ToHtmlString())
                  .Width(250);
                columns.Bound(c => c.PersonID);
                columns.Bound(c => c.Name);
                columns.Bound(c => c.BirthDate);
               
            })
            .Editable(ed=>ed.Mode(GridEditMode.InLine))
            .Events(ev=>ev.DataBound("dataBound"))
            .Pageable()
            .Sortable()
        )


<script type="text/javascript">
    function onDDLSelect(e) {

        var grid = $('#persons').data('kendoGrid');
        var row = this.element.closest('tr');
        if (this.value()==1) {
            grid.editRow(row);
        } else if (this.value() == 2) {
            grid.removeRow(row);
        }
        else if (this.value() == 3) {
            grid.saveRow(row);
        }
        else if (this.value() == 4) {
            grid.cancelRow(row);
        }    
        this.value("");
    }

    function dataBound(e) {
        $(this.element).find('script').appendTo('body');
    }
</script>
