Question

如何在kendo网格中始终显示数据源末尾的默认数据输入行？

我希望在网格底部始终有一个带有输入行的kendo网格。当我输入数据并按＆＃39;输入＆＃39;键，数据应从上到下插入网格，但默认数据输入行应保持在网格底部。

下面是网格初始化。我使用了angularjs / javascript和kendo网格。

    //-> Grid Sample data for demo purposes

        var s1 = [];

        //@@@@@@@@@@@@@@@@@@@@@@@@@@

        //-> Grid Start


        var configAddPaymentsEnter = {};

        configAddPaymentsEnter.resizable = true

        configAddPaymentsEnter.sortable = true;

        configAddPaymentsEnter.pageable = false;
        //{
        //  input: true,
        //  numeric: false
        //   };
        configAddPaymentsEnter.editable =
        {
            createAt: 'bottom'
        };

        configAddPaymentsEnter.columns = [

                {
                    field: "ConnectionReference",
                    attributes: {
                        "navi-text": ""
                    },
                    headerTemplate: 'Connection Reference',
                    template: '<input ng-keydown="AA(this,$event)" type ="text"   ng-model="dataItem.ConnectionReference"  class="k-fill text-right aa" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/"    />',
                    width: "130px"
                    // ,aggregates: ["count"], footerTemplate: "Total Count: #=count#"
                },
                 {
                     field: "ContractNumber",
                     attributes: {
                         "navi-text": ""
                     },
                     headerTemplate: 'Contract Number',
                     template: '<input ng-keydown="AA(this,$event)" type ="text"   class="k-fill text-right aa"  ng-model="dataItem.ContractNumber"  format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/"    />',
                     width: "130px"
                 },
                  {
                      field: "Amount",
                      attributes: {
                          "navi-text": ""
                      },
                      headerTemplate: 'Amount',
                      template: '<input ng-keydown="AA(this,$event)" kendo-numeric-text-box type ="text"  class="k-fill text-right aa"  ng-model="dataItem.Amount" format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/"    />',
                      width: "130px"

                      // ,aggregates: ["sum"], footerTemplate: "Total Amount: #=sum#"
                  },
                  {
                      field: "ReferenceNumber",
                      attributes: {
                          "navi-text": ""
                      },
                      headerTemplate: 'Reference Number',
                      template: '<input ng-keydown="AA(this,$event)"  type ="text"    class="k-fill text-right aa"  ng-model="dataItem.ReferenceNumber"  format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/"    />',
                      width: "130px"
                  }
                  //,
                  //{
                  //    field: "RowIndex",
                  //    attributes: {
                  //        "navi-text": ""
                  //    },
                  //    headerTemplate: 'RowIndex',
                  //    template: '<input ng-keydown="AA(this,$event)"  type ="text"    class="k-fill text-right aa"  ng-model="dataItem.RowIndex"  format-number ng-pattern="/^[0-9]+(\.[0-9]{2})?$/"    />',
                  //    width: "130px"
                  //}
        ];


        configAddPaymentsEnter.scrollable = true;

        configAddPaymentsEnter.dataSource = new kendo.data.DataSource({
            data: [s1],
            //group: {
            //    field: "ConnectionReference", aggregates: [
            //       { field: "ConnectionReference", aggregate: "count" },
            //       { field: "Amount", aggregate: "sum" }
            //    ]
            //},

            //aggregate: [{ field: "ConnectionReference", aggregate: "count" },
            //              { field: "Amount", aggregate: "sum" }],            

            schema: {
                model: {
                    id: "ID",
                    fields: {

                        'ConnectionReference': { editable: true, type: "number" },
                        'ContractNumber': { editable: true, type: "number" },
                        'Amount': { editable: true, type: "number" },
                        'ReferenceNumber': { editable: true, type: "number" }
                        //,
                        // 'RowIndex': { editable: false, type: "number" }


                    }
                }
            },
            pageSize: 5000,

        });

        $scope.dgGridAddPaymentsEnter = new DataGrid();
        $scope.dgGridAddPaymentsEnter.options(configAddPaymentsEnter);

        $scope.Init = function (arg) {
            $scope.dgGridAddPaymentsEnter.Init(arg);
        };
        $scope.Init = function (arg) {
            $scope.dgGridAddPaymentsEnter.Init(arg);
        };

Answer 1

这个'怎么样'的例子会有所帮助： http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/add-row-when-tabbed-out-of-last-row

Answer 2

您可以尝试使用Kendo Grid UI的锁定选项。

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#locking

但是，据我所知，目前不支持冻结行。最好的技术是将冻结的数据包含在网格的页脚中，并负责手动将任何更改（编辑）同步到数据值

我如何始终在数据源angularjs的末尾显示kendo网格默认数据行

2 个答案: