Kendo UI adding row at Runtime(Client Side) - grid

Question

I am able to add a row at runtime using .js file into Kendo Data Source, but I havent seen from the form(UI), I followed the below steps
var vgrid = $("#grdEntitys").data("kendoGrid");
var datasource = vgrid.dataSource;
var newRecord = { No: "8164",ModellNo: "147",ID: "Test01", Name: "TEST"}
datasource.insert(newRecord);
then It throws an error "TypeError: Cannot read property 'AttributeValue' of undefined",
if we look at the console log, I am able to see the incrmented rows count as well as the newly inserted record. But in UI there is no change(UI Grid).
could you please anyone let me know, how to add row at client side?
Thanks in advance

Answer 1

For insert you have to specify index (Insert) :
var dataItem = dataSource.insert(0, { name: "John Doe" });
Alternatively you could use Add where you don't have to specify the index:
<script>
var dataSource= new kendo.data.DataSource({
data: [
{ name: "Jane Doe", age: 30 }
]
});
dataSource.add({ name: "John Doe", age: 33 });

Answer 2

you can use the script in you event to add item in your grid.
var dataSource = $("#CustomerPackageChannelKendoGridAdd").data("kendoGrid").dataSource;
// Get value from another field
var _JV_ACCOUNT_ID = $('#JV_ACCOUNT_ID').val();
var _JV_ACCOUNT_NAME = $('#JV_ACCOUNT_NAME').val();
var _JV_ACCOUNT_CODE = $('#JV_ACCOUNT_CODE').val();
var _JV_NOTES = $('#JV_NOTES').val();
var _JV_DATE = $('#JV_DATE').val();
var type = $('#JV_Transaction_TYPE').val();
// You can set condition if required for you
if (CheckExistingData(gridDataAdd, _JV_ACCOUNT_ID) == false) {
currentId += 1;
dataSource.add(
{
id: currentId,
JV_ACCOUNT_ID: _JV_ACCOUNT_ID,
JV_ACCOUNT_NAME: _JV_ACCOUNT_NAME
, JV_ACCOUNT_CODE: _JV_ACCOUNT_CODE
, JV_NOTES: _JV_NOTES
, JV_DATE: _JV_DATE
, JV_DEBIT_AMOUNT: _JV_DEBIT_AMOUNT
, JV_CREDIT_AMOUNT: _JV_CREDIT_AMOUNT
});
}
For more you can also see this: