CODEWITHSUNDEEP
angularjshtmltelerikkendo-grid
Chtioui Malek
Chtioui Malek

Reputation: 11515

Invalid rows count in KendoUI Grid

I have a form containing a KendoUi grid, i want to enable the submit button only when the grid has rows (using ng-disabled).

I can get the rows count with kGrid.dataSource.data().length, the count is correct when the grid has rows, but when i delete or cancel the last row the count is 1 and doesn't update to 0 as expected.

I've reproduced this behavior here : https://refork.codicode.com/xa12, just click the 'Add new record' button, then cancel.

Upvotes: 0

Views: 390

Answers (1)

Deepak Kushvah
Deepak Kushvah

Reputation: 278

Please try with below code.

<body>
    <div class="ng-scope" data-ng-app="myApp">
        <div class="ng-scope ng-binding" data-ng-controller="myController">

            <div style="" class="k-grid k-widget" data-role="grid" kendo-grid="kGrid" options="mainGridOptions"><div class="k-header k-grid-toolbar ng-scope"><a class="k-button k-button-icontext k-grid-add" href="#"><span class="k-icon k-add"></span>Add new record</a></div><div style="padding-right: 17px;" class="k-grid-header"><div class="k-grid-header-wrap k-auto-scrollable"><table role="grid"><colgroup><col><col style="width:100px"><col style="width:100px"><col style="width:180px"></colgroup><thead role="rowgroup"><tr role="row"><th class="k-header ng-scope" role="columnheader" data-field="aname" rowspan="1" data-title="Article" data-index="0" id="0a08329f-d7f3-48d5-933b-e72b9d3c9a7f">Article</th><th class="k-header ng-scope" role="columnheader" data-field="price" rowspan="1" data-title="Price" data-index="1" id="273ccd7b-5585-4e45-a815-438d9ee68fbf">Price</th><th class="k-header ng-scope" role="columnheader" data-field="qty" rowspan="1" data-title="Quantity" data-index="2" id="afe572ff-58f7-4923-a03c-755e7c841e31">Quantity</th><th class="k-header ng-scope" id="ce99e1ab-46a8-4b4c-8f92-6277477ba4d9" rowspan="1" data-index="3">&nbsp;</th></tr></thead></table></div></div><div class="k-grid-content k-auto-scrollable"><table role="grid"><colgroup><col><col style="width:100px"><col style="width:100px"><col style="width:180px"></colgroup><tbody role="rowgroup"></tbody></table><div style="width: 1245px;" class="k-grid-content-expander"></div></div></div>

            <br>
            <br>
            Lines number  : <span id="spnCount"></span>
            <!--{{ kGrid.dataSource.data().length }}-->

        </div>
    </div>
    <script>
        var ultiApp = angular.module('myApp', ['kendo.directives']);

        var docLines = [];
        var counter = docLines.length;

        ultiApp.controller('myController', function ($scope) {

            $scope.mainGridOptions = {
                dataSource: {
                    transport: {
                        read: function (o) { o.success(docLines); },
                        create: function (o) {
                            var item = o.data;
                            item.id = counter++;
                            o.success(item);
                            document.getElementById("spnCount").innerHTML = counter;
                        },
                        update: function (o) { o.success(); },
                        destroy: function (o) {
                            o.success();
                            counter--;
                            document.getElementById("spnCount").innerHTML = counter;
                        }
                    },
                    schema: {
                        model: {
                            id: "id",
                            fields: {
                                aname: { validation: { required: true } },
                                price: { type: "number", validation: { min: 0, required: true } },
                                qty: { type: "number", validation: { min: 0, required: true } }
                            }
                        }
                    }
                },

                pageable: false,
                toolbar: ["create"],
                editable: "popup",
                columns: [
                  { field: "aname", title: "Article" },
                  { field: "price", title: "Price", format: "{0:c}", width: "100px" },
                  { field: "qty", title: "Quantity", width: "100px" },
                  { command: ["edit", "destroy"], title: "&nbsp;", width: "180px" }
                ]
            }

        });
    </script>
</body>

Upvotes: 1

Related Questions