Update the grid when the product collection is changed programmatically

fbuchinger commented 12 years ago

Thanks for the nice example demonstrating the backbone/kendoui-Integration. Currently, the backbone model products gets updated when the user adds a row to the grid. It would be nice if the binding also worked in the opposite way (adding a new item to the backbone collection creates a new grid row)

naquiuddin commented 11 years ago

This is very important. Please provide this feature.

naquiuddin commented 11 years ago

I have changed a value in the collection. but it doesn't get updated even I try doing refresh() and dataSource.read() on the grid. How do I refresh the grid with new data.Please help.

<!DOCTYPE html>
<html>
    <head>
        <title>Kendo UI and Backbone</title>
        <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css" rel="stylesheet" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.web.min.js"></script>
        <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
        <script src="http://backbonejs.org/backbone-min.js"></script>
        <script src="kendo.backbone.js"></script>
    </head>
    <body>
        <h3>Grid</h3>
        <div id="grid">
        </div>

        <h3>Backbone collection</h3>
        <pre id="log">
        </pre>
        <button id="clicker">Click to change</button>
        <script>
                var Product = Backbone.Model.extend({
                });

                var ProductCollection = Backbone.Collection.extend({
                    model: Product
                });

                var products = new ProductCollection(
                [
                    { ProductID: 1, Name: "Food"}, { ProductID: 2, Name: "Coffee"}
                ]);

                var ProductWrapper = kendo.backboneModel(Product, {
                    ProductID: { type: "number" },
                    Name: { type: "string" }
                });

                var ProductCollectionWrapper = kendo.backboneCollection(ProductWrapper);

                products.on("change remove", function() {
                    $("#log").text(kendo.stringify(products.toJSON()));
                });

                $("#log").text(kendo.stringify(products.toJSON()));

                $("#grid").kendoGrid({
                    editable: true,
                    toolbar: ["create"],
                    columns: ["ProductID", "Name", { command: "destroy" }],
                    dataSource: {
                        schema: {
                            model: ProductWrapper
                        },
                        data: new ProductCollectionWrapper(products),
                        // filter : {field: "ProductID", operator: "eq", value: 1}
                    }
                });

                $("#clicker").click(function(){
                    var models = products.where({ProductID : 1});
                    _.each(models, function(model,index) {
                        var name = model.get("Name");
                        console.log(name);
                        model.set({Name : "Tea"});
                    });
                    var grid = $("#grid").data("kendoGrid");
                    grid.dataSource.read();  //This doesn't work and
                    grid.refresh(); //doesn't work either.
                    // filter =  {field: "ProductID", operator: "eq", value: 1}; 
                    // grid.dataSource.filter(filter); //This works.

                });

        </script>
    </body>
</html>

mxriverlynn commented 11 years ago

alright, yo.

I have a work-in-progress solution for this in the dev branch, to do 2-way sync between the collection and datasource. it only works for "add" right now. I'll keep cranking on this to get update and delete working, too.

sorry this has taken so long. a lot of other things got in the way in the last couple of months.

mxriverlynn commented 11 years ago

add and remove both sync, now, in the dev branch. If you want a demo of this, pull the latest code from the dev branch and run the node server.

npm install
node app.js

then open http://localhost:3000/demos/grid-datasource

there's a form for adding a new image via backbone. it updates the backbone grid and kendoui grid. you can also delete from the backbone grid or the kendo ui grid.

currently the add form in the kendo ui grid is broken. need to fix that.

mxriverlynn commented 11 years ago

2 way sync is now complete in the dev branch, and will be released w/ v0.0.4 (soon!)

naquiuddin commented 11 years ago

Awesome! Thanks Derick.

mxriverlynn commented 11 years ago

I did a video blog post on this update, last week: http://www.kendoui.com/blogs/teamblog/posts/13-06-13/video-blog-2-way-sync-with-kendoui-backbone.aspx

naquiuddin commented 11 years ago

Oh that's great :) :+1:

kendo-labs / kendo-backbone

Update the grid when the product collection is changed programmatically #1