Как получить идентификатор строки из сетки Kendo с помощью двойного щелчка

Question

В настоящее время я тестирую бета-версию Kendo UI MVC Extensions Beta. Я пытаюсь реализовать двойной щелчок - редактировать, но я не знаю, как я могу получить rowId.

JavaScript:

$('#GridPedidos table tr').live('dblclick', function() { 
    alert(' grid dbl clicked'); 
}); 

Вид:

@(Html.Kendo().Grid(Model) _ 
.Name("GridPedidos") _ 
    .Columns(Sub(column) 
       column.Bound(Function(item) item.idPedidoDocumentacao).Width("5%") 
       column.Bound(Function(item) item.descEstadoPedidoDoc).Width("25%") 
       column.Bound(Function(item) item.descTipoPedidoDoc).Width("25%") 
       column.Bound(Function(item) item.data).Width("25%").Format("{0:dd-MM-yyyy}") 
       column.Command(Function(item) item.Destroy()).Width("10%") 
      End Sub) _ 
    .DataSource(Sub(ds) 
        ds.Ajax().ServerOperation(False).Read(Sub(s) 
                   s.Action("GetListaGrid", "listaPedidos") 
                  End Sub).Create(Sub(s) 
                       s.Action("detalhePedido", "Pedidos") 
                      End Sub).Model(Sub(m) 
                          m.Id(Function(p) p.idPedidoDocumentacao) 
                         End Sub).Destroy(Sub(d) 
                               d.Action("apagaPedido", "listaPedidos") 
                              End Sub) 
       End Sub) _ 
    .Selectable() 
) 

я могу обнаружить двойной щелчок этой функции, но как я могу получить идентификатор?

Answer 1

Я сделал этот пример с клиентской стороной api и эквивалентом с расширениями MVC.

Создайте сетку div, чтобы создать сетку во время выполнения.

<div id="grid" style="width: 400px;"></div> 

Создал шаблон строки, чтобы я мог присвоить элементу идентификатор.

<script id="rowTemplate" type="text/x-kendo-tmpl"> 
    <tr> 
     <td id="EmployeeId"> 
     ${ EmployeeID } 
     </td> 
     <td> 
     ${ FirstName } 
     </td> 
     <td> 
     ${ LastName } 
     </td> 
    </tr> 
</script> 

Инициализировать сетку и привязать данные.

<script> 
    $(document).ready(function() { 
     $("#grid").kendoGrid({ 
      columns: [ 
       "EmployeeID" 
       ,{ 
        field: "FirstName", 
        title: "First Name" 
       },{ 
        field: "LastName", 
        title: "Last Name" 
       } 
      ], 
      dataSource: { 
       data: [ 
        { 
         EmployeeID: 0, 
         FirstName: "Joe", 
         LastName: "Smith" 
        }, { 
         EmployeeID: 1, 
         FirstName: "Jane", 
         LastName: "Smith" 
        } 
       ], 
       schema: { 
        model: { 
         id: "EmployeeID", 
         fields: { 
          EmployeeID: {type: "number" }, 
          FirstName: { type: "string" }, 
          LastName: { type: "string" } 
         } 
        } 
       }, 
       pageSize: 10 
      }, 
      scrollable: { 
       virtual: true 
      }, 
      sortable: true, 
      pageable: true, 
      rowTemplate: kendo.template($("#rowTemplate").html()) 
     }); 

     //Add a double click event that will return the text in the EmployeeId column. 
     $('#grid table tr').dblclick(function() { 
      alert($(this).find("td[id=EmployeeId]")[0].innerText); 
     }); 
    }); 
</script> 

--EDIT--

Я также пошел вперед и создал расширений пример MVC, подход такой же по маршруту шаблона. Класс

Модели:

public class Employee 
{ 
    public int EmployeeId { get; set; } 
    public string Name { get; set; } 
} 

Посмотреть код:

<script type="text/javascript"> 
    function OnDataBound() { 
     $('#OtherGrid table tr').dblclick(function() { 
       alert($(this).find("span[id=EmployeeId]")[0].innerText); 
     }); 
    } 
</script> 


@(Html.Kendo().Grid<Employee>() 
    .Name("OtherGrid") 
    .Columns(columns => 
    { 
     columns.Bound(p => p.EmployeeId).ClientTemplate("<span id=\"EmployeeId\">#: EmployeeId #</span>"); 
     columns.Bound(p => p.Name); 
    }) 
    .DataSource(dataSource => dataSource 
     .Ajax() // Specify that the data source is of ajax type 
     .Read(read => read.Action("GetEmployees", "Home")) // Specify the action method and controller name 
    ) 
    .Events(e => e.DataBound("OnDataBound")) 
) 

Контроллер:

public ActionResult GetEmployees([DataSourceRequest]DataSourceRequest request) 
{ 
    List<Employee> list = new List<Employee>(); 
    Employee employee = new Employee() { EmployeeId = 1, Name = "John Smith" }; 
    list.Add(employee); 
    employee = new Employee() { EmployeeId = 2, Name = "Ted Teller" }; 
    list.Add(employee); 

    return Json(list.ToDataSourceResult(request)); 
} 

Надеется, что это помогает!

Answer 2

Я достиг того, что я искал с этим Js

$('#GridPedidos table tr').live('dblclick', function() { 
var grid = $("#GridPedidos").data("kendoGrid"); 
var dItem = grid.dataItem($(this)); 

if (dItem != null) { 
    detalhePedido(dItem.id); 
} 

});

Answer 3

Чтобы открыть режим редактирования с двойным щелчком мыши вы должны зарегистрировать двойное событие щелчка с сеткой, как это:

var grid = $("#grid").data("kendoGrid"); 
grid.element.delegate("tbody>tr", "dblclick", function() { 
    grid.editRow($(this)); 
});