如何在Kendo网格中添加具有预定义数据的新行？

Question

I'm trying to add a new row to a kendo grid with selected data from another kendo grid. Its showing a blank row but no data. Here is my code:

        var PunishmentGridDataSource = new kendo.data.DataSource({
            schema: {
                model: {
                    id: "DICP_ACTN_TYPE_CODE",
                    fields: {
                        DICP_ACTN_TYPE_SLNO: { editable: false },
                        DICP_ACTN_TYPE_CODE: { editable: false },
                        DICP_ACTN_TYPE_NAME: { editable: false }
                    }
                }
            },
            pageSize: 5,
            data: [
                        { DICP_ACTN_TYPE_SLNO: "1", DICP_ACTN_TYPE_CODE: "1", DICP_ACTN_TYPE_NAME:"aa" }]
        });





        var PunishmentGrid = $("#PunishmentGrid").kendoGrid({
            dataSource: PunishmentGridDataSource,
            pageable: true,
            editable: 'false',
            selectable: "row",
            navigatable: true,
            filterable: true,
            sortable: true,
            groupable: true,
            scrollable: true,
            width: '250PX',
            height: '200PX',
            columns: [
              { field: "DICP_ACTN_TYPE_SLNO", title: "SL.", filterable: false, width: "30px" },
              { field: "DICP_ACTN_TYPE_CODE", title: "Code", filterable: false, width: "50px" },
              { field: "DICP_ACTN_TYPE_NAME", title: "Name", filterable: true, width: "120px" }


            ]
        });


//Handling Yes button click for grid row Selection
        $('#btnListOfValue2OK').click(function (idx, elem) {
            ClearOperationMsgTextBoxRedColor();

            var grid = $("#ListOfValueWindowGrid2").data("kendoGrid");
            var selectedItem = (grid.dataItem(grid.select()));
            var rows = grid.select(); // Can I select multiple rows by this & bind directly to the data source of another grid??





            var obj = [{ DICP_ACTN_TYPE_SLNO: selectedItem.DICP_ACTN_TYPE_SLNO, DICP_ACTN_TYPE_CODE: selectedItem.DICP_ACTN_TYPE_CODE, DICP_ACTN_TYPE_NAME: selectedItem.DICP_ACTN_TYPE_NAME }];

            var ds = $("#PunishmentGrid").data("kendoGrid").dataSource;
            ds.add(obj);
            ds.data();

            CloseListOfValueDialog2();

        });

May be I'm missing something very fundamental. Please help me to find out!

Answer 1

I tried a similar setup which works as expected:

$("button").click(function() {
  var parent = $("#parent-grid").data("kendoGrid");
  var child = $("#child-grid").data("kendoGrid");

  var selectedDataItem = parent.dataItem(parent.select());

  if (selectedDataItem) {
    child.dataSource.add({
      foo: selectedDataItem.foo
    });
  }
});

Here is a live demo: http://jsbin.com/EpeMiwe/1/edit