Programmatically adding rows into Grid

[Sergei]

I have a Grid:
            that._grid = $("#list", domEl).kendoGrid({
                selectable: "row",
                scrollable: true,
                columns: columns,
                rowTemplate: that.getRowTemplate(false),
                altRowTemplate: that.getRowTemplate(true),
                dataSource: new kendo.data.DataSource()
            }).data("kendoGrid");

This grid has an empty DataSource as I need to fill data later on my own.

So, sometime later I have all my data to put them info grid manually ("data" is an array of some objects):
        onDataLoaded: function (data) {
            that._grid.dataSource.data(data);
            that._grid.refresh();
            // some more work here to customize html
        }

Then, in some other place I need to add only one row. Obviously I should add an item into my DataSource first. But I also have to sync Grid with DataSource. I tied to use DataSource.Insert, but it throws an exception:
                    var index = that._grid.dataSource.indexOf((that._grid.dataSource.view() || [])[0]) || 0;
                    that._grid.dataSource.insert(index, obj); // throws as "_set" is undefined (DataSource has no Model defined).

So, I tried this method:
    that._grid.dataSource.data().push(obj);
it works. But it doesn't synchronize Grid with DataSource, so I have to update Grid manually also. But how to do this?
I could call _grid.refresh() indeed, but it'll replace whole html. It's slow and unacceptable for me (as I also need to update html but in the place where I'm adding a row I don't have all data).

p.s. Also I'd like to ask you to allow to use our own DataSources with Grid. It's not convinient now that Grid requires its own DataSource as I already have my own "data source" (not kendo). Now I have to dublicate data.

[Blop]

Hello,

   I was facing similar situation :
   - i bind data from a json service
   - i try to add row with
  

$("#combo").kendoComboBox(  dataSource: {

                    transport: {

                        read: {

                            // the remote service url

                            url: .... ,

                            dataType: "json"

                        }

                     });

var myNewObj = { Id: "123", textValue:"456"};

$("#combo").data("kendoCombo").dataSource.add(myObj);

   - Error  ! that._set is undefined

 "Problem" comes from DataSource init on kendo.data.js :

if (Model && !isEmptyObject(model)) {

    that._set = new ModelSet({

        model: model,

 Kendo only initialize "that._set" if there is a model.

Solution :
    Set a model on your declaration :
   ex :

$("#combo").kendoComboBox({

    dataSource: {

        transport: {

            read: {

                url: "",

                dataType: "json"

            },

            schema: {

                model: {

                    id: "Id",

                    fields: {

                        Id: {},

                        textValue: {}

                    }

                }

            }}});

And add function should work and fire UI sync event.



PoP

[Sergei]

Thanks, Blop. But the thing is that I don't have any kendo datasource, I load data by myself.