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

Question

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

1.9k Views Asked by San At 04 April 2025 at 21:40

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()

Original Q&A

There are 2 best solutions below

deep206 On 08 January 2021 at 17:09

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;}

**DontVoteMeDown** · Accepted Answer

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

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

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in KENDO-UI

Related Questions in KENDO-GRID

Related Questions in KENDO-UI-GRID

Trending Questions

Popular # Hahtags

Popular Questions