CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-gridkendo-ui-grid
San
San

Reputation: 79

How to add empty last row to Kendo Ui grid by default

I need to add empty last row to Kendo UI grid by default in edit mode. I am getting data from api and If I try to add empty row at last its getting called first and api is getting called after.How can I do it.I don't want to have set timeout. I tried adding empty record in data source but for that I need to do so many things

var dataSource = new kendo.data.DataSource({
                type: "odata",
                serverPaging: false,
                serverSorting: false,
                serverFiltering: false,
                //pageSize: 20,
                schema: {
                    data: function (data) {
                        var resultData = [];
                        if (data.value != null && data.value[0].Payload != null && data.value[0].Payload != "[]")
                            resultData = JSON.parse(data.value[0].Payload);
                        return resultData;
                    },
                    total: function (data) {
                        var length = 0;
                        if (data.value != null)
                            length = data.value[0].PayloadCount;
                        return length;

                    },
                    model: {
                        id: that.gridProperties.PrimaryKeyName,
                        fields: that.gridProperties.Schema
                    }

                },
                change: that.onGridDataChanged,
                transport: {
                    read: {

                        url: that.gridProperties.DataSourceURL,
                        contentType: "application/json; charset=utf-8",
                        type: "GET",
                        dataType: "json"
                    }
                }
            });         
  $('#' + that.gridProperties.ControlId).kendoGrid({
                height: "100%",
                scrollable: true,
                filterable: true,
                sortable: true,
                resizable: true,
                pageable: false,
                noRecords: true,
                editable: that.gridProperties.Editable,
                selectable: !that.gridProperties.AllowMultiSelect, //If multiselect is false enable row selection
                columns: gridColumns,
                dataSource: dataSource,
                edit: that.onGridEdit,
                // This is required to update the calculated column as soon as user enters/types new values 
                save: function (e) {
                    var dataSource = this.dataSource;
                    that.updateFormulaColumn(e, dataSource);

                    e.model.one("change", function () {
                        dataSource.fetch();
                    });
                },
               
            });
            var grid = $('#' + that.gridProperties.ControlId).data("kendoGrid");
            grid.addRow()

Upvotes: 0

Views: 2147

Answers (2)

deep206
deep206

Reputation: 104

You can set the datasource with requestEnd to add an empty row at the end of your grid row data.

        dataSource: {
            type: "GET",
            dataType: "json",
            transport: {
                read: "url"
            },
            requestEnd: function(e) {
              e.response.d.results.push({Field: ''});
            }
        }

Also, this results in having the empty cell to behave differently and have a smaller height which you can resolve by adding following css.

        .k-grid tr{height: 33px;}

Upvotes: 1

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

Try using dataSource's requestEnd event. You can add an empty row at the end of your data list:

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/grid/remote-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2020.3.1118/js/jquery.min.js"></script>
    
    
    <script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>
    
    

</head>
<body>
    <div id="example">
    <div id="grid"></div>
    <script>
        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
                    },
                    requestEnd: function(e) {
                      e.response.d.results.push({CategoryName: ''});
                    }
                },
                height: 550,
                filterable: true,
                sortable: true,
                pageable: true,
                columns: [
                    "CategoryName"
                ]
            });
        });
    </script>
</div>


    

</body>
</html>

Demo

Upvotes: 0

Related Questions