kendo grid dataSource change add row recursion

Question

I'm trying to add a row to my grid after it loads, but if I do the add row in the event-handler for the dataSource change event, it fires recursively

 $("#orderGrid").kendoGrid({
       dataSource: {
         transport: {
           read: "api/order-products"
         },
         pageSize: 10,
         change: function(e) {

            var grid = $("#orderGrid").data('kendoGrid');
            grid.dataSource.add( { name: "Product 1", orderId: "1" } );

         }  
       },
       columns:[{
         field: "name",
         title: "Product Name"
       }] 
     });

I also tried adding the add-row function to the dataBound event of the grid itself; with the same result.

What's the right way to do this?

Answer 1

I've circumvented this by adding my own flag to the grid object; but this feels hacky - any cleaner suggestions welcome :S

        dataBound : function(e) { 
            var grid = $("#orderGrid").data('kendoGrid');
            if (!grid.productAdded) {
                grid.productAdded = true;
                grid.dataSource.add({
                    name : "Name",
                    orderId : "27"
                });
            }
        }