如何通過雙擊獲得Kendo Grid的行ID

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() 
) 

我可以檢測到使用此功能的雙擊，但我如何獲得ID？

Answer 1

我已經用客戶端API和MVC擴展的等價物完成了這個例子。

創建一個網格div，在運行時創建一個網格。

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

創建一個行模板，以便我可以給該元素一個id標記。

<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> 

- 編輯 -

我也先行一步，創造了一個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)); 
});