PK of Kendo Grid Row

Question

<%: Html.Kendo().Grid<Model>()
        .Name("Grid")
        .BindTo((IEnumerable<Model>)ViewBag.List)
        .Columns(columns =>
        {
            columns.Bound(p => p.PK).Title("pk");
            columns.Bound(p => p.NAME).Title("Name");


            columns.Command(command => command.Custom("Delete").Click("Delete")).Width(100);

        })

        %>     


<div id="modalWindow">
            <h2>Delete?</h2>
            <button id="yes" class="k-button">Yes</button>
            <button id="no" class="k-button">No</button>
        </div>


        <script>             

            var wnd;
            $(document).ready(function () {
                wnd = $("#modalWindow").kendoWindow({
                    title: "Delete confirmation",
                    modal: true,
                    visible: false,
                    resizable: false,
                    width: 300
                }).data("kendoWindow");

            });


            function Delete(e) {
                e.preventDefault();

                var grid = this;
                var row = $(e.currentTarget).closest("tr");
                wnd.center().open();



                $("#yes").unbind('click').click(function () {       

                    $.ajax({                          

                        type: 'POST',
                        url: '/Home/Delete',
                        data: ???
                        contentType: 'application/json; charset=utf-8',


                        success: function (result) {

                        },
                        error: function (err, result) {
                        alert("Error in delete" + err.responseText);
                        }

                    });                   

                    grid.removeRow(row);
                    wnd.close();
                });


                $("#no").unbind('click').click(function () {
                    wnd.close();
                });
            }      
        </script>

Hello,

I want to delete the row of the related custom delete button of a Kendo Grid. The script works great but I have a problem with data. I don't know how to get the PK of the row and I need it to delete the record.

How could I get it on click of my custom button?

Regards

Answer 1

Do you know the underlying dataItem's ID property ? You can grab the dataItem from the grid's datasource once you have the row. So after the var row = $(e.currentTarget).closest('tr'); you can add a var dataItem = grid.dataItem(row); And then you should be able to get the id property of the dataItem dataItem.id (or some such);

Answer 2

You need to use the dataItem function in order to convert the tr element into a data object:

function Delete(e) {
    e.preventDefault();

    var grid = this;
    var row = $(e.currentTarget).closest("tr");
    var obj = grid.dataItem(row); //<---
    wnd.center().open();

    $("#yes").unbind('click').click(function () {       
       $.ajax({                          
          type: 'POST',
          url: '/Home/Delete',
          data: obj.PK, //<---
          contentType: 'application/json; charset=utf-8',
          success: function (result) {
          },
          error: function (err, result) {
             alert("Error in delete" + err.responseText);
          }
       });                   

       grid.removeRow(row);
       wnd.close();
    });

    $("#no").unbind('click').click(function () {
       wnd.close();
    });
}