2

現在、KendoUIMVC拡張機能ベータ版をテストしています。ダブルクリックを実装しようとしています-編集しますが、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を取得するにはどうすればよいですか？

4

3 に答える 3

5

この例は、クライアント側のAPIと、MVC拡張機能を使用した同等のAPIを使用して実行しました。

実行時にグリッドを作成するには、グリッド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));
}

お役に立てれば！

于 2012-06-12T16:29:14.923 に答える
0

私はこのjsで私が探していたものを達成しました

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

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

}）;

于 2012-06-18T07:49:17.683 に答える
0

ダブルクリックで編集モードを開くには、次のようにダブルクリックイベントをグリッドに登録する必要があります。

var grid = $("#grid").data("kendoGrid");
grid.element.delegate("tbody>tr", "dblclick", function () {
    grid.editRow($(this));
});
于 2015-01-30T21:16:57.007 に答える