Dynamic Default for Kendo Grid

Question

I need an auto increment column in my Kendo grid. This field is not an automatic increment on the server side, because I want the user to see this value and be able to change it.

My current solution is to add the click attribute to the Create button and iterate over the rows to find the highest value and increase it.

But how can I insert this value into a newly created string? The click event occurs before a new line is created.

So, there are two possible solutions:

• Have the variable as the default and update it in my JS code.
• Access the newly created row and update it.

This is my JS code:

 function createClick(id) { var grid = $("#" + id).data('kendoGrid'); var highestRadif = 0; grid.tbody.find('>tr').each(function () { var dataItem = grid.dataItem(this); var radif = dataItem.SRadifReqR; highestRadif = highestRadif < radif ? radif : highestRadif; }) alert(++highestRadif); } 

Answer 1

You can use the Grid edit event to add a new generatedId value to the new Grid model .

This is the explanation from the documentation :

Edit

when a user edits or creates a data item.

• e.container jQuery, the jQuery object of the edit container element that wraps the editing interface.
• e.model kendo.data.Model, the data item to be edited. Use its isNew method to check if the data item is new (created) or not (edited).
• e.sender kendo.ui.Grid, the widget instance that triggered the event.

I believe your click has something like this

 //generate id code vm.newId = ++highestRadif; // we need to store generated Id grid.addRow(); 

and then in the edit event

 edit: function(e) { var model = e.model; // access edited/newly added model // model is observable object, use set method to trigger change event model.set("id", vm.newId); } 

Note The editable: true property should be specified in the field of your schema model, which will allow us to change the value of the model field using the set method. Also, if your field schema requires verification, you need to remove it.

 model: { id: "ProductID", fields: { ProductID: { editable: true, nullable: true }, } } 

Example

Answer 2

I managed to put the function in the data source schema for this.

 schema: { model: { id: "id", fields: { currencyType: { defaultValue: getDefaultCurrency }, invoiceDate: { type: "date" } } } } function getDefaultCurrency() { return _.find(vm.currencyTypes, { id: vm.currencyId }); };