disallow blank/empty cells in kendo grid

Question

How could I disallow a cell in my kendo grid to be 'blank' or 'empty' rather... How could I replace all blank or empties with a 0..

I have a save button grabbing the values from my kendo grid such as below: Everything works fine EXCEPT, it is completely omitting my empty cells.. I want to keep them, just have a 0 value on them...

Save button: want to keep the empties with simply a 0 or N/A..

            $('.' + chs).on('click', '#saveChanges', function(e) {

                    which = $(frm).attr("class");

                    let dataSource = $("#grid").data("kendoGrid").dataSource,
                    data = dataSource.data(),
                    changedModels = [];
                
                    if(dataSource.hasChanges) { // only saves cells/row that have been edited/changed, need to keep this
                        for(var i = 0; i < data.length; i++) {
                            if(data[i].dirty) { changedModels.push(data[i].toJSON()) }
                        }
                    }

                    let ds = JSON.stringify(changedModels);

                    $.ajax({
                        type: "POST",
                        url: "saveGrid",
                        dataType: "json",
                        data: {
                                id: which,
                                data: ds
                        },
                        success: function(result) {
                            console.log('yy');

                        },
                        error: function(result) {
                            console.log('nn');
                        }
                    });

                });

This is my kendo grid initialized:

         let dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/popGrid?id=" + which,
                    dataType: "json"
                },
            },
            batch: true,
            schema: { 
                data: "data",
                model: {
                    id: id,
                    }
                },
            });
            console.log(id);
            $("#grid").kendoGrid({
            dataSource: dataSource,
                height: 600,
                sortable: true,
                autoBind: true,
                nullable: true,
                editable: {
                    createAt: "top"
                },
                change: function(e) {
                    let grid = $("#grid").data("kendoGrid");  
                    let selectedItem = grid.dataItem(grid.select());  
                    let val = selectedItem.id; 
                    console.log(val);
                },
                selectable: "row",
                toolbar: [
                    { name: "create" },
                    { name: "cancel" }
                ],
                paging: false,
            });
                

Answer 1

I can't understand if you want to POST empty fields as "0" or if you want to SHOW them in the grid as "0", when null or "empty".

But I guess you're talking about posting it as "0". In that case I think you have to do that before posting:

let fieldName = 'myCell';
if (data[i].dirty) { 
    if (!data[i].hasOwnProperty(fieldName) || // In case field is not present on data
        !data[i][fieldName]) { // In case field value is null/undefined/0/false/empty string 
        data[i][fieldName] = 0;
    }

    changedModels.push(data[i].toJSON());
}

For multiple field check:

let fieldNames = ['fieldA', 'fieldB', ...],
    checkFields = (item) => {
        fieldNames.forEach(field => {
            if (!item.hasOwnProperty(field) || // In case field is not present on data
                !item[field]) { // In case field value is null/undefined/0/false/empty string 
                item[field] = 0;
            }
        });
    };

Or you can do the same before data is bound to the grid with dataSource.schema.parse.