简体   繁体   中英

Kendo Ui Grid disable button when in edit inline mode

I have a kendo grid with create, edit and delete buttons. I also have a next button outside the grid. What I want to do is prevent the user from clicking on the next button, if the user doesn't at least create/edit one record first.

<div ng-show="showActivePage === 'PageTwo'" ng-controller="inputFiscalYearController" >
    <div kendo-grid="myGrid"   k-options="gridOptionsFiscalYear" ></div> 

    <div ng-click="showActivePage = 'PageThree'"> Next </div>
    <div ng-click="showActivePage = 'PageOne'"> Back </div>
</div>


app.controller('inputFiscalYearController', ['$scope', function ($scope) {
$scope.isDisabled = false;
$scope.gridOptionsFiscalYear = {
    toolbar: ["create"],
     editable: true,
     pageable: true,
     edit: function(){
         alert();

     },

     columns: [
             {
                 field: "Name",
                 title: "Name",
                 width: "250px",
             },
             {
                 field: "Surname",
                 title: "Surname",
                 width: "250px",

             },
              {
                  title: "",
                  command: ["edit", "destroy"],
                  width: "105px"
              },
    ],
    editable: "inline",

    dataSource: {
        data: [

        ],
        pageSize: 10,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { editable: false },

                    Name: {
                        type: "string",
                        validation: {
                            required: {
                                message: "*Required"
                            }
                        }
                    },
                    Surname: {
                        type: "string",
                        validation: {
                            required: {
                                message: "*Required"
                            }
                        }
                    },
                }
            }
        }
    },
}
}]);

I'm not familiar with kendo-ui, but I do know Angular. Couldn't you just do:

<div ng-click="showActivePage = 'PageThree'" disabled="!gridOptionsFiscalYear.data.length"> Next </div>

I'm presuming that gridOptionsFiscalYear.data is where new records will be created.

Edit: didn't have the required negation on the length.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM