Add row to Kendo grid dynamically

[abdul]

Hi,

I want to load a kendo grid, after load the grid should add a new row at the bottom of the grid. I want as per below screenshot.

 

This is the below method i am using to create a new row.

function AddNewRow() {
    var newRow = { field: "TlpModifierNew",  Value: 0 };
    var gridName = nmdModelGridTabNames[activeNmdModel3TabId - 1];
    var grid = $("#" + gridName).data("kendoGrid");
    grid.dataSource.add(newRow);
    var theCell = $('#' + gridName + " " +'tbody'+ " " +'tr:last-child td:eq(1)');
    $("#" + gridName).data('kendoGrid').editCell(theCell);     
}

function onRequestEnd(e) {
    debugger
    if (e.type == 'create') {
        NMDModelGridRefresh();
    }

    if (e.response) {
        AddNewRow();
    }
}

 

When the Kendo grid loads then, it is creating the new row, but after that it will load the records from the database and then refresh the screen and the new row is removing.

After that it is not calling AddNewRow(); method as onRequestEnd method is called once.

Can we somehow call this AddNewRow();  method after the grid is loaded with records.

[Mihaela]

Hello Abdul,

The easiest approach is the following:

• Set the AutoBind(false) option, which will prevent the initial data binding of the Grid when it is loaded.
• Within the $(document).ready() function, get a reference to the Grid and call the read() method of its DataSource to request the data.
• When the Read request finishes, call the AddNewRow() function. This way, the new row will be added when the Grid's data is completely loaded.

@(Html.Kendo().Grid<ProductViewModel>()
    .Name("Grid")
    .AutoBind(false)
    ...
)

<script>
function AddNewRow() {
    var newRow = { TlpModifierNew: 0 };
    var gridName = nmdModelGridTabNames[activeNmdModel3TabId - 1];
    var grid = $("#" + gridName).data("kendoGrid");
    grid.dataSource.add(newRow);
    var theCell = $('#' + gridName + " " +'tbody'+ " " +'tr:last-child td:eq(1)');
    $("#" + gridName).data('kendoGrid').editCell(theCell);     
}

$(document).ready(function(){
    var gridName = nmdModelGridTabNames[activeNmdModel3TabId - 1];
    var grid = $("#" + gridName).data("kendoGrid");
    grid.dataSource.read().then(function(){
        AddNewRow();
    });
});
</script>

Let me know if this example works for you.

Regards,
Mihaela
Progress Telerik

[abdul]

Hi Mihaela,

Thanks for your response. while loading the grid i am able to add an empty row at the last in the grid.

Only problem i am facing is when i am saving few records in the grid, so after saving i am calling the below method, which will

fetch the latest records from the database and refresh the grid

function NMDModelGridRefresh() {
    var gridName = nmdModelGridTabNames[activeNmdModel3TabId - 1];
    $("#" + gridName).data("kendoGrid").dataSource.read();
}

After saving the grid can we call AddNewRow();  method.

[abdul]

Hi Mihaela,

I just did few things and also try to fix the above issue, like after saving also I am able to create a new empty row.

Accepting your answer.

[Mihaela]

Thank you for the update, Abdul. If any related questions arise, feel free to let me know.