Add new Row in Kendo Grid with some default values

Question

I want to add new Row in Kendo Grid which is having Default value in First Cell. How can I set the Default Value in that added Row of Kendo Grid

I am adding New Row in Kendo Grid as::

 $('#AddSingleSuppliment').click(function () {
            grid.addRow();

        });

But I want to Set the Value of First cell on the Basis of Value of Clicked DOM element, Like

 $('#AddSingleSuppliment').click(function () {
           var temVal=$(this).text();
           grid.addRow(tempVal);
        });

But we can't do it in that Manner. So please help me on this, For adding New Row in Kendo Grid with one Cell having Value of Button clicked.

Now I am able to Add New Row in Kendo Grid as,

$("#AddSingleSupplement").click( function(){
            var tempSupplement = $(this).val();
            //alert(tempSupplement);

            grid.addRow(tempSupplement);
            grid.dataSource._data[0].Description = $(this).text().trim();
        });

But the Value is not Directly Shown while adding new Row. It is Shown after we click on some other element. Please Suggest me wether this one is the Correct way to do this or there is any other way than this.

Answer 1

As per Kendo team , Default value cannot be changed dynamically.

However, we can make use the Grid edit event to pre-populate the edit form:

edit: function(e) {
 if (e.model.isNew() && !e.model.dirty) {
   e.container
     .find("input[name=ProductName]") // get the input element for the field
     .val("MyCustomValue") // set the value
     .change(); // trigger change in order to notify the model binding
 }

}

Answer 2

For dynamic defaults you can wire up your logic on Edit event, something like:

<script>

    $('#AddSingleSuppliment').click(function () {
            grid.addRow();    
        });

    function onEdit(e)
    {
        //Custom logic to default value
        var name = $("#AddSingleSuppliment").text();

        // If addition
        if (e.model.isNew()) {
            //set field
            e.model.set("Name", name); // Name: grid field to set
        }
    }
</script>